Colour and contrast

Is there enough contrast between text, interactive elements and their background colours?

Why it’s important

  • Terehia has low vision and needs content to have enough contrast to decipher it.
  • Jack has achromatopsia and cannot distinguish information conveyed by colour alone.

Next steps

  1. The contrast between text and background needs to be greater than or equal to 4.5:1 for small text and 3:1 for large text.
  2. Graphics and user interface components (such as form input borders) need a contrast ratio of at least 3:1.
  3. Test colour combinations with an accessible Colour Palette Generator(this link opens an external website) or a Colour Contrast Grid(this link opens an external website).
  4. Check the contrast between text and background colours with tools like WebAim's Colour Contrast Checker(this link opens an external website) or an Adobe XD(this link opens an external plugin), Figma or Sketch plugin.
  5. Exceptions:
    • Colour contrast requirements for logos or incidental Headings are not required.
    • Text included in disabled buttons or a disabled control's state is not required to meet the minimum contrast ratio.
    • Text that is part of a logo has no minimum contrast requirement.
  6. Temper the contrast between the text and background colour. Avoiding pure black text on white assists users with Irlen Syndrome, light sensitivity, dyslexia and autism.
  7. When using text over images, add a solid background behind the text or a dark overlay to the image.
  8. Non underlined links need a contrast ratio of 4.5:1 with the surrounding body text. The body text needs a contrast ratio of 3:1 with the background colour. Test the link contrast with tools like WebAim's Link Contrast Checker(this link opens an external website).
  9. Colour alone should not convey meaning. Use icons, written content and other visual elements to reinforce clear content communication.
  10. To simulate the visual challenges people face use tools like Coblis(this link opens an external website) or NoCoffee Vision Simulator(this link opens an external website) to simulate.

References

Resources

World Content Accessibility Guidelines

Last modified: