Why this matters
Form fields, buttons, icons, and charts need sufficient contrast to be perceivable. A checkbox border that blends into the background is invisible to users with low vision.
Common failures
These are the most frequent ways this criterion is violated in real-world websites:
- Input borders with insufficient contrast against the background
- Icon-only buttons where the icon is low contrast
- Chart segments or graph lines that are indistinguishable
- Focus indicators that don't meet contrast requirements
- Custom checkboxes/radio buttons with faint borders
How to fix
- Ensure all interactive element borders have at least 3:1 contrast against their background
- Test icons and UI graphics with a contrast checker
- Use distinct patterns or labels in addition to color in charts
- Make focus indicators clearly visible with sufficient contrast
Related axe-core rules
xsbl uses axe-core to automatically detect violations of this criterion. The following rules are checked:
Check your site for 1.4.11 violations
xsbl scans your rendered pages in a real browser and finds violations of this criterion automatically.
Scan your site freeOfficial reference: Understanding WCAG 1.4.11: Non-text Contrast (W3C)