1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 1.4.11 Non-Text Contrast – Level...
  6. :
  7. Do all clickable components have...

Do all clickable components have a contrast ratio of at least 3:1 against their background?

Goal

Ensure that people can visually identify the boundaries of the clickable or tappable area of a component.

Note!
1.4.11 Non-Text Contrast – Level AA doesn’t require a visual boundary, but if a visual boundary is the only way to identify the component, it has to match the color contrast. Honestly, this one’s a bit fiddly.

Why this matters

Trying to click a component when you can’t tell where the edges are is frustrating and wastes everyone’s time. It’s doubly bad when you’re already working with a disability in place.

How to implement

Designer

Read Using color, specifically the section on UI Components.

Developer

Ensure you implement the colors provided by the Designer.

How to test

TBD