WebsightWhat it asks for, in plain English
The contrast rules for text (1.4.3) do not cover the rest of the interface, so this criterion does. The parts of a control that you need to see to find it and know its state, such as a text field's border, a checkbox's edge and its tick, a toggle's position, a focus ring, and an icon-only button, need at least 3 to 1 contrast against what is next to them.
The same ratio applies to graphics that carry information: the lines on a chart, the segments of a pie, the icon that means warning. It does not apply to disabled controls, to purely decorative parts, or to a part that is not needed to recognise the control, for example a faint border around a button whose text already makes it obviously a button.
Pale grey input borders on white are the most common failure on the web.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.11 page has the full intent, techniques and definitions.
Who it affects
Someone with low vision cannot see where the input box is, so clicks beside it and nothing happens.
A person with a colour vision deficiency cannot tell which switch is on and which is off when the only difference is a pale tint.
Anyone using a laptop in a bright room loses the faint focus ring and does not know which button they are about to press.
Example
The border is about 1.2 to 1 and the magnifier icon about 1.5 to 1 against white. Where does the box start?
Mid grey border, about 4.8 to 1, and a darker icon at about 7.6 to 1. Both clear the 3 to 1 bar with room to spare.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}label{display:block;margin-bottom:4px}input{padding:7px 8px;border:1px solid #e5e7eb;border-radius:4px;width:200px;vertical-align:middle}svg{vertical-align:middle;margin-left:6px}</style>
<label for="q">Search the catalogue</label>
<input id="q"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="2.5" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="M15 15l5 5"/></svg><style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}label{display:block;margin-bottom:4px}input{padding:7px 8px;border:1px solid #6b7280;border-radius:4px;width:200px;vertical-align:middle}svg{vertical-align:middle;margin-left:6px}</style>
<label for="q">Search the catalogue</label>
<input id="q"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2.5" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="M15 15l5 5"/></svg>How to check it
- Find the colour of every input border, checkbox edge, radio ring and icon-only button with the inspector, and check each against its background in a contrast checker. The bar is 3 to 1.
- Tab to a button or link and look at the focus ring. Check its colour against both the control and the page behind it.
- Look at charts and graphs: each line, bar or segment that carries meaning needs 3 to 1 against its neighbours or a visible edge.
- Check hover and checked states too; a tick drawn in pale blue on white often fails.
What Websight checks for 1.4.11
Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.
Websight's contrast check measures text only. It does not measure borders, icons, focus rings or chart colours, so those are on the manual checklist.
Practical tips
- Pick a single mid grey such as #767676 or darker for all input borders and you are done for most forms.
- Draw icons in the same colour as your body text.
- Give focus rings a two-tone outline (dark ring with a white gap) so they work on any background.
Other criteria in guideline 1.4, Distinguishable
- 1.4.1 Use of Color (level A)
- 1.4.2 Audio Control (level A)
- 1.4.3 Contrast (Minimum) (level AA)
- 1.4.4 Resize Text (level AA)
- 1.4.5 Images of Text (level AA)
- 1.4.10 Reflow (level AA)
- 1.4.12 Text Spacing (level AA)
- 1.4.13 Content on Hover or Focus (level AA)