Color Contrast Checker (WCAG)
Check if your color combination meets WCAG 2.1 accessibility standards for text contrast.
How to Use the Color Contrast Checker
- Set foreground color — use the color picker or type a hex value for your text color.
- Set background color — choose the background color your text will appear on.
- View results — the tool instantly shows the contrast ratio and WCAG AA/AAA pass/fail for normal and large text.
- Get suggestions — if your combination fails, the tool suggests the closest accessible colors.
- 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.