Contrasting UI components: Passing the new standards
A guide to the new accessibility criteria for UI components.
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.
Example: Toggle
The toggle is a single control for a distinct function, it turns something on and off, therefore it’s considered a UI component.
The toggle above on the left fails because the contrast between the blue and the dark grey background is below the 3:1 contrast criteria.
The toggle on the right passes because the contrast between the blue and the dark grey background, as well as the contrast between the blue and the white circle, is above the 3:1 contrast criteria.
Example: Dismissable tooltip
According to the guidelines, the tooltip above is not considered a UI component because it’s not a single control with a distinct function.
However, the cross icon in the top right corner of the tooltip is considered a UI component because it’s a single control with the distinct function of dismissing the tooltip.
The cross icon requires a contrast ratio of at least 3:1 against its background.
The text requires a contrast ratio of at least 4.5:1 against its background.
2. Active UI components
Active components are components that are actionable – these must have a contrast ratio of at least 3:1 against adjacent colour(s)
A few actions include:
- Checking a checkbox
- Swiping a toggle
- Dismissing a warning
- Selecting a tab
- Typing into a text field
Example: Search field
The search field above is an active component because it’s actionable, (typing into the text field) it requires a contrast ratio of at least 3:1 against its background.
The example on the left fails because there isn’t enough contrast between the search field outline and its background. The text also fails because it falls below the text contrast ratio criteria of 4.5:1.
The example on the right passes because the search fields outline contrast is above 3:1 against the background and the text contrast is above 4.5:1.
3. Exempt UI components
Except: Inactive components or where the appearance of the component is determined by the user agent and not modified by the author
Inactive components are components that are not actionable — e.g. disabled buttons or disabled checkboxes — these do not need to meet the contrast criteria.
Components whose appearance is determined by the user agent and that are not modified by the author — e.g. a browser default dropdown or radio button — these do not need to meet the contrast criteria.
4. Context, content, and style
If a UI component can be identified from its context, content, or style, it doesn’t require extra contrasting visual indicators such as boundaries or outlines.
Example: A secondary button
The above button is identifiable from its position on the notification and the text on the button. Therefore the button itself isn't required to contrast against its background.
The button doesn’t require a contrast ratio of at least 3:1 against its background.
The text requires a contrast ratio of at least 4.5:1 against its background.
5. Transparent components
Not all components have a visible outline or boundary, this is fine, the standards don’t require them if the component is recognizable and clearly actionable without one.
Example: Transparent dropdown
The dropdown is recognizable from the chevron icon and therefore it doesn’t require a contrasting boundary.
The chevron icon requires a contrast ratio of at least 3:1 against its background.
The text requires a contrast ratio of at least 4.5:1 against its background.
6. Different states
The UI contrast standards apply to default, hover, active (selected), and focus states.
They do not apply to the disabled state.
Visuals used to indicate state — such as whether a component is selected or focused — must have a minimum of 3:1 contrast against its background.
Exception: The colour contrast between states are not required to meet contrast standards, e.g. the contrast between a default button and the same button on hover.
Example: Hover state
The default button and its hover state above both pass with contrast ratios of above 3:1 between the button and the background, along with the text contrasting above 4.5:1 with the button.
The contrast between the default button blue and the hover button blue does not need to meet contrast criteria.
Example: Focus state
All actionable components must have a focus state, and the indicators of the focus state must meet the 3:1 contrast ratio.
The above examples all pass because the focus state indicator (2px blue outline) contrast ratio is above 3:1 against its background.
Exception: If the appearance of the component is determined by the user agent such as a browser default dropdown or checkbox, the focus state doesn’t need to meet contrast standards.
7. Getting company buy-in
After understanding the guidelines the next challenge is to get company buy-in. How do you get the time prioritized to make the changes needed when teams are increasingly under pressure to deliver faster?
Here are a few tips:
Name-drop industry leaders
It’s becoming the norm for industry leaders such as Slack, IBM, and Atlassian to value and prioritize accessibility. Name dropping these industry leaders into any accessibility conversations will make it more desirable.
The competitive advantage
The Disability Discrimination Act (or equivalent) could help get company buy-in, in many countries it’s the law to pass these accessibility standards. If prospective customers are public sector organizations or big multinational companies it could be the reason they choose your product over your competitors.
Don’t wait for company buy-in
No one will ever tell you to stop making your product more accessible to more people, or to keep excluding possible customers. Gather a group of accessibility evangelists — meet up regularly — and get stuck in.
Recommended reading
Web Content Accessibility Guidelines (WCAG) 2.1: Non-text contrast
Component styling WCAG report from Google
Not creating accessible products is just rude, so don’t be rude
👍
Thanks to the WCAG community for your help and guidance with this article
👏
Please do share your feedback
