What a Contrast Ratio Actually Means

Every accessibility checklist says text needs a contrast ratio of 4.5:1. Fewer explain what that number measures, or why a colour that looks strong can still fail it.

What the ratio measures

A contrast ratio compares how much light two colours give off, which is called their relative luminance. It runs from 1:1, two identical colours, to 21:1, black on white. The higher the number, the easier text is to read on a dim screen, in bright sunlight, or with low vision.

Hue plays no part in it. Pure red on pure green looks loud, but the pair measures only 2.9:1, because the two colours are close in lightness. Contrast is about light and dark, not about how different two colours look.

The numbers that apply

WCAG 2.2 is the standard in force today. Its AA level is the one most accessibility laws and policies refer to, and it asks for:

• 4.5:1 for body text
• 3:1 for large text, meaning at least 24px, or about 18.7px when bold
• 3:1 for buttons, input borders, icons and other interface parts, measured against whatever sits next to them

The stricter AAA level asks for 7:1 on body text. Logos and disabled controls are exempt. WCAG 3 will score contrast differently when it arrives, but these are the numbers that apply until then.

A colour that looks bold and still fails

My own brand colour is a good example. Kusiima terracotta, #C65D3B, measures 4.2:1 against white. That's fine for a large heading and not enough for a link in a paragraph. So the site switches to a deeper shade, #A3452A at 6.1:1, whenever terracotta text is body-sized. Most readers wouldn't notice the change, but they can read the text more easily.

Check while you're choosing

Contrast is easiest to fix before a colour ends up in forty places. The Color Wheel checks every swatch against WCAG 2.2 as you build a palette, and shows a grid of every pairing so you can see at a glance which combinations work for text.