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.
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.
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.
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.
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).