Non-text Contrast

Success criterion 1.4.11 · Level AA

Non-text Contrast

User interface components and meaningful graphics have a contrast ratio of at least 3:1 against adjacent colors.

Principle 1: Perceivable · Guideline 1.4: Distinguishable

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!”