While text contrast has long had accessibility guidelines, now User Interface (UI) components have their own contrast guidelines to follow.

This makes perfect sense.

If it’s important for text to have enough contrast to ensure people with poor eyesight can read it, then this should also apply to UI components. If you can’t see and identify UI components you won’t be able to click, highlight, swipe, or press them.

The guideline

The visual presentation of User Interface Components have a contrast ratio of at least 3:1 against adjacent colour(s)

The intent

Active user interface components (i.e., controls) are distinguishable by people with moderately low vision

The guideline sounds easy to follow – to meet the 3:1 contrast ratio criteria simply lighten or darken colours until the UI component contrasts enough against its background — could it really be that simple?

Contents

What is a UI component? Active UI components Exempt UI components Context, content, and style Transparent components Different states Getting company buy-in

1. What is a UI component?

User interface component: A part of the content that is perceived by users as a single control for a distinct function

The guidelines definition of a UI component is different from most people’s understanding. This is telling if you look at the list of components in any design system — most of which according to the guidelines wouldn’t be defined as a UI component.

To make the guidelines easier to understand instead of thinking UI components it helps to think single controls or UI elements.