Colour contrast checker

What this checker tests

The checker applies the contrast formula from the Web Content Accessibility Guidelines (WCAG) 2.2, published by the W3C. It works out the relative luminance of each colour, which is how bright it appears once the screen's gamma curve is undone and the red, green and blue channels are weighted for human vision, and divides the lighter by the darker after adding 0.05 to each. The result runs from 1:1 to 21:1.

WCAG defines large text as at least 18 point, or at least 14 point if bold. In CSS pixels that is roughly 24px, or about 18.7px bold. Most body text on the web is 16px, so it counts as normal text.

A worked example

The default pair is #6366f1 text on a white background. Its ratio is 4.46:1. That fails AA for normal text by a very small margin, but passes for large text and for interface components such as a button border. The suggestion list shows that darkening the text to #6265f1, a change you would struggle to see, lifts it to 4.51:1. To reach AAA it needs to go as dark as #373aed.

The suggestions keep the hue and saturation of your text colour and change only its lightness, in steps of 0.1%, in whichever direction reaches the target sooner. If your text is lighter than the background they will usually make it lighter still; if it is darker they make it darker. Brand colours sometimes cannot reach a target in either direction without losing their character, in which case consider changing the background instead.

Common pitfalls

• Rounding up. A ratio of 4.48:1 is a fail for normal text. Some tools round to one decimal place and show 4.5:1. This checker cuts the ratio off at two decimals instead.
• Placeholder and disabled text. Placeholder text inside form fields is often pale grey and still needs 4.5:1 if users must read it. Disabled controls are exempt, but should still be recognisable.
• Text over images and gradients. Test the lightest part of the background behind light text, or the darkest part behind dark text. A solid or semi-transparent panel behind the text is the reliable fix.
• Hover, focus and visited states. Each state is a new colour pair and needs checking too. Focus indicators fall under the 3:1 non-text rule.
• Transparency. Work out the solid colour that results from the blend, then test that. Contrast is only defined for opaque colours.

Passing a contrast check is necessary but not sufficient. Font weight, size, line length and colour vision deficiency all affect readability, and WCAG 1.4.1 requires that colour is never the only way information is conveyed. Our WCAG colour contrast guide goes through the formula step by step, with the legal context in the UK.

Frequently asked questions

Which colour is "text" and which is "background"?

For the ratio itself it makes no difference: the formula always divides the lighter colour by the darker. The labels only matter for the preview and the suggestions, which adjust the text colour.

Can I link to a result?

Yes. Add fg and bg to the address, for example /contrast-checker.html?fg=ffffff&bg=4338ca.

Is 4.5:1 enough to be accessible?

It meets the AA minimum for normal text, which is the level usually required. Some readers benefit from more, and AAA asks for 7:1. Contrast is only one part of accessibility.

Does this checker use APCA?

No. APCA is a newer contrast method being explored for a future version of WCAG. It is not part of WCAG 2.2, so it cannot be used to show conformance today.