WCAG Contrast Checker

What this tool does

It measures the contrast ratio between a text colour and a background colour, and tells you at once whether it meets the five WCAG 2.2 thresholds that matter: AA and AAA for normal and large text, plus the non-text one almost nobody checks.

If it fails, it proposes a corrected colour keeping the hue and the saturation: it adjusts lightness only, so the result is still your brand colour, just a little darker or lighter.

It accepts #hex, rgb(), hsl() and CSS names, and resolves transparency for you.

How to use it

1. Set the text colour and the background colour, with the picker or by typing them.
2. Read the ratio and the five results.
3. If something fails, press the fix button for the level you need.
4. Check the preview: the same text at 24, 16 and 13 pixels.

The thresholds, and which one applies to you

AA is the one regulations demand. The European accessibility directive, the US Section 508 and most national laws point at WCAG level AA. AAA is meant for specific contexts and the standard itself says it is not required as a general requirement for a whole site.

The forgotten threshold: 1.4.11

Criterion 1.4.11 Non-text Contrast asks for 3:1 on things that are not text but carry information:

• The border of a form field against the page background. An input with an #e5e5e5 border on white gives 1.3:1 and is invisible to many people.
• Icons that mean something (a bin, a warning, a check).
• The lines and bars of a chart, which is where it is broken most often.
• The keyboard focus indicator.

It does not apply to pure decoration or to logos. But a design that passes AA on all its text and fails here is still inaccessible.

What counts as “large text”

This is the number one cause of false passes, because it sounds like a visual criterion and it is a number:

• 18 pt = 24 px at normal weight
• 14 pt = 18.66 px in bold

A 20 px heading at normal weight is not large text: it needs 4.5:1, not 3:1. The confusion arises because on screen it clearly looks bigger than body copy, but the threshold does not care about that.

Practical rule: when in doubt, apply 4.5:1. Passing by too much has never failed an audit.

Why two very different colours can fail

WCAG contrast does not measure colour difference, it measures brightness difference. And brightness is not shared equally across the three channels:

Blue contributes less than a tenth of perceived brightness. That explains two surprising things:

• Blue on black almost always fails. #0000ff on #000000 gives 2.44:1, even though it is perfectly distinguishable on a good screen. For someone with low vision, or anyone with their phone in direct sunlight, that hue difference is not enough.
• Yellow on white is worse than it looks. Yellow has red and green at maximum, so it is nearly as luminous as white: #ffff00 on #ffffff gives 1.07:1.

The underlying reason is that contrast is designed to work even when colour is not perceived: colour blindness, greyscale, poor screens, direct light.

And gamma, which is where home-made implementations break

To get luminance it is not enough to weight the R, G and B values straight out of the hex. You must first undo the sRGB gamma correction on each channel, because a colour’s values are not linear with respect to the light the screen emits. A #808080 does not emit half the light of #ffffff: it emits 21.6 %.

Skipping that step — averaging channels, or weighting them without linearising — produces numbers that look reasonable and are wrong, which is the worst thing that can happen in an accessibility check.

How to fix without losing the brand

When a corporate colour fails, the reflex is to change it. It is almost never necessary.

Contrast depends on lightness, not on hue or saturation. Moving lightness alone in HSL reaches the threshold while keeping the identity: a brand blue is still the same blue, just a notch darker. That is what the fix buttons on this page do, and why they tell you whether the adjustment goes up or down.

Two honest caveats:

• Sometimes the problem is the background. Over a mid grey (#808080) no text colour reaches 7:1, because neither pure black nor pure white gets there from that base. When the tool proposes no fix, that is why.
• The brand colour can stay where it is if you use it only on large or decorative elements and use the corrected variant for small text. That is what most serious design systems do: one brand colour and an “accessible” version of it for text.

Transparency has to be resolved first

WCAG works with opaque colours. If your text is rgba(0,0,0,0.6), it has no contrast of its own: it has the contrast of the colour that results from compositing it over whatever is behind.

The practical consequence is that the same value can pass and fail depending on where you put it. A translucent grey that works on a white card can fail over an image. This tool composites automatically and shows you the two opaque colours it is really measuring, so you know what you are approving.