Buttons: Colour and contrast

A button must not rely on colour alone to be visible to people with low vision or colour blindness. It also needs to stand out with sufficient contrast against its surrounding colours.

To understand the importance of colour and contrast ratio requirements, see the Knowledge Area: Colour and contrast.

Meeting the Web Accessibility Standard

When a button does not rely on colour alone to identify itself or its states visually, this meets WCAG 2 Success Criterion 1.4.1 Use of Color (Level A).

When text or images of text within a button have sufficient contrast, this meets WCAG 2 Success Criterion 1.4.3 Contrast (Minimum) (Level AA).

When a button’s visual information or graphical objects have sufficient contrast, this meets WCAG 2 Success Criterion 1.4.11 Non-text Contrast (Level AA).

Do not rely on colour alone

Make sure that buttons and their different states are presented visually in ways that do not rely on colour alone.

Much of the time, buttons are presented in ways that do not rely on colour alone. It’s often obvious from their shape or content that they are buttons.

But if a button is visually presented in a way that requires people to see certain colours, people with low or limited colour vision may not be able to find or use the button.

Similarly, a button can display different states, such as a ‘Like’ button that has:

not been pressed yet
been pressed to register a ‘like’.

The displayed state of a button should not rely on colour alone either.

Non-colour-based visual techniques for buttons

To make sure that colour is not the only way for someone to identify a button or one of its states visually, use a non-colour-based visual technique as well.

Examples of non-colour-based techniques

adding a particular outline shape, pattern or icon to the button
adding some text to the button
ensuring a sufficient contrast ratio of at least 3:1 between the visual aspect of the button and its surrounding colours

Provide sufficient contrast

Certain parts of a button need to stand out or contrast sufficiently against their surrounding colours in order to be visible to people with low vision or colour blindness.

Text

Contrast requirements

If a button has any text or an image of text in it, that text or image of text must have a minumum contrast ratio of 4.5:1 against surrounding colours, unless it is large text, in which case it needs at least 3:1 contrast.

Visual information and graphical objects

A button usually has visual information, like a shape or outline, and sometimes graphical objects, such as icons, that indicate:

that there is a button
what the button does — for example, a ‘thumbs up’ icon for a ‘Like’ button
the button’s different states — for example, focused, pressed, expanded, hovered.

Contrast requirements

Any meaningful visual information or graphical objects that are essential for understanding the button must have a minimum contrast ratio of 3:1 with surrounding colours.

For more about the contrast requirements for visual information and graphical objects, see Understanding Success Criterion 1.4.11: Non-text Contrast — WCAG 2 — W3C.

Exceptions

A button does not need to meet contrast requirements if:

the button is inactive or disabled
the button’s visual appearance is set by the browser and not modified via CSS by the developer
the way that graphical objects in a button are displayed is essential to understanding what they mean (for an example, see Exceptions — Graphical objects — Knowledge Area: Colour and contrast).