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

  1. 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.
  2. Make sure your colour combinations are accessible with some free online tools, such as:
  3. Measure the contrast between text and background colours with tools like:
  4. 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.
  5. 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.
  6. To use text over images, add a solid background behind the text or a dark overlay to the image.
  7. Don’t use colour alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content.
  8. Read our information about focus visible. It includes advice on best practice colour combinations.
  9. Understand the issues faced by people with slight to extreme vision problems. Use a tool like Web Disability Simulator to simulate:
    • colour blindness
    • low vision
    • Parkinsons
    • Dyslexia
    • small vocabulary
    • concentration.
  10. Watch World Wide Web Consortium's (W3C) short colors with good contrast video (1 minute 3 seconds):

  • Transcript and translations: colors with good contrast (W3C)

  • Page last updated: 22 June 2021