Color and Color Contrast

Importance Color and Color Contrast

How people perceive color in digital content can be affected by their varying visual abilities and ambient lighting conditions (e.g., color blindness, low vision, age-related visual issues, too bright or too dark lighting conditions, etc.). The type of technology (e.g., monitors with varying color displays) being used to access the digital content can also affect color perception.

When color is an essential part of conveying information, people who cannot see or differentiate certain colors may encounter difficulties and may not easily access the digital content.

Color is usually determined visually by the measurement of hue, saturation, and brightness of light being reflected. Color contrast is measured by a brightness to darkness ratio that is often between foreground and background colors. A high contrast (e.g., a dark color shade vs a light color shade) would meet the optimum color contrast ratio. Having digital text and image content that uses insufficient color contrast can make the viewing experience difficult.

Sufficient and Insufficient Text and Background Color Contrast Examples

Sufficient Contrast 1Sufficient Contrast 2Insufficient Contrast 1Insufficient Contrast 2
black text on white backgroundwhite text on black backgroundlight gray text on white backgrounddark gray text on black background

Additionally, to ensure digital content is accessible, color must not be used alone to convey important information or to demonstrate emphasis.

Common Errors

These common errors hinder the accessibility and usability of digital content.

  • Color alone is used to convey meaning.
  • Insufficient color contrast between foreground text and background color.
  • Insufficient color contrast when text is placed on images.

Best Practices 

Follow these best practices to improve the accessibility and usability of the use of color and color contrast in your digital content.

Color Contrast

  • Foreground text color and background color have sufficient color contrast.
    • Text has appropriate color contrast with the background and meets contrast ratio requirements (WCAG 2, AA).
      • For normal-sized (e.g., 12 point) text and images of text, the ratio is 4.5:1.
      • For large text (over 18 point or 14 point bold), the ratio is at least 3:1.
    • Linked text has appropriate color contrast: Link color should contrast sufficiently and meet the color contrast ratio requirements.
      • 4.5:1 color contrast ratio for link text color to background color.
      • 3:1 color contrast ratio for link text color to surrounding text color.
  • Non-text interface components (e.g., form or link focus outline, buttons, etc.) have a color contrast of at least 3:1 with adjacent colors and with default state colors.
  • Sufficient color contrast should be used when text is placed on images so the text is readable and easily distinguishable from the image background.
  • For charts, graphs, or diagrams, sufficient color contrast should be used when color fields are adjacent to each other and are used to compare information.
  • Color contrast requirements are not necessary for text when used as part of a logo or when used for aesthetic purposes.

Using Color and a Visual Cue to Convey Information

  • Color used to convey meaning, alert a person, or show emphasis needs to be paired with another visual cue (e.g., bold, symbol, etc.) so people can identify the importance without having to depend on color alone.
    • Pair colored text with bold (e.g., Emphasis)
      • This combination should be consistent and used sparingly to represent the same type of emphasis.
      • Pair a form’s field alert highlight/outline with a text message.
        Last Name: ________________    Last name is missing
      • Pair colored text with a symbol/icon (e.g. Required*, $-Money).
      • For graphs, charts, and diagrams, pair color fields with text and data value.
        A colored pie chart showing blue at 64%, red at 25%, and orange at 11%.

Accessibility Checks 

Use this check list as a guide to ensure your colors and color contrast are in an accessible format.

  • Color is not used alone to convey information.
  • Color used to convey meaning, alert a user, or show emphasis is paired with another visual cue (e.g., text, symbol, bold, etc.).
  • There is sufficient color contrast between foreground text, linked text, and background colors.
  • Text placed on images is easily distinguishable and readable visually and by assistive technology.