Colour Contrast Checker
Test any colour combination against WCAG 2.1 standards. See how your colours appear to users with colour vision deficiency — instantly, free, in your browser.
Normal colour vision
How this combination looks with colour vision deficiency
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
Understanding colour contrast and accessibility
WCAG Contrast Standards
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for users with low vision or colour blindness:
- 4.5:1 WCAG AA — Normal text (under 18pt)
- 3.0:1 WCAG AA — Large text (18pt+ or 14pt bold)
- 7.0:1 WCAG AAA — Normal text (enhanced)
- 4.5:1 WCAG AAA — Large text (enhanced)
Why CVD simulation matters
Approximately 8% of men and 0.5% of women have some form of colour vision deficiency. Even if your colour combination passes WCAG contrast ratios for normal vision, it may fail for users with protanopia or deuteranopia — who see reds and greens very differently. Always test your designs with CVD simulation.
Luminance is the channel that always survives
Colour has two components a designer can lean on: hue, and lightness. Only one of them is reliable across the whole audience.
Hue discrimination varies enormously. Roughly one man in twelve has a red-green deficiency, and for them a hue difference that looks obvious to you may carry no information at all. Lightness discrimination is far more uniform. A viewer with a colour vision deficiency, a viewer with reduced acuity, a viewer on a washed-out phone screen in direct sunlight, and a viewer with entirely typical vision all perceive a large lightness difference as a large difference.
That is why contrast ratio is the load-bearing accessibility metric. It measures the lightness relationship between two colours, ignoring hue entirely — which is exactly what you want, because it tells you what remains when the hue channel is unreliable.
The ratio runs from 1:1, where two colours have identical relative luminance and the boundary between them is invisible to everyone, up to 21:1 for pure black on pure white. The calculation is defined precisely in WCAG: convert each sRGB channel to linear light, weight the channels by their contribution to perceived luminance, then compare the lighter and darker results.
The thresholds, and what sits behind them
4.5:1 — normal text (WCAG AA). The baseline for body copy. The figure derives from the contrast sensitivity loss associated with roughly 20/40 vision, which is common in older adults and correctable but frequently uncorrected.
3:1 — large text (WCAG AA). Applies from 18pt regular or 14pt bold. Larger glyphs have thicker strokes, so they remain legible at lower contrast.
3:1 — non-text contrast (WCAG AA). Covers user interface components and meaningful graphics: input borders, toggle states, focus indicators, icons that convey information, and the essential parts of a chart. This criterion is the one most often missed, and it is usually where a visually elegant, low-contrast interface fails an audit.
7:1 and 4.5:1 — normal and large text (WCAG AAA). A stricter tier, aimed at approximately 20/80 vision. Worth adopting for long-form reading even when not required.
Contrast is necessary, not sufficient
The most common mistake in accessible palette work is treating a passing contrast ratio as the end of the job. Two independent questions need answering:
- Is each colour readable against its background? That is contrast, and this checker answers it.
- Are colours that mean different things distinguishable from each other? That is hue separation, and contrast ratio says nothing about it.
A chart with a red series and a green series can pass contrast comfortably — both are dark against a white background — while being completely unreadable to a deuteranope, because the two series are indistinguishable from each other. Run such palettes through the colour vision simulator as well.
And whenever colour carries meaning, add a second cue. WCAG’s use-of-colour criterion requires it, and technique G111 describes the standard approach: pair colour with pattern, shape, position, or an explicit label. In practice this means direct labels on chart series instead of a colour legend, an icon beside a red error message, an underline on inline links, and a shape difference between success and failure states.
Working with the checker
Enter a foreground and a background and the tool reports the ratio and which thresholds it meets. A few habits make it more useful:
- Test the real pair. Semi-transparent overlays, gradients and background images mean the effective background is not the colour in your stylesheet. Sample what actually renders.
- Test both themes. Luminance does not invert cleanly; a dark-mode palette needs its own pass.
- Test the worst case in a gradient, not the average.
- Include disabled and placeholder states. They are still read.
- Check focus indicators against every surface they appear on. A focus ring that meets 3:1 on white may vanish on a card.
For the wider picture, designing for colour blindness covers palette construction, and making charts accessible works through data visualisation specifically.
Got Questions?
Frequently Asked Questions
Everything you need to know about colour blindness tests, how they work, and what to do with your results.
What do 4.5:1 and 3:1 actually mean?
They are luminance contrast ratios between a foreground and a background, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 asks for at least 4.5:1 for normal body text, and allows 3:1 for large text — from 18pt, or 14pt bold — because larger glyphs have thicker strokes and survive lower contrast. Non-text elements that carry meaning, such as icons, input borders and focus indicators, also need 3:1.
Why does contrast matter for colour blindness specifically?
Because luminance contrast is the channel that survives when hue discrimination does not. If two elements differ only in hue and barely at all in lightness, a viewer whose cones compress that hue difference is left with nothing. Adequate luminance contrast means the distinction remains visible regardless of how colour is processed. It is the most robust accessibility property you can give a colour pair.
My colours pass at 4.5:1 but the design still fails a colour blind viewer. How?
Passing contrast against the background is necessary but not sufficient. A red and a green line on a chart can each have excellent contrast against white and still be indistinguishable from each other. Contrast is measured foreground-to-background; distinguishability is a foreground-to-foreground question. Check both, and give every colour-coded distinction a non-colour cue.
Does the ratio change with dark mode?
The formula does not, but your results will. Contrast is computed from relative luminance, so inverting a palette produces different ratios rather than mirrored ones. A pair that passes on white can fail on near-black, particularly saturated blues and purples, whose luminance is low to begin with. Test both themes.
Is AAA worth targeting?
It is a stricter tier — 7:1 for normal text, 4.5:1 for large — and it is genuinely easier to read, especially for low vision and in poor lighting. Most organisations target AA as the compliance baseline and treat AAA as a goal for body copy and long-form reading. AAA is rarely a legal requirement.
Which elements are exempt?
WCAG exempts purely decorative content, text that is part of an inactive control, text in a logotype, and text that forms part of a picture containing significant other visual content. The exemptions are narrower than people assume — placeholder text, disabled-looking-but-active controls, and low-contrast helper text are all commonly and wrongly treated as exempt.
Still have questions? Contact us →