Colour Contrast Checker: WCAG AA and AAA Ratio Test

Enter a text colour and a background colour and this checker returns the WCAG contrast ratio, whether the pair passes AA and AAA for body text, large text and interface parts, and the closest shade of your text colour that would pass. The detail most people miss: WCAG does not let you round up, so mid-grey #777777 on white, at 4.47:1, fails AA for body text even when a tool rounds it to 4.5. One step darker, #767676, passes at 4.54:1.

How the contrast ratio is calculated

Each colour is converted to its relative luminance: the red, green and blue channels are linearised from sRGB, then weighted 0.2126, 0.7152 and 0.0722, because the eye is far more sensitive to green than to blue. The ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05). That is why pure blue on white scores a comfortable 8.59:1 while a bright orange that looks bold can fall well short.

Which threshold applies to you

• 4.5:1 (AA, SC 1.4.3) for normal body text. This is the level most accessibility audits test against.
• 3:1 (AA) for large text, meaning 24px regular or roughly 18.7px bold and above.
• 3:1 (AA, SC 1.4.11) for the visual parts of controls and meaningful graphics: input borders, checkbox outlines, focus indicators and chart lines.
• 7:1 and 4.5:1 (AAA, SC 1.4.6) for body and large text respectively, a stricter target worth hitting for long-form reading.

Logos and purely decorative text are exempt, as is the text inside disabled controls. If you are testing colour changes on live pages, run the contrast check before the experiment rather than after: a winning variant that fails AA is a variant you will have to change again. Our inclusive design guide covers the rest of the accessibility basics.