Ensure that people can visually identify the boundaries of the clickable or tappable area of a component. For example, a user should be able to tell where an input field or a button begins and ends.
Ensure that people can visually identify anything that helps the user understand the content of the page. For example, the divider between breadcrumbs is meaningful because it helps the user identify the breakpoint between the breadcrumbs, and in many cases indicates hierarchy.
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.
Similarly, if important visual cues like the dividers in breadcrumbs are too light for the user to see, the user’s risk of not understanding what they’re looking at goes up significantly.
How to implement
Read Using color, specifically the section on UI Components.
Ensure you implement the colors provided by the Designer.
How to test
- Inspect the element being tested using the browser’s developer tools.
- Inspect the background behind the element using the browser’s developer tools.
- Compare the hex color of the element being tested to the hex color of the background using one of the contrast checkers on List of Contrast Checkers. The contrast ratio should be 3:1 or higher.