Non-text Contrast

Why it matters

Interfaces are built out of edges, meaning where a field begins, which toggle is on, and where the keyboard currently is. Fade those below 3:1 and the whole interface dissolves into a fog of near-white rectangles. Minimal design fails here more than any other style choice, because the version that photographs beautifully in a portfolio can be the one a real user cannot operate. The exceptions run more generously than most designers expect, which is worth knowing before you start adding borders to everything. Subtle hover styling is safe. The pointer's own position is what identifies the hover, so the effect underneath it is supplemental and owes nothing.

Who this rule protects

Low-vision users lose pale form fields altogether, and a field they cannot find is a form they cannot fill. Older users hit the same edge, since contrast sensitivity falls with age. Keyboard users need to see where focus has landed, which is the same measurement applied to a different thing. Anyone on a dim or reflective screen runs your whole interface at lower effective contrast than you designed it for.

How to check it yourself

1. 1For each control, ask what tells you it is there, then measure that against the colors beside it. Where the answer is visible text, the border is not the thing being measured.
2. 2Measure form field borders against the page background where the border is what identifies the input. Where a background fill does that job instead, measure the fill.
3. 3Measure the focus indicator. Where it sits outside the component, measure it against the page. Where it sits inside, measure it against the component. Where it straddles the edge, either half passing is enough.
4. 4Leave the browser's own focus ring alone. An unstyled default is exempt, and the moment you restyle it you own the 3:1.
5. 5Check the state indicators, meaning the check inside a checkbox, the dot in a radio button, the arrow saying a menu is open. Each has to contrast with what is next to it. The two states do not have to contrast with each other, because they are never on screen together.
6. 6Measure meaningful icons, including the arrow on a select, which is the thing telling you the control opens.
7. 7For a complex graphic, take the least contrasting part, assume it is invisible, and ask whether the graphic still makes sense. If it does, it passes.
8. 8Skip graphics where the particular presentation is essential. A screenshot showing how a page really looked, a heat map whose gradient is the measurement, and a medical diagram using the colors found in biology are all outside the rule.

Failures we see most often

• Input borders set at #DDD on white measure 1.36:1, so the fields are only findable by guessing where the label points.
• Setting outline to none removes the browser's focus ring and nothing replaces it, which fails this rule and 2.4.7 Focus Visible at the same time.
• A custom focus ring is drawn in a pale gray, so keyboard users have a focus position they cannot locate.
• A focus ring sits just outside the component in a color that contrasts with the component and not with the page behind it.
• A toggle's on state is a pale fill inside a pale component, so nothing identifies the state against its own surroundings.
• A custom link underline is drawn in a decorative color below 3:1, when that underline is the only thing marking the link.
• A pie chart's slices differ only by colors that do not contrast with each other, and no labels are printed on it.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Low visionpeople who can see the screen but not easily
• Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely

How to fix it

• Darken borders to at least #949494 on a white background, which is the lightest neutral gray clearing 3:1. Or identify the field with a background fill that does the job instead.
• Build the focus indicator in two colors, an inner and an outer, so one of them always contrasts wherever the control sits. A single-color ring will always meet a background it disappears against.
• Give each state an indicator that contrasts with its own surroundings, and add a second cue such as a checkmark so the state survives grayscale too.
• Label your charts. A pie chart carrying visible labels and values does not need its slices to contrast, because the labels now carry what the colors were carrying.
• Leave the default focus ring in place unless you are prepared to measure the replacement.
• Do not add borders you do not need. A text button does not require one, and adding them everywhere is a cost with no conformance benefit. It still helps people who find controls hard to recognize, so make it a design decision rather than a compliance one.

Passes vs. fails