Color Contrast

Problem

  • Users in general, and particularly those with low vision, have trouble reading text if the contrast against the background is insufficient.

WCAG Success Criteria

WCAG Sufficient Techniques

Testing Method

  • Install the WCAG Color Checker toolbar for Firefox
  • Open Firefox
  • Click on Tools > ColorChecker
  • The Color Checker panel will open
  • Click on 'Document' and then 'Test (WCAG 2)'
  • Is the Luminosity Ratio above 4.5 for all text elements? (Tip: You can click on each ratio to see what text it refers to)
  • Tip: For additional testing try Contrast Analyzer

Examples

Good ContrastPoor Contrast
All the things one has forgotten scream for help in dreams - Elias Canetti All the things one has forgotten scream for help in dreams - Elias Canetti
All the things one has forgotten scream for help in dreams - Elias Canetti All the things one has forgotten scream for help in dreams - Elias Canetti

Practice Exercise

  • Use the Contrast Analyzer to assess the contast ration of the text in the table above.

Tip

  • It is much easier to achieve sufficient contrast by using dark text on a light background.

Contact Us

For assistance or to report accessibility problems please contact:

Andrew Normand
Web Accessibility Lead
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867