MSU Denver

Color Contrast Guidelines

From documents and webpages to graphs and closed-captions, color contrast is an important facet of creating any accessible content. These guidelines will help you create colorful content that is still accessible to all.

General Knowledge

  • Avoid color combinations that can create accessibility issues for people with color blindness.
    • Red and green; blue and yellow; purple and orange.
  • The color contrast ratio of the text to background needs to be 4.5:1 to met Web Content Accessibility Guidelines.
    • A ratio of 1:1 would be white on white while a ratio of 21:1 would be white on black.

Choosing Appropriate Colors

  • The best contrasts exist between dark colors on light backgrounds. Using bright colors against a bright background however, creates a contrast problem.
  • is does not mean colors are chosen based solely on contrast. Aesthetics are important too. While aesthetics can add flair and personality, avoid these choices:
    • Using black as a background. A black background makes it easy to select contrasting text, but it also creates issues when switching from a black background to a lighter one in the same presentation.
    • Using Yellow or Red for text color:
      • Yellow text can contrast well with darker backgrounds, but it is no fun to read and cannot be paired with blue as is causes issues with color blindness.
      • Bright red text is hard to contrast as red on white has a ratio of 3.99:1

Checking Contrast