Input Borders and Focus Rings Need 3:1 Too
WCAG 1.4.11 non-text contrast, with four common grey border colours tested on white.
By the TurantTools Dev team · Updated October 27, 2026 · 2 min read
WCAG 2.2 success criterion 1.4.11 asks for 3:1 contrast for the parts of a control people need to see: input borders, checkboxes, toggle states, focus indicators and meaningful icons. Pale grey borders are the most common failure.
Input border colours on white
| Border | Ratio | 3:1 for UI |
|---|---|---|
| #e5e7eb | 1.23 | Fail |
| #d1d5db | 1.47 | Fail |
| #9ca3af | 2.53 | Fail |
| #6b7280 | 4.83 | Pass |
- If the field also has a filled background that contrasts with the page, the border itself can be lighter.
- Focus rings need 3:1 against what's around them; a 2px ring in your text colour is a safe default.
- Disabled controls are exempt, but make sure they still look disabled, not invisible.