Contrast Failure Rate by Template, Not by Page

2026-10-29

Every accessibility dashboard has a contrast number that is technically true and practically useless. Ninety something percent pass, site wide, while the one red sale badge at 2.9 to 1 sits on a third of the catalogue doing its quiet damage.

Contrast failures are component failures wearing page costumes. Count them where they are born.

Band the ratios, do not just pass or fail them

Record each failure in a band: under 3 to 1, 3 to 4.49 to 1, and, for large text only, the separate 3 to 1 line. The bands tell you the repair cost at a glance. A 4.3 to 1 body grey is a token change. A 2.4 to 1 brand colour on white is a design argument, and you should know which one you are scheduling before the meeting.

Keep large text honest: 24 pixels, or about 18.66 pixels bold, qualifies as large under WCAG. Teams routinely claim the large text line for 16 pixel bold labels. That claim will not survive an outside audit, so do not let it survive your own.

The usual suspects, in order

Placeholder text is first, styled pale by convention and treated as decorative by designers, while shoppers are expected to read it as instruction. Sale and badge colours are second, brand reds and oranges that were never tested against white at small sizes. Third is text over photography, which passes on the test image someone chose carefully and fails on a third of the images the catalogue actually uses.

Grey body text on off white backgrounds deserves its own mention because it is a brand decision disguised as a default. Measure it once, at the exact token values, and settle it as a design system question rather than rediscovering it page by page forever.

Weight by traffic or the metric lies politely

An unweighted failure rate treats a legal page nobody visits and a product page with 50,000 monthly sessions as equals. Report both numbers: raw rate for completeness, traffic weighted rate for priority. The weighted number is the one that reflects user harm and, frankly, legal exposure, since filings follow traffic.

Reweight quarterly. A seasonal sale template can move from trivial to dominant in November, and a metric frozen in spring will confidently misrank your worst problem all winter.

Fix the token, verify the family

The durable repair is at design token level: change the colour value or its approved pairings in the system, then remeasure every template that consumes the token. Patching individual pages guarantees the next page built from the old token reintroduces the failure, silently, at launch.

After a token fix, sample the highest traffic pages in each affected template family and record the new rate with the date and the token version. Contrast metrics without version notes cannot be compared across quarters without an argument about what changed.

Frequently asked questions

What contrast ratio does WCAG AA require?

Criterion 1.4.3 requires 4.5 to 1 for normal text and 3 to 1 for large text, defined as at least 24 pixels, or roughly 18.66 pixels if bold. Incidental text and logotypes are exempt, but ordinary interface text is not.

Why count contrast failures by template?

Because most failures come from shared components and colour tokens reused across many pages. Counting by template turns a thousand page failures into the handful of component fixes that actually resolve them, and stops repeat failures at the source.

Does placeholder text need to meet contrast ratios?

If the placeholder carries information the user needs, treat it as text that must be readable. Many placeholders fail badly. The safer design is a persistent visible label, with the placeholder as a short example rather than the only instruction.

What is traffic weighting in this metric?

Weighting each template's failure rate by its share of sessions or page views. It prioritises failures by how many users actually meet them, rather than treating a rarely visited page as equal to a top product page.