Contrast is a number: the WCAG ratios, and two common misses

The standard is WCAG 2.2, published by the W3C. At level AA, which is the usual target:

• Text needs a contrast ratio of at least 4.5:1 against its background (success criterion 1.4.3).
• Large text needs at least 3:1.
• The parts that identify a control, such as a button’s edge, need at least 3:1 against the colours next to them (1.4.11).
• Text inside a logo or brand name has no contrast requirement.

Any WCAG contrast checker computes the ratio from the two colour codes. You don’t have to guess.

Two common misses, worked through

Both come up on dark designs, in the quiet parts of a page. The ratios below are computed from the colour codes.

1. A muted label. A muted brown (#8a7a63) on a dark card (#262019) is 3.87:1, under the 4.5:1 line. One shade lighter, #97866c, is 4.56:1 and passes.
2. A button’s only edge. A secondary button with a transparent fill shows its shape only through its border. A border of #3a2f22 is 1.24:1 against that card and 1.42:1 against a #0e0b08 page, far under 3:1. A gold border (#C29B67) is 6.28:1 against the card and 7.19:1 against the page.

Muted labels and subtle borders are the parts to check first.

Spacing is in the standard too

WCAG 2.2 also covers text spacing (1.4.12). A page should still work when a reader sets line height to 1.5 times the font size, space after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. That is a test of whether your layout survives a reader’s settings, so check that boxes grow with the text instead of cutting it off.

How we check

• Compute the ratio for every text colour on every background it sits on, including hover and focus states.
• Check button borders, input borders and icons that carry meaning against 3:1.
• Write the ratio next to the colour in the stylesheet, with the date, so the next change is checked against it.