Color Contrast Checker
Test any text and background pair against WCAG AA and AAA. You get the exact ratio, a live preview at four text sizes, and the closest color that passes.
Contrast ratio
6.69:1
- AA normal textPass
- AA large textPass
- AAA normal textFail
- AAA large textPass
- Non-text UIPass
Large heading text
Subheading at 20 pixels
Body copy at the default size. This is the sample that has to clear 4.5:1 for WCAG AA. If it feels hard to read here, it will be much harder on a phone in daylight.
Small print at 14 pixels, which is where most palettes fail.
Bordered buttonWhy the numbers are weighted toward green
Relative luminance is not an average of the three channels. Green is weighted at roughly 0.72, red at 0.21 and blue at just 0.07, because that is approximately how sensitive human vision is to each. A saturated blue and a saturated green with identical HSL lightness values will therefore have very different contrast against white.
This is why designers are so often surprised that their yellow fails and their purple passes. The perceptual model does not match the intuition you build from a color picker, which is exactly why the check has to be mechanical.
Where teams most often fail an audit
Placeholder text is the single most common failure. It is deliberately low contrast to look secondary, and it almost always lands somewhere around 3:1 against a white field. Disabled states are a close second, though those are exempt under the current guidelines.
Focus indicators are the failure with the most real-world impact. A focus ring that is invisible against its background makes keyboard navigation unusable, and unlike small type it cannot be worked around by zooming.
The fix in each case is the same: pick the color from a ramp that was generated with contrast in mind, rather than by eye from a color wheel. Once your neutral scale has known ratios against your surfaces, most of these decisions stop being decisions.
Generate an accessible palette first
If you are still choosing colours, start with the accessible color palette generator guide: it shows WCAG compliant text/background pairs labelled AA or AAA, plus colorblind friendly color palette habits for charts and status UI. Generate a five-colour scheme in the AI tool, then return here to confirm every reading pair before you export tokens.
Looking for ready AA/AAA examples and a full generation workflow? Visit the accessible color palette generator or open the AI color palette generator.
Color Contrast Checker FAQ
What contrast ratio do I need for WCAG AA?
WCAG 2.1 level AA requires at least 4.5:1 for normal body text and 3:1 for large text, where large means 18.66px bold or 24px regular and above. Level AAA raises those figures to 7:1 and 4.5:1.
Does the rule apply to icons and borders?
Yes, in part. Non-text elements that convey information, including input borders, focus indicators and meaningful icons, need 3:1 against adjacent colors. Purely decorative graphics are exempt.
How is the contrast ratio calculated?
The relative luminance of each color is computed as a weighted sum of its gamma-corrected red, green and blue channels. The ratio is then the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which yields a value between 1:1 and 21:1.
My brand color fails. What should I do?
Adjust lightness before you adjust hue, because darkening a color by ten or fifteen points usually clears the threshold while keeping the color recognisable. If it still fails, use the brand color for large surfaces and illustration and pair it with a darker sibling for anything that has to be read.
Is passing the contrast check enough for accessibility?
No. Contrast is the one part that can be measured automatically, but you also need to make sure no information is conveyed by color alone, that focus states are visible, and that the design still works at 200% zoom.