Contrast of user interface components

Make sure graphical and interactive components have sufficient contrast.

Overview

What you need to do

Make sure all user interface components have a contrast ratio of at least 3:1 against adjacent colours. This includes buttons, form fields, icons, and other interactive elements. Focus indicators and state changes must also meet contrast requirements so users can identify what’s selected or active.

Meeting the Web Accessibility Standard

When meaningful graphical objects, the important visual aspects of user interface components, and their states meet minimum contrast requirements, this meets WCAG 2 Success Criterion 1.4.11 Non-text Contrast (Level AA).

Why this matters

Poor contrast makes interface elements invisible or difficult to see for users with low vision, colour blindness, or anyone using devices in bright sunlight. When buttons, form fields, or element states lack sufficient contrast, users cannot tell what’s interactive or where they are in the interface.

When this applies

When you need sufficient contrast

Interactive elements: Buttons, links, form controls, switches
Focus indicators: Highlighting focused elements for keyboard users
State changes: Selected items, active tabs, pressed buttons
Iconography: Icons that convey information or functionality
Borders and dividers: Visual separators that define interface areas

When contrast requirements are more flexible

Inactive elements: Disabled buttons or controls (though should still be perceivable)
Decorative elements: Graphics that don’t convey essential information
Logos and branding: Though should aim for good contrast when possible

When to exceed minimum requirements

Critical functions: Emergency features, accessibility controls
Outdoor usage: Apps likely used in bright sunlight
Older users: When targeting users who may have age-related vision changes

Design

Note: Both Android and iOS devices have platform-level focus indicator settings for screen reading. iOS devices also have platform-level focus indicator settings for keyboard. The user can choose from a set of colours and make the focus indicator bolder or have higher contrast.

Review your design system to make sure elements work with these user options, without needing the user to switch settings midway. Users want to set up their focus options once and use them system-wide.

For example, a blue button with a blue focus indicator will not have sufficient contrast, but it may work with a different focus configuration.

Checklist for accessible UI contrast

Develop a component library where elements have sufficient contrast.
Test all interactive and meaningful graphical elements for minimum 3:1 contrast:
- focus indicators
- icons
- buttons and their states (normal, pressed, focussed)
- form fields.
Check contrast in both light and dark modes.

Design resources

For guidance on colour contrast for graphical or interactive elements, read Contrast for non-text content — Knowledge Area: Colour and contrast.

See also the design guidance on accessible UI contrast for each platform:

Development

Here are the key techniques and code examples for implementing accessible orientation support in mobile apps.

iOS implementation

For technical documentation on accessible non-text contrast, read:

For complete guides on iOS accessibility from Apple Developer Documentation, read:

Android implementation

For technical documentation on accessible non-text contrast, read:

For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.

Testing

Quick test

These quick steps will help you verify that graphical and interactive elements have sufficient contrast.

Take screenshots of your app in both light and dark modes
Use contrast checking tools — measure contrast ratios of foreground against background colours
Test in bright sunlight or simulate with high device brightness
Enable high contrast mode in accessibility settings
Test with colour filters enabled (simulate colour blindness)
Check focus indicators — are focus indicators clearly visible when navigating?
Verify state changes — can you identify when elements are selected or pressed?

Automated testing

Check for colour contrast issues with the platform accessibility testing tools:

iOS — Accessibillity Inspector — Apple Developer Documentation
Android — Accessibility Scanner — Android Accessibility Help
Android — axe Accessibility Analyzer — Deque Systems — Google Play.

Testing colour contrast

If you have direct access to the colour codes used in the app, that is preferred. Otherwise, load the app in a simulator or take snapshots and email them to yourself, then use a eye-dropper tool to find the colour codes used.

Enter the foreground and background colour codes you have into a contrast checking tool.

Note: Checking colour contrast using screenshots from devices and sampling tools can be inaccurate. You are unlikely to get the exact value used in the app's code. This can result in false failures. It can be more valuable to perform static testing of colours in the design phase, then have developers use user interface snapshots and unit tests to verify the right colour values for elements against the design.

For a list of contrast checking tools and more on testing contrast, read Test for sufficient contrast — Knowledge Area: Colour and contrast.