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

• 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

Exercise

• Fix the color contrast on this page

Tip

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