Accessibility Tips

Techniques for improving web site accessibility.

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

• 1.4.3 Contrast

WCAG Sufficient Techniques

• Text less than 18 point if not bold and less than 14 point if bold
  G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• Text at least 18 point if not bold and at least 14 point if bold
  G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

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 Contrast	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
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 WCAG Color Checker 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.

Help

For assistance please contact Andrew Normand, Web Accessibility Program Leader
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867