Home · Non-Text Contrast Checker
Non-Text Contrast Checker (WCAG 1.4.11)
The forgotten row of every contrast audit: borders, focus rings and icons need 3:1 against the adjacent colour — the colour actually touching them. This checker asks for all three colours in the stack and assumes none of them.
Why it matters: the same component colour can pass on one ground and fail on another — #777777 measures 4.48:1 against white but 2.79:1 against #CCCCCC. A checker that silently defaults the ground to white will pass the second case too. This one will not.
The three colours that touch
Non-text contrast is a three-colour question: the component (a border, a focus ring, an icon), the surface it sits on, and the page behind that. Change any one of them and the verdict can flip — which is why this checker asks for all three and never assumes the ground is white.
The focus indicator is the usual casualty
Text gets checked because text tools exist. The focus ring — the one element keyboard users cannot navigate without — is usually whatever the browser or the brand colour happens to produce, measured against nothing. On tinted surfaces and in dark themes it routinely lands under 2:1. Run your ring colour here against the field surface and the page behind it; the guide on focus-indicator contrast goes through the standard's wording, the exceptions, and the two-colour ring pattern that passes on any ground.
Non-text contrast questions
What exactly does WCAG 1.4.11 require?
That the visual presentation of user-interface components and meaningful graphics has a contrast ratio of at least 3:1 against adjacent colours: the boundaries of inputs and controls (so you can tell where the field is), focus indicators, selected states, and icons or chart elements that carry meaning. Pure decoration and disabled components are out of scope; a border you need in order to find the field is not decoration.
Why three colours? Other checkers ask for two.
Because the adjacent colour is a fact about your layout, not a constant. A focus ring crosses two grounds — the surface inside the control and the page outside it — and a border sits between a field and whatever surrounds the field. Checkers that ask for one ground are assuming it is white, and that assumption manufactures passes: #777777 measures 4.48:1 on white and 2.79:1 on a light-grey card. Same ring, different verdict. This checker makes you name all three colours so the assumption is yours, not hidden.
Does the 3:1 rule apply to my button?
To the parts of it that identify it: if the button is recognisable only by its filled boundary against the page, that boundary needs 3:1 against the page. If it is identified by its text label and position with a clear hit area, the text is judged as text (4.5:1) and the fill itself may not need the boundary check. The mock in the tool shows both readings at once — the border row and the boundary row — so you can see which judgement your design depends on.