A Colour and Contrast Audit Measures Rather Than Eyeballs

What We Keep Finding

Low contrast text is the single most commonly detected accessibility failure on the web, found on more than four in five home pages, and it fails invisibly to the people choosing the colors. The designer with sharp vision on a bright monitor sees elegant gray on white. The formula sees 2.8 against a bar of 4.5. Worth being precise about that figure though, since it measures what machines detect rather than what hurts most, and machines detect contrast better than they detect almost anything else.

Two thresholds do most of the work and people mix them up. Body text needs 4.5 to 1. Large text and non-text things like icons, borders and focus rings need 3 to 1. Large text means 18 point, or 14 point bold, which is roughly 24 pixels or 18.5. And a trap worth knowing about. Zooming does not turn body text into large text, because the rule fixes the size at the size you delivered, so the friendlier bar never arrives just because somebody made the page bigger.

Colour as meaning rides along, and it is really two rules rather than one. Colour alone carrying information is the famous one. Position alone doing it is a different rule, so a chart legend distinguished only by the order of the entries fails a different thing from a chart distinguished only by hue. And that second rule bans sole reliance rather than the cue itself, which means "the green Submit button on the right" is fine and "the green button on the right" is not. Roughly one man in twelve of Northern European descent cannot rely on red against green, and neither rule asks anyone to.

The exceptions are where we save clients the most money, because a finding you cannot be held to still costs a sprint. A disabled control has no contrast requirement at all, at either threshold, so we will not raise your greyed-out buttons. A logo has no contrast requirement either, so nobody should be measuring your wordmark. The interface rule does not require a control to have a visible boundary in the first place. And a chart that carries its values as visible labels, or sits above a table with the same numbers, is outside the 3 to 1 graphical requirement altogether. Though the moment you add those labels they become text and owe 4.5. Placeholder text, on the other hand, is not excepted by anything and stays a real finding.

One thing no scanner catches and it is the half your report is missing. A scan looks at one page state, so hover, focus, and error variants are never seen by any of them. Those are the forgotten ones because nothing automated has ever looked.