SC 1.4.11: Non-text Contrast
Normative Text
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author; Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Understanding 1.4.11
The visual boundaries of form fields, buttons, checkboxes, and graphical elements used to understand content must have 3:1 contrast against adjacent colors.
How to Comply
The component boundary itself must contrast with the adjacent background. A white button on a white background fails even if the button text is black. A text input with a light grey border on a white background may fail. Check: the border/outline/indicator color vs. the background behind it — not the text color. Also applies to graph axes, chart data markers, and icons. States like hover and focus must also meet 3:1.
Common Failures
- ✕Light grey input field borders (#ccc) on white backgrounds — ratio is ~1.6:1
- ✕Ghost/outline buttons with thin low-contrast borders
- ✕Checkbox or radio button custom styles with insufficient border contrast
- ✕Chart data points that are the same color as their background
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.1.4.11.
- ★Backward compatible with WCAG 2.1: Yes.
Mandatory Under
Testing with Contrast Checker / Browser DevTools
- 1.
Identify all interactive UI components: buttons, checkboxes, radio buttons, text inputs, sliders, tabs.
- 2.
Check the contrast ratio of the visual boundary of each component against its adjacent background.
- 3.
Required: at least 3:1 contrast ratio for the component boundary in its default state.
- 4.
Check all states: default, hover, focus, checked, disabled (disabled is exempt).
- 5.
Also check graphical elements required to understand content: chart axes, icon outlines, graph data points.
- 6.
Use the browser Eyedropper to sample exact colors from the rendered page.
- 7.
Pass: All non-exempt UI component visual boundaries meet 3:1 contrast ratio.