How to use the Color Contrast
- Enter the foreground (text) colour as a hex value.
- Enter the background colour behind it.
- Read the ratio and the AA and AAA verdicts for normal and large text.
- Re-check any colour pair you use over an image or gradient at its lightest point.
How the calculation works
Each channel is converted from sRGB to linear light, weighted by the eye's sensitivity — 0.2126 red, 0.7152 green, 0.0722 blue — to give relative luminance. The ratio is then (L_lighter + 0.05) / (L_darker + 0.05), producing a value from 1:1 for identical colours to 21:1 for black on white. The 0.05 offsets model ambient screen reflection.
WCAG 2.1 requires at least 4.5:1 for normal body text and 3:1 for large text, defined as 18.66px bold or 24px regular, at level AA; level AAA raises those to 7:1 and 4.5:1. Non-text elements such as input borders and icons need 3:1. The green weighting means two colours of similar perceived brightness can fail badly even when they look distinct, which is why pale grey on white is such a common failure.
Ratio = (L₁ + 0.05) / (L₂ + 0.05), where L = 0.2126R + 0.7152G + 0.0722B on linearised sRGB channelsSource: W3C WCAG 2.1 success criteria 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced).
Worked example
Body text in #767676 on a white #FFFFFF background, and the same text at #949494.
- White has relative luminance 1.0.
- #767676 linearises to a luminance of about 0.1845, giving (1.05) / (0.2345) = 4.48.
- #949494 gives about 0.2874, so (1.05) / (0.3374) = 3.11.
#767676 at 4.48:1 narrowly fails AA for body text; #949494 at 3.11:1 fails clearly and passes only for large text.
Frequently asked questions
What ratio do I need to pass?+
4.5:1 for normal text and 3:1 for large text at AA, rising to 7:1 and 4.5:1 at AAA. Interface components and meaningful graphics need at least 3:1.
What counts as large text?+
At least 24px regular or 18.66px bold — roughly 18pt and 14pt bold. Below that the stricter normal-text threshold applies.
How do I check text over an image?+
Test against the lightest and darkest areas the text can sit over, and if either fails, add a solid or gradient scrim behind the text rather than relying on the image.
Does passing contrast make my site accessible?+
No, it satisfies one criterion. Keyboard navigation, focus visibility, accessible names, heading structure and not relying on colour alone all matter equally.
Last reviewed August 31, 2026. We review this page whenever the underlying formula, tax year, published rate or standard changes.