Color Contrast Checker (WCAG)

How to Use the Color Contrast Checker

1. Set foreground color - use the color picker or type a hex value for your text color.
2. Set background color - choose the background color your text will appear on.
3. View results - the tool instantly shows the contrast ratio and WCAG AA/AAA pass/fail for normal and large text.
4. Get suggestions - if your combination fails, the tool suggests the closest accessible colors.
5. Swap colors - use the swap button to quickly check the reverse combination.

Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with moderately low vision. These guidelines are legally required in many jurisdictions and are considered best practice for all web design. Meeting contrast requirements helps everyone, not just people with disabilities - text is easier to read in bright sunlight, on low-quality monitors, and in other challenging viewing conditions.

WCAG AA Standard

Level AA is the standard compliance level that most websites and apps target. It requires a minimum contrast ratio of 4.5:1 for normal text (below 18pt / 24px) and 3:1 for large text (18pt+ bold or 24px+ regular). Level AA is required by the European Accessibility Act, Section 508 in the US, and the Accessibility for Ontarians with Disabilities Act in Canada.

WCAG AAA Standard

Level AAA is the enhanced compliance level, requiring 7:1 for normal text and 4.5:1 for large text. While not typically required by law, AAA compliance provides the best readability for the widest range of users. It is especially recommended for content-heavy sites like news, documentation, and government services.

How Contrast Ratio Is Calculated

The contrast ratio formula uses relative luminance, which accounts for how the human eye perceives different colors. The formula converts sRGB values to linear light using gamma correction, then calculates luminance as a weighted sum: L = 0.2126*R + 0.7152*G + 0.0722*B. The ratio between the lighter and darker luminance values, with an offset of 0.05, gives the contrast ratio on a scale from 1:1 to 21:1.

Common Mistakes

• Gray text on white - light gray (#999) on white (#fff) has only 2.85:1 contrast, failing all WCAG levels
• Brand colors without testing - many brand colors fail contrast when used as text on white or dark backgrounds
• Placeholder text - input placeholder text is often too light to meet even AA standards
• Color alone for meaning - never rely solely on color to convey information (error states, status indicators)

Dark Mode and Contrast

When designing for dark mode, many developers simply invert their light-mode colors. However, contrast requirements apply equally in both modes. White text on dark backgrounds can actually produce too much contrast (21:1 with pure white on pure black), which causes eye strain for some users. Consider using slightly off-white text (#e2e8f0) on dark backgrounds (#0f172a) for a comfortable reading experience that still exceeds AAA requirements. Always test your dark mode palette with this tool to verify compliance.

Non-Text Contrast

WCAG 2.1 also includes guidance on non-text contrast (Success Criterion 1.4.11). User interface components like buttons, input borders, and icons require a minimum 3:1 contrast ratio against their adjacent colors. This is separate from text contrast but equally important for usability. While this tool focuses on text contrast, the same ratio calculation applies -- check your UI element colors against their surrounding backgrounds to ensure they are distinguishable by users with low vision. Generate a full set of accessible colors with our WCAG Palette Generator, explore color harmonies with the Color Palette tool, or pair your accessible colors with readable font sizes from the Typography Scale.

How to Use the Color Contrast Checker

The Color Contrast Checker is a tool that helps you ensure your website or application meets WCAG 2.1 accessibility standards for text contrast. To use it, follow these steps:

1. Set the foreground color by using the color picker or typing a hex value for your text color.

2. Set the background color by choosing the background color your text will appear on.

3. View the results, which instantly show the contrast ratio and WCAG AA/AAA pass/fail for normal and large text.

4. If your combination fails, the tool suggests the closest accessible colors.

5. Swap colors to quickly check the reverse combination.

Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with moderately low vision. These guidelines are legally required in many jurisdictions and are considered best practice for all web design. Meeting contrast requirements helps everyone, not just people with disabilities - text is easier to read in bright sunlight, on low-quality monitors, and in other challenging viewing conditions.

WCAG AA Standard Level AA is the standard compliance level that most websites and apps target. It requires a minimum contrast ratio of 4.5:1 for normal text (below 18pt / 24px) and 3:1 for large text (18pt+ bold or 24px+ regular). Level AA is required by the European Accessibility Act, Section 508 in the US, and the Accessibility for Ontarians with Disabilities Act in Canada.

WCAG AAA Standard Level AAA is the enhanced compliance level, requiring 7:1 for normal text and 4.5:1 for large text. While not typically required by law, AAA compliance provides the best readability for the widest range of users. It is especially recommended for content-heavy sites like news, documentation, and government services.

How It Works

The Color Contrast Checker uses the Web Content Accessibility Guidelines (WCAG) 2.1 to calculate the contrast ratio between the foreground and background colors you input. It then checks if this ratio meets the required standards for normal and large text. The tool also provides suggestions for the closest accessible colors if your combination fails.

Tips, Edge Cases, or Limitations

When using the Color Contrast Checker, keep the following tips in mind:

1. Always test your dark mode palette with this tool to verify compliance.

2. Non-text contrast (Success Criterion 1.4.11) also requires a minimum 3:1 contrast ratio against their adjacent colors.

3. Be aware of common mistakes such as gray text on white, brand colors without testing, and placeholder text.

4. Contrast requirements apply equally in both light and dark modes.

5. The tool does not support transparent backgrounds.

Quick reference

Example walk-through

Foreground color: #000000
Background color: #FFFFFF

Contrast Ratio: 21:1
WCAG Compliance: Pass (AA/AAA standard)