icon Color Contrast Checker

Check if your color combinations meet accessibility standards. Verify contrast ratios against WCAG (Web Content Accessibility Guidelines) recommendations and ensure your designs are readable for everyone.
Aa Bb Cc Dd Ee The quick brown fox jumps over the lazy dog.

Foreground (Text) Color

Background Color

Customize Sample Text

👁️

Understanding WCAG Color Contrast

Color contrast is a fundamental aspect of digital accessibility. Proper contrast ensures content is readable for everyone, including the 285 million people worldwide with visual impairments and the 300 million with color vision deficiencies.

WCAG Contrast Requirements

  • WCAG 2.1 Level AAA (Normal text): Requires a contrast ratio of at least 7:1 for normal text, providing exceptional readability for all users
  • WCAG 2.1 Level AA (Normal text): Requires a contrast ratio of at least 4.5:1 for normal text, meeting legal requirements in many jurisdictions
  • WCAG 2.1 Level AAA (Large text): Requires a contrast ratio of at least 4.5:1 for large text, ensuring optimal visibility
  • WCAG 2.1 Level AA (Large text): Requires a contrast ratio of at least 3:1 for large text, meeting baseline accessibility standards
  • UI Components: Need a minimum contrast ratio of 3:1 against adjacent colors to ensure interactive elements are perceivable

What Our Grades Mean

  • A+ (7:1 or higher): Exceptional contrast that exceeds all WCAG requirements, suitable for all text and UI elements
  • A (4.5:1 to 7:1): Strong contrast that meets WCAG AA requirements for all text sizes and AAA for large text
  • B (3:1 to 4.5:1): Moderate contrast, suitable only for large text (AA) and UI components
  • C (2:1 to 3:1): Poor contrast that fails WCAG requirements for text but may be acceptable for decorative elements
  • F (less than 2:1): Insufficient contrast that creates significant accessibility barriers and should be avoided

What is "Large Text"?

According to WCAG standards, "large text" is defined as text that is:

  • Bold text at least 14 points (typically 18.66px) OR
  • Regular text at least 18 points (typically 24px)

Why Contrast Matters

Good color contrast doesn't just benefit those with permanent vision impairments—it improves readability for:

  • Users with temporary vision conditions (eye strain, dilated pupils)
  • People using screens in bright sunlight or high-glare environments
  • Older adults experiencing age-related vision changes
  • Anyone using devices with low brightness settings to conserve battery
FAQ - Color Contrast Checker
How do I use the color picker? +

Use our interactive color pickers to select foreground and background colors. You can click on the color presets, adjust the hue slider, or click directly on the saturation-value picker to select your desired color. The hex value will automatically update in the input field.

What do the contrast grades mean? +

The contrast grading system provides a quick assessment of your color combination's accessibility:

  • A+ (7:1 or higher): Excellent contrast, perfect for all text and UI elements
  • A (4.5:1 to 7:1): Good contrast, suitable for normal text
  • B (3:1 to 4.5:1): Moderate contrast, only use for large text or UI elements
  • C (2:1 to 3:1): Poor contrast, not recommended for text
  • F (less than 2:1): Insufficient contrast, avoid using
How can I test my custom text? +

You can customize the sample text to preview how your actual content will look with selected colors. Simply enter your text in the "Customize Sample Text" box and click the "Update Preview" button to see how it appears with your chosen color combination.

What's the difference between normal and large text in WCAG standards? +

According to WCAG guidelines, "large text" is defined as text that is either:

  • Bold text at least 14 points (approximately 18.66px) OR
  • Regular text at least 18 points (approximately 24px)

Text smaller than these sizes is considered "normal text" and requires higher contrast ratios to meet accessibility standards.

How do I export my color combination? +

Once you're satisfied with your color combination, use the "Export to CSS" or "Export to SCSS" buttons at the bottom of the tool. This will generate code snippets with your selected colors that you can use directly in your web projects.

Can I swap the foreground and background colors? +

Yes! If you want to reverse your color selections, simply click the "↔ Swap" button between the foreground and background input fields. This instantly switches your colors and updates the contrast analysis.