This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Accessibility
What contrast do buttons and input fields need on websites?
Buttons, input fields, and meaningful graphics need a contrast ratio of at least 3:1 against their surroundings. This threshold comes from the WCAG standard. It ensures that a visitor with impaired vision can recognise where to click and where to type — a white input field with a light grey outline on a white background is practically invisible.
Control elements must stand out
While the well-known contrast rule concerns text, this one is about everything else visible that carries a function: the outline of an input field, the area of a button, the magnifying-glass icon for search, the checkmark in a checkbox. Modern, very minimal design is the most common trap here — light grey field outlines on a white background look elegant, but often sit far below 3:1. A visitor with declining eyesight then sees a form with no recognisable fields: they don't know where to place the cursor. Icons with no text label — such as the hamburger menu — must also stand out from the background by at least 3:1, otherwise the navigation doesn't exist for them.
How our measurement engine measures the contrast of control elements
Our measurement engine selects a sample of the control elements on your page — input fields, buttons, styled link buttons — and photographs each one together with its surroundings in the browser. From the pixels, it calculates the brightness of the border, fill, and surroundings, and derives the real contrast ratio of the element's edge from that. If measured edges fall below 3:1, the report deliberately reports that as a documented check case rather than an immediate violation: a field that looks too weak can be visually carried by a surrounding container — that's judged at the Gold Standard level by a human, using the supplied screenshot. The criterion counts as passed only with a sufficiently large, entirely unremarkable sample; purely graphical objects such as charts remain a matter for human review.
- Check your forms: every input field needs an outline or fill that clearly stands out from the background.
- Ask your agency to check the field outline colours against the 3:1 threshold and darken them where needed.
- Check icons with no text — search, menu, cart — for sufficient contrast against the background.
- Pay attention to states too: the marking of a selected tab or an active checkbox also needs 3:1.
- Look at your forms from two metres away — if the fields visually disappear, the contrast is too weak.
FAQ
How does this rule differ from the text contrast rule?
The text contrast rule requires 4.5:1 for normal text. This rule covers everything visible other than text that carries a function or information: field outlines, button areas, icons, chart lines. The milder threshold of 3:1 applies here — graphical shapes stay recognisable even with somewhat weaker contrast.
Why are light grey input fields a problem?
Because their outline on a white background is often far below the required ratio of 3:1. A visitor with declining eyesight then can't tell where the field begins and ends — the form looks empty to them. A slightly darker outline solves the problem without noticeably changing the design.
How does the audit service measure the contrast of buttons?
The measurement engine photographs a sample of the control elements in the browser and calculates the brightness of the border, fill, and surroundings from the pixels. Measured edges below 3:1 are reported as a documented check case with a screenshot; the final judgment is made by a human at the Gold Standard level, since surrounding design can visually carry an element.