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.
Examples
Entry field with pale frame
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Frames, symbols and focal frames need 3:1 to the background, otherwise the field is not recognizable as a field.
- 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.
