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

Goals

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.

1.4.11 Non-Text Contrast – Level AA doesn’t require a visual boundary on things like buttons, 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.

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

Designer

Read Using color, specifically the section on UI Components.

Developer

Ensure you implement the colors provided by the Designer.

How to test

If either the element being tested or the background color is using opacity, you’ll need a way to figure out what the actual hex codes are with the opacity in effect. Sampling with a third-party application is usually faster than finding two or three calculators to string together for valid results.

1. Inspect the element being tested using the browser’s developer tools.
2. Inspect the background behind the element using the browser’s developer tools.
3. 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.