Contrast Checker

The background sets a ceiling

The ratio depends on both colours, and the background is the half that decides how much room there is. For any background there are exactly two extreme foregrounds — black and white — and each has a fixed best case against it. If neither reaches the threshold you need, no third colour will either, because everything else sits between them.

best possible ratio against a background of luminance L:

        against pure black   (L + 0.05) / 0.05   = 20L + 1
        against pure white   1.05 / (L + 0.05)

        L = 0.18, a mid grey near #767676:
          against black   4.6:1   just clears AA, with nothing to spare
          against white   4.6:1   the same, by symmetry

        L = 0.35, a light panel:
          against black   8.0:1   comfortable
          against white   2.6:1   fails for anything

That first row is the trap. There is a band of mid-tone backgrounds on which nothing reaches a comfortable ratio, because black and white are the best you can do and both land near the floor. A page built on a mid-grey panel can pass an audit with pure black text and still be tiring to read, and no amount of fiddling with the text colour will improve it — the panel is the thing that has to move.

Half the rule is about things that are not text

WCAG 1.4.11 applies the 3:1 threshold to the parts of an interface a person needs in order to operate it: the border of an input, the ring that appears when something is focused, the on and off states of a toggle, the outline of an icon button, the segments of a chart. It is a requirement rather than a polish item, and the failure mode is not aesthetic. An input whose border is invisible against the panel behind it is an input that some people cannot find. A focus ring that disappears on a dark background is a keyboard user who has lost their place on the page.

These are also the measurements most often skipped, because a designer checking a page will check the type. A form on a white card with a pale grey border at 1.4:1 looks tidy in a mockup and is unusable to anyone who does not already know where the fields are. The same applies to the checked and unchecked states of a control: a toggle that differs only in the position of a knob is a toggle that has to be looked at closely to be read at all.

Colour alone is not a signal

A separate criterion says that colour must not be the only way information is conveyed, and contrast ratios do nothing to satisfy it. A link inside a paragraph that differs from the surrounding text only by hue fails it, even when the pair measures 8:1 — because the reader who cannot distinguish those two hues has no way to tell that the words are a link. The rule that comes out of it is the familiar one: an underline, or a weight change, or some other difference that survives being seen in greyscale.

The same thinking covers the states of a form. A field whose only indication of an error is a red border is a field that says nothing to a reader who cannot see the red, so the message beside it is doing the work and the colour is a reinforcement. Charts run into it constantly: four segments distinguished by four hues, two of which are similar at small sizes, and no labels. The answer is never a fifth colour.

What the number cannot see

A ratio measures two colours. It does not know how large the type is, how heavy the face is, how much letter spacing it carries, or who is reading it. A light-weight grotesque at a small size sheds contrast as its thin stems blend into the background, and it needs noticeably more than the floor to read as comfortably as a heavier face at the same size. Where a face is light, where the text is small, or where the audience is likely to include people reading on a phone in daylight, treat a higher figure as the working target and the published minimum as the emergency exit.

That is also the honest limit of the checklist. A page can clear every threshold in the table and still be hard to read, because the criteria are floors agreed between organisations rather than descriptions of good typography. Passing them is the point at which the argument stops, not the point at which the work is finished. Where a whole family of colours has to clear the thresholds together, the Palette Generator starts from a set of ramps that already do.