WCAG Color Contrast Checker

A contrast checker measures how readable text is against its background. Enter a text colour and a background, in any CSS format, and see the WCAG contrast ratio, whether it passes AA and AAA, and the nearest colour that would.

How to use it

Type or paste a colour into Text colour and Background, or use the pickers beside them. Each box takes anything CSS understands: #767676, navy, rgb(0 0 0 / 60%), oklch(55% 0.2 260). The preview, the ratio and the pass or fail for each level update as you type. Swap colours checks the pair the other way round, which gives the same ratio but shows how the reversed design would look.

When a pair fails, Nearest passing colour offers a lighter or darker version of the text colour, and of the background, that reaches the target you choose. Use this puts it into the checker; Copy hex copies it for your stylesheet.

Everything runs in your browser. Nothing you type or pick is uploaded.

The WCAG contrast levels

WCAG 2 sets five contrast thresholds across three success criteria.

AA is the one to aim for. It is what the European Accessibility Act, the UK public sector regulations and US Section 508 point to. AAA is worth reaching for long-form reading, but WCAG itself says it is not a sensible requirement for whole sites, because some brand colours cannot meet it at all.

Large text is at least 24px, or at least about 18.66px and bold. Headings usually qualify; body copy usually does not.

Non-text contrast covers what you need to see to use a control: an input's border, a checkbox, a focus ring, an icon that carries meaning. Those need 3:1 against the colour next to them. Logos, decoration and disabled controls are exempt from every contrast rule.

How the contrast ratio is calculated

The ratio compares the relative luminance of the two colours: how much light each gives off, on a scale from 0 for black to 1 for white.

1. Scale each channel to 0-1. #999999 is 153 out of 255 on every channel, so 0.6.
2. Undo the sRGB gamma curve. Values up to 0.04045 are divided by 12.92; anything above is ((value + 0.055) / 1.055) ^ 2.4. For 0.6 that is 0.318.
3. Weight the channels. Luminance is 0.2126 × red + 0.7152 × green + 0.0722 × blue. Green counts ten times as much as blue because the eye is far more sensitive to it. A grey keeps its 0.318.
4. Divide. The ratio is (lighter + 0.05) / (darker + 0.05). White is 1, so #999999 on white is 1.05 ÷ 0.3685 = 2.849, which the checker shows as 2.84:1.

The 0.05 stands in for the glare on a real screen. It is why the ratio stops at 21:1 (1.05 ÷ 0.05) rather than going to infinity for black.

The ratio is the same whichever colour is the text, so white on navy and navy on white score alike.

Why #767676 is the grey everyone quotes

#767676 on white is 4.54:1, the lightest grey that passes AA for normal text. One step lighter, #777777, is 4.47:1, a fail. WCAG does not round, so there is no such thing as close enough: the checker compares the exact ratio, and shows it cut to two decimal places rather than rounded up.

That is also what Nearest passing colour does for any hue. It keeps the hue and changes only the OKLCH lightness, the lightness scale that matches what people see, by the smallest amount that reaches the target, then checks the result once more after rounding to the hex you would copy. So a soft coral becomes a darker coral, not a brown. The Color Converter explains OKLCH and shows the suggestion in every other format.

Transparent colours

WCAG defines contrast between two solid colours, but real designs use rgba() and opacity. This checker measures what is drawn:

• A semi-transparent text colour is blended over the background first. rgb(0 0 0 / 50%) on white is really mid grey, 3.97:1, and fails AA for body text, even though solid black would be 21:1.
• A semi-transparent background is assumed to sit on a white page. If yours sits on something else, check against that colour instead.

A checker that ignores alpha will pass faint text that people cannot read.

Gotchas

• Passing is the floor, not the goal. 4.5:1 is the minimum for readable text on a good screen. Thin fonts, small sizes, sunlight and old eyes all need more.
• Text on images and gradients needs checking at its worst point. Pick the lightest part of the image behind light text, or the darkest behind dark text.
• Placeholder text counts. Grey placeholders are one of the most common contrast failures. If the placeholder carries information, it needs 4.5:1 too.
• Hover, focus and visited states count. Every state a link or button can be in is its own pair to check.
• Dark mode is a second design. Check every pair again in both themes.
• WCAG 3 will use a different formula. The draft APCA method weights light and dark text differently. It is not yet a standard, and every current law and audit uses the WCAG 2 ratio shown here.

Keep going

The Color Converter turns any colour into HEX, RGB, HSL, OKLCH and the rest, which is handy once you have a passing colour to put in a stylesheet. The CSS cheat sheet covers where colour values go, and the HTML cheat sheet covers the markup they style. More free tools that run in your browser are on the tools page.

Common questions