Colour Contrast Ratio Calculator (WCAG)

This tool measures the contrast between a text colour and its background, using the definition given in the Web Content Accessibility Guidelines.

Here $Y_1$ is the relative luminance of the lighter colour, $Y_2$ that of the darker and $C$ the contrast ratio. The 0.05 allows for the fact that a screen cannot produce a true black and always reflects a little ambient light; without it, black against black would give an infinite ratio.

Relative luminance

Here $R_l$, $G_l$ and $B_l$ are the channels converted back to values proportional to the light emitted. Screen colours are encoded to suit the eye rather than the physics, and that encoding has to be undone before brightnesses can be compared.

The levels

The ratio runs from 1, for two identical colours, to 21, for black against white.

• AA asks for 4.5 on body text and 3 on large text
• AAA asks for 7 on body text and 4.5 on large text

Large text means 18 point or above, or 14 point and bold.

Worked example

Grey text at (90, 90, 90) on a white background gives a contrast ratio of 6.90, which meets AA.

The text has a relative luminance of 0.102 and the background 1, so (1 + 0.05) ÷ (0.102 + 0.05) = 6.90. That falls just short of 7, so AAA is not met.

Points to watch

Contrast is not the whole of readability. Size, weight and the typeface itself all bear on it.

Never carry meaning by colour alone: it does not reach readers who cannot separate the colours in question.