Level AAWCAG 2.2
1.4.11 Non-text Contrast
User interface components and graphical objects have a contrast ratio of at least 3:1.
Why it matters
Low vision
Users cannot operate non-text UI elements like borders or icons if they cannot see them.
Color vision differences
UI distinguished only by color affects millions of users with color vision differences. Shape and luminance are needed.
Environmental conditions
Outdoors or in bright places, low-contrast borders and icons effectively disappear.
Charts and graphs
Lines, points, and areas in data visualizations also need at least 3:1 contrast.
Live demo
Contrast for UI components
Non-text UI parts such as form controls and icons also need sufficient contrast.
Choose an option
I agree to the terms
Email updates
Turn notifications on
Action icons
Search
Settings
Favorite
About 1.5:1 — the boundaries of UI elements are hard to see
Understand through a persona
Nakamura (55) — Mild cataracts
She cannot tell where the form input fields are. Faint gray borders blend into the background, so she can't see where to click. She also can't tell whether a checkbox is checked.