Accessibility

Text Contrast

WCAG (Web Content Accessibility Guidelines) 2.0 Level AA standards ensure that content is accessible by everyone, regardless of any disability or user device.

To ensure text remains compliant with WCAG standards, use only these permitted color combinations. These options have a minimum contrast ratio of at least 4.5:1.

More Information in the WCAG 2.0 Guidelines

G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text

Useful Tool

This color contrast tool is a useful resource for testing the compliance of any color combination.

Accessible Combinations

Examples of accessible text and background color combinations are shown.

  • Dark Gray on White
  • Base Gray on White
  • White on Dark Gray
  • White on Base Gray
  • Darker Blue on White
  • Dark Blue on White
  • Base Blue on White
  • White on Darker Blue
  • White on Dark Blue
  • White on Base Blue
  • White on Base Green
  • Dark Green on Lighter Green
  • Dark Gray on Base Yellow
  • Darker Yellow on Lighter Yellow
  • White on Base Red
  • Dark Red on Lighter Red
  • White on Base Purple
  • Dark Purple on Lighter Purple
Back to Top

Non-Accessible Combinations

Examples of non-accessible text and background color combinations are shown.

  • Base Blue on Darker Gray
  • Darker Gray on Base Blue
  • Base Blue on Darker Blue
  • Darker Blue on Base Blue
  • Light Gray on Dark Gray
  • Dark Gray on Light Gray
Back to Top

Undesirable Combinations

Examples of undesirable text and background color combinations are shown. Although these combinations may accessible, they should not be used. In general, avoid combining any of the secondary colors together.

  • Lighter Blue on Dark Gray
  • Lighter Green on Dark Blue
  • Lighter Yellow on Dark Green
  • Dark Blue on Lighter Red
  • Dark Red on Lighter Yellow
  • Dark Purple on Lighter Blue
Back to Top