Color Contrast - Bad Example

This example demonstrates poor color contrast ratios that fail WCAG guidelines, making text difficult or impossible to read for users with visual impairments.

Very Poor Contrast

This light gray text on white background has a contrast ratio of only 1.2:1, making it extremely difficult to read for most users.

Insufficient Contrast

This medium gray text on light gray background has a contrast ratio of 2.1:1, which fails to meet even the minimum WCAG requirements.

Color-Only Information

This text uses red text and green text as the only way to indicate different types of information, which is inaccessible to users with color blindness.

Low Contrast on Dark Background

This dark gray text on black background has a contrast ratio of 1.8:1, making it nearly impossible to read in most lighting conditions.

Accessibility Issues

  • Text contrast ratios are well below WCAG AA requirements (4.5:1 for normal text, 3:1 for large text)
  • Some text is nearly unreadable with contrast ratios below 2:1
  • Information is conveyed using color alone, making it inaccessible to users with color vision deficiencies
  • Text becomes illegible in bright sunlight or dim lighting conditions
  • Users with visual impairments cannot distinguish between different text elements

How to Test for the Issue

  • Use a color contrast analyzer to identify text that fails WCAG contrast requirements
  • View the page in grayscale to see how much information is lost when color is removed
  • Test readability in bright sunlight or dim lighting to experience the difficulty
  • Ask users with visual impairments to attempt reading the text
  • Use browser developer tools to simulate different types of color blindness

WCAG Related Criteria

  • 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text which should have at least 3:1
  • 1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for large text which should have at least 4.5:1
  • 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element