Color Contrast

Problem

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

Examples

Good 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
Poor 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

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

Exercise

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