Contrast checker
Pick a text colour and a background, and the contrast ratio is measured against the WCAG requirements.
Contrast ratio
16.69:1
The scale runs from 1:1 for two identical colours to 21:1 for black on white.
How it looks
Heading in large text
Body text at this size is what puts the most demand on contrast, because the letterforms are thin.
WCAG requirements
- Body text, AAUnder 18 point, or under 14 point bold · 4.5:1Passes
- Body text, AAAUnder 18 point, or under 14 point bold · 7:1Passes
- Large text, AAFrom 18 point, or 14 point bold · 3:1Passes
- Large text, AAAFrom 18 point, or 14 point bold · 4.5:1Passes
- Interface and graphics, AABorders, icons and anything that carries meaning · 3:1Passes
How it works
The contrast ratio measures the difference in relative luminance between two colours. It runs from 1:1, two identical colours, to 21:1, black on white.
WCAG requires at least 4.5:1 for body text at level AA, and 7:1 at level AAA. For large text – 18 point, or 14 point bold – 3:1 and 4.5:1 are enough.
Interface components and meaningful graphics need 3:1 against their surroundings. That covers the border of an input field and icons with no text beside them.
The ratio is computed from luminance, not from how different the colours look. Two colours of the same lightness but wholly different hue, such as red (#ff0000) and green (#009400), give a ratio of 1.00 and are unreadable despite looking different.
The requirements are a floor, not a target. Text sitting exactly at 4.5:1 is still hard work in sunlight or on a cheap screen.
How the tool calculates
Each channel is divided by 255 and made linear: values up to 0.04045 are divided by 12.92, and larger values v become ((v + 0.055) / 1.055) to the power 2.4. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter colour as L1. The threshold 0.04045 has stood in WCAG since May 2021; before that it was 0.03928, and the W3C says the change has no practical effect. For hex colours it makes no difference at all, since no channel value falls between the two: 10/255 is 0.0392 and 11/255 is 0.0431.
Worked example
#767676 on white: the channel 118/255 = 0.463 becomes 0.181 once linearised, and since all three channels are equal, the luminance is 0.181 too. The ratio is (1 + 0.05) / (0.181 + 0.05) = 4.54, which passes AA for body text. One step lighter, #777777 gives 4.478 and fails. The lightest grey that passes AAA, 7:1, on white is #595959 at 7.0047; the next step, #5a5a5a, gives 6.897.
No rounding
The W3C’s explanation of success criterion 1.4.3 says the ratio should not be rounded: 4.499:1 does not meet 4.5:1. The tool judges on the unrounded value and cuts the figure off rather than rounding it. #0080aa on white gives 4.4986 and fails for body text. Rounded, it would read 4.50 beside a fail, so the tool shows 4.49:1, and #777777 is shown as 4.47:1.
Large text and thin fonts
The threshold for large text is set in points. With 1pt = 1.333 CSS pixels, 18 points is about 24 pixels and 14 points about 18.5 pixels, according to the same explanation. It also warns that thin fonts may be rendered fainter than their colour because of anti-aliasing, so text that meets the ratio can still have low contrast in practice. The tool works only with solid hex colours, with no transparency and no image behind.