Skip to main content

Contrast Ratio

WCAG guidelines specify minimum contrast ratios for content. This contrast ratio is beneficial to everyone reading your content, but is also incredibly valuable for those with colour blindness or other visual impairments.

It is good to have a cool design on your website, but the design is worthless if your users canโ€™t read your content.1


  • In Appleโ€™s iMessage, green messages (regular SMS/MMS) have a lower contrast ratio than blue messages (through iMessage) (source) (HN)

Contrast Ratiosโ€‹

Sourced from MDN, licened under CC-BY-SA 2.5

Type of contentMinimum ratio for AA ratingMinimum ratio for AAA rating
Body text4.5 : 17 : 1
Large-scale text (120-150% larger than body text)3 : 14.5 : 1
Active user interface components and graphics3 : 1Not defined

Calculating Contrast Ratioโ€‹

Contrast is calculated by looking at the relative luminance values (L1L1 and L2L2) of the two colours. (L1+0.05)/(L2+0.05)(L1 + 0.05) / (L2 + 0.05) is the equation.

Because luminance is the sole factor looked at, the tone has no bearing on the contrast ratio2.

For example, take #FFFFFF and #323286. #FFFFFF has a luminance value of 1.0, and #323286 has a luminance value of 0.046, which roughly works out to a contrast ratio of 10.8, passing all WCAG contrast ratio checks.

Example code from the WebAIM contrast checker is as follows:

function getL(c) {
// I don't know where these magic numbers come from
return (
0.2126 * getsRGB(c.substr(1, 2)) +
0.7152 * getsRGB(c.substr(3, 2)) +
0.0722 * getsRGB(c.substr(-2))
var L1 = getL(f),
L2 = getL(b),
ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);

Resourcesโ€‹ 2: