Colour contrast checker

How it works

WCAG defines contrast from relative luminance. Each channel of a hex colour is converted from sRGB to a linear value, where a channel c is c/12.92 below 0.03928 and ((c + 0.055) / 1.055)^2.4 above it. The luminance of the colour is 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue. The ratio is then (lighter + 0.05) divided by (darker + 0.05), which ranges from 1:1 for identical colours to 21:1 for black on white. AA needs 4.5 for normal text and 3 for large text; AAA needs 7 and 4.5. Large text means at least 24 pixels, or 18.66 pixels when bold. Enter hex as #rgb or #rrggbb, with or without the hash.

Worked example

Grey #777777 on white #ffffff gives luminance 0.1845 for the grey and 1.0000 for white, so the ratio is (1.0000 + 0.05) divided by (0.1845 + 0.05) = 4.48 to 1. That passes AA for large text at 3:1 but misses the 4.5 requirement for normal text — which is why #777 body copy on white fails an audit.

Questions and answers