Color Contrast - Good Example

This example demonstrates proper color contrast ratios that meet WCAG guidelines, ensuring text is readable for users with visual impairments and in various lighting conditions.

Large Text - Excellent Contrast

This text has a contrast ratio of 7:1, which exceeds the WCAG AAA requirement for large text. It's easily readable for users with moderate visual impairments.

Normal Text - Good Contrast

This text has a contrast ratio of 4.5:1, meeting the WCAG AA requirement for normal text. It provides adequate readability for most users.

Large Text - Minimum Acceptable

This text has a contrast ratio of 3:1, meeting the minimum WCAG AA requirement for large text (18pt or 14pt bold).

High Contrast Example

This black text on white background provides maximum contrast (21:1 ratio) and is ideal for users with severe visual impairments.

Accessibility Features

  • All text meets or exceeds WCAG AA contrast ratio requirements (4.5:1 for normal text, 3:1 for large text)
  • Some examples exceed AAA requirements (7:1 for normal text, 4.5:1 for large text) for enhanced accessibility
  • Text remains readable in various lighting conditions and for users with color vision deficiencies
  • High contrast options are provided for users with severe visual impairments
  • Color is not used as the only way to convey information

How to Test for Accessibility

  • Use a color contrast analyzer tool to verify contrast ratios meet WCAG guidelines
  • Test readability in different lighting conditions (bright sunlight, dim lighting)
  • View the page in grayscale to ensure information doesn't rely solely on color
  • Ask users with visual impairments to test readability
  • Test with browser zoom at 200% to simulate low vision conditions

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