Read time: 1 minute 40 seconds
Is there enough contrast between text and its background colour?
Can you still understand everything the design is communicating without depending on colour?
- Esther has low vision and needs content to have enough contrast to read it.
- Sol is outside and can't see the hyperlinks on a mobile because of sun glare.
- Joel is red-green colour-blind and can’t reliably make sense of information conveyed with colour alone.
Steps to take
- Provide good contrast. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.
- Test your colour palette for accessible combinations with Vision Australia’s Colour Contrast Analyser, the Accessible Colour Palette Builder or Contrast Grid.
- Measure the contrast between text and background colours with tools like WebAIM’s Colour Contrast Checker or a Sketch plugin.
- Take note of some exceptions:
- Colour contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. You don’t need to meet colour contrast requirements for logos or incidental graphic elements.
- Text that is part of a disabled control state, or disabled buttons, does not need to meet the minimum contrast ratio.
- Text that's part of a logo has no minimum contrast requirement. But still be careful with your design as often logo colour schemes get used for wider branding.
- Slightly temper the contrast between your text and background colour. For example: don’t use pure black text on a pure white background. Stark contrast can result in blurred or moving text for people with Irlen syndrome.
- To use text over images, add a solid background behind the text or a dark overlay to the image.
- Don’t use colour alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content.
- Understand the problems faced by people with slight to extreme vision problems. Use a tool like No Coffee Vision Simulator to simulate:
- colour blindness
- low vision
- visual snow, glare and ghosting
- obstructed visual field
- low contrast sensitivity
- Watch World Wide Web Consortium's (W3C) short colors with good contrast video (1 minute 3 seconds):
- Design assets in sketch (Australian Government Design System)
- Video tutorial: Meeting contrast requirements (YouTube)
- Video tutorial: accessibility contrast (YouTube)
- Colour Blind Helper (Vision Australia)