Color Contrast

One essential aspect of digital accessibility is to ensure that individuals with visual impairments, including those with color vision deficiencies, can read the content. High color contrast between text and background significantly enhances readability and is a fundamental requirement in accessible web and digital design.

What is Color Contrast?

Color contrast refers to the difference in light between text (or other foreground elements) and its background. Sufficient contrast ensures that content is legible, especially for users with low vision or color blindness.

Contrast is typically measured using a contrast ratio, which compares the luminance of two colors. Ratios range from 1:1 (no contrast) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) provide specific minimum contrast ratio requirements.

Why is Color Contrast Important?

1. Improves Readability for Everyone

Good contrast makes text easier to read in various lighting conditions and on different screen types (e.g., mobile, tablet, desktop).

2. Supports Users with Visual Impairments

An estimated 1 in 12 men and 1 in 200 women have some form of color blindness. Without adequate contrast, these users may be unable to perceive important information.

3. Meets Legal Standards

Laws such as the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act require public institutions, including universities, to make their digital content accessible. 

Common Pitfalls

  • Using light gray text on a white background

  • Overlaying text on a busy or low-contrast image

  • Relying solely on color to convey meaning (e.g., “click the gold button”)

Best Practices

  • Use high-contrast color combinations (e.g., black on white, dark gold on gray)

  • Avoid using color as the only way to convey information(e.g., a graph where each set of data is represented by a different color you reference in on the page)

  • Test your designs using color blindness simulators

Tools

SiteImprove is an automated web accessibility testing tool maintained by Purdue Marketing & Communications and ITAP. The tool scans your website for web accessibility errors, misspellings and broken links. It also offers suggestions on how to make your website more searchable.

The College of Liberal Arts and its department websites are currently in SiteImprove. To get access to the tool, please contact Purdue Marketing and Communications.