Contrast for non-text content

Non-text content, such as graphical objects or active user interface components, needs to have sufficient contrast for sighted users to be able to see what it is and the meaning that it conveys.

Meeting the Web Accessibility Standard

When meaningful graphical objects and 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).

Graphical objects

Graphics or parts of graphics that are essential for understanding the content must have a minimum contrast ratio of 3:1 against adjacent colours.

Graphical objects include things such as:


Graphical objects are exempt from contrast requirements if:

Examples of when graphical objects are exempt from contrast requirements
  • A phone icon is accompanied by the text, ‘Phone’ — this means that the content is understandable, even without the phone icon, and so the icon does not have to meet any contrast requirements, although the text does.
  • Each slice in a pie chart has its name and value in a text label — this means that, even if each slice in the pie were the same colour, the text still provides all the data, and so the slices do not need to have sufficient contrast.
  • The data in a pie chart could also be provided in a simple data table that the chart is programmatically linked to or associated with — in which case, the slices in the pie chart would not need to have sufficient contrast or text.
  • A country’s flag is an icon or graphical object whose visual presentation is essential to its meaning — if you change the flag’s colours, you may have changed the flag’s meaning or even the country that it represents.

More information on contrast for graphical objects

User interface components

User interface components, or controls, are discrete interactive elements with a distinct function. This includes things like:

Contrast for controls

The visual parts of an active control (not including any text) that a person needs to see to be able to identify the control and how it operates must have a minimum contrast ratio of 3:1 against their adjacent colours.

For more about contrast ratios of active user interface components with adjacent colours, see: Understanding Success Criterion 1.4.11: Non-text Contrast — WCAG 2 — W3C.

Contrast of visual boundaries

Some controls use a border or background colour as a visual boundary to indicate a control’s ‘clickable’ zone or hit area. If that visual boundary is the only way to identify the control, it needs a minimum contrast ratio of 3:1 against its adjacent colours.

Where a control can be identified through means other than its visual boundary — such as its position or the text it contains — that boundary does not have any contrast requirements.

Example of when a visual boundary is exempt from contrast requirements

A button typically has a border or shape that makes it easier for people to recognise.

If a button’s text has sufficient contrast to be readable and identify the button’s presence, then the button’s border or background colour does not need sufficient contrast with its surrounding colours.

For more information on the contrast requirements around user interface components with visual boundaries, see: Understanding Success Criterion 1.4.11: Non-text Contrast — WCAG 2 — W3C.

Contrast for states

Any visual effects used to indicate a control’s state — for example, whether it’s focused or selected — must have a minimum contrast ratio of 3:1 against adjacent colours.

Note: The minimum 3:1 contrast ratio is especially critical for the visible indicator that displays when a control receives keyboard focus.

Currently, different states — for example, a link’s normal and hover states — do not need to contrast with one another. The only requirement is that, in each of its states, the visual indicators of what the control is and its current state have at least a 3:1 contrast ratio against adjacent colours.

When WCAG 2.2 comes out, however, Success Criterion 2.4.11 Focus Appearance (Minimum) will likely require that a control's focus state have a contrast ratio of at least 3:1 with its non-focused state.


The visual parts of user interface component or controls do not need to meet contrast requirements if:

Take care with inactive or disabled controls

Inactive or disabled controls are often indicated by being ‘greyed out’ or having low contrast. This can present accessibility and usability problems for users, and disabled buttons in forms are a good example of this.

Disabling form fields and buttons is almost always a bad idea. For more information, see Disabled buttons.

More information on contrast for user interface components