Success criterion 1.4.11
Non-text Contrast
User interface components and meaningful graphics have a contrast ratio of at least 3:1 against adjacent colors.
- Level AA
- Principle 1: Perceivable
- Guideline 1.4: Distinguishable
In a user’s words
“Is there a text box here? The border is so pale I've been typing into thin air.”
What each role can do
- Product manager
- Include controls, focus rings and chart graphics in contrast requirements, not only text.
- Designer
- Give input borders, icons, toggles and chart segments at least 3:1 contrast against their surroundings.
- Developer
- Define border, icon and state colors as tokens that meet 3:1, and check each state.
- Tester
- Measure contrast of control boundaries, states and essential graphics in light and dark themes.
Once it is fixed
“I can see where every field starts and ends. No more typing into the void!”
Share this with your team
The quotes are written to illustrate the criterion. They are not testimonials from real people. For the official wording, find 1.4.11 in the W3C quick reference for WCAG 2.2 (opens in a new tab).
Or press ←the left arrow and →the right arrow.