Colour Contrast as a Metric: The 4.5:1 Line Your Scanner Actually Enforces

A scanner flags a page for contrast, and the team argues about whether anyone can actually read the text. The argument is beside the point. The contrast ratio is a number, the threshold is 4.5 to 1 for normal text under WCAG 1.4.3, and the scanner measures the number, not the readability. The page either passes or it does not, and the debate does not change the ratio.

The ratio is the test, and the test is literal

WCAG 1.4.3, Contrast (Minimum), requires normal text to have a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. The ratio is computed from the relative luminance of the foreground and background colours, and the computation is exact. There is no judgement in it, no room for the designer to argue that the text is readable enough. The scanner runs the formula, and the number is the verdict.

The most common failure is grey text on a white background, usually at 3 to 1 or worse, used for secondary text, metadata, and form hints. The designer chose the grey because it looked subtle. The scanner flags it because it is unreadable to a user with low vision, and the WebAIM Million project keeps finding the same failure at the top of its list: low contrast is the most common detected WCAG failure on home pages, year after year, because grey on white is the most common design choice on the web.

The contrast pass rate post measures this across a site: the percentage of text elements that pass 4.5 to 1, and the percentage of pages with zero contrast failures. The two numbers are the metric, and they move together when the palette is fixed, because the palette is the cause.

Where the failures cluster

The failures cluster in four places. Placeholder text in form fields, which is grey by default in most browsers and most designs. Disabled buttons, which are greyed out by convention and fail the ratio by design. Footer text, which is set small and grey because the designer thinks nobody reads it. And error messages, which are red on white at a ratio that passes for the red the designer chose but fails for the red the browser renders. Each cluster has its own fix, and the fix is a colour, not a redesign.

Placeholder text is the worst of the four, because it fails twice: the contrast is too low, and the placeholder disappears when the user types, so the label is gone as well. The form label coverage metric is the same failure from the label side: the field has no name, and the placeholder was doing the job of the label, badly. Fix both at once: give the field a visible label, and stop using the placeholder as the label.

Disabled buttons are the cluster teams argue about most, because the grey is the convention that says disabled. The convention is the problem. A disabled button that cannot be read cannot be understood as disabled, and the user does not know whether the button is broken or unavailable. The fix is to keep the button readable and mark the state with text, not just colour. The empty links and buttons metric is the same class of failure: a control that exists visually and means nothing to the user who cannot see it clearly.

The fix order that moves the number fastest

Fix the palette first, not the pages. Find the grey the design system uses for secondary text, darken it until it passes 4.5 to 1 on white, and the fix propagates to every page that uses the token. One colour change, hundreds of pages fixed. That is the order that moves the number fastest, and it is the order most teams do last, because they fix pages one at a time instead of fixing the system.

Then fix the placeholders, the disabled buttons, and the footer, in that order, because that is the order of user impact. The placeholder is in the form the user is filling in. The disabled button is the action they cannot take. The footer is the text they read last. The error messages go with the placeholders, because they are the same form, and the same fix applies: darken the colour until the ratio passes, and stop relying on colour alone to carry the meaning.

Frequently asked questions

What contrast ratio does WCAG require?

WCAG 1.4.3 requires normal text to have a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. The ratio is computed from relative luminance, and the scanner measures the number, not the readability.

Where do contrast failures cluster on most sites?

In four places: placeholder text in form fields, disabled buttons, footer text, and error messages. Each has its own fix, and the fix is a colour, not a redesign.

Why is placeholder text a contrast problem?

It is grey by default, usually below 4.5 to 1, and it disappears when the user types, so the label is gone too. Give the field a visible label and stop using the placeholder as the label.

What is the fastest way to fix contrast across a site?

Fix the palette first. Darken the grey the design system uses for secondary text until it passes 4.5 to 1 on white, and the fix propagates to every page that uses the token. One colour change, hundreds of pages fixed.