Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.
What the Color Contrast Checker does
The Color Contrast Checker measures how readable text is on a background. Pick a text color and a background color and it shows the contrast ratio from 1:1 (identical colors) up to 21:1 (black on white), a live preview, and whether the pair passes the four WCAG thresholds: AA and AAA for normal text and for large text.
The ratio uses the WCAG 2 relative-luminance formula: each color channel is linearised, weighted (green counts most, blue least) and the lighter luminance is divided by the darker one, with 0.05 added to both. AA needs 4.5:1 for normal text and 3:1 for large text (at least 24px, or 18.66px bold). AAA raises those to 7:1 and 4.5:1. The calculation runs in your browser.
When to use it
- Choosing a brand color for buttons and checking that white labels on it stay readable.
- Fixing a failed accessibility audit from Lighthouse or axe that reports low-contrast text.
- Picking a grey for secondary text that is still light enough to look secondary but passes AA.
- Designing a dark theme, where mid-tone accents often fail against dark backgrounds.
Worked example
#ffffff on #3b82f6
3.68:1 - AA large only
#767676 on #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b on #ffffff
14.63:1 - passes all four
Common questions about the Color Contrast Checker
Why does white text on a bright blue button fail?
Saturated mid-tone colors have fairly high luminance, so white text on them often lands between 3:1 and 4.5:1. That passes for large, bold labels but not for body text. Darken the background a step or two until the ratio reaches 4.5:1.
Which level should I aim for, AA or AAA?
AA is the level most accessibility laws and policies refer to, so treat it as the minimum. AAA is a stricter goal that is worth meeting for long reading text, but it is not required for every element.
Does contrast apply to icons and borders too?
WCAG 2.1 asks for at least 3:1 for meaningful graphics and interface components, such as input borders, focus rings and icons that carry information. Use the large-text AA result as the guide for those.
Can I check a color written as RGB or HSL?
The pickers work with hex values. Convert other notations first with the HEX to RGB Color Converter family of tools or the Color Converter, then paste the hex code.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.