1.4 Distinguishable · Perceivable
WCAG 1.4.11 Non-text Contrast
Level AA
Visual information needed to identify UI components and states (icons, focus rings, input borders) and meaningful graphics must contrast 3:1 against adjacent colour.
Common failures
- Form input borders are pale grey (e.g. #ddd on #fff = 1.4:1).
- Focus rings have insufficient contrast against the background.
- Toggle states differ only by a low-contrast colour change.
How to fix
- Use ≥ 3:1 contrast for input borders and focus indicators.
- Verify each state (default/hover/focus/disabled) against its background.
Related criteria
- WCAG 1.4.3 Contrast (Minimum) Level AA
- WCAG 2.4.7 Focus Visible Level AA