Digital Accessibility Essentials: Color

What Is Color Contrast?

Color contrast is the difference in brightness of foreground and background colors of content. The foreground is often text but includes icons and other content. All meaningful content should have adequate color contrast.

Why Color Contrast Matters

Low color contrast can cause people to miss important information or strain their eyes to read your content.

High color contrast is important for text and any meaningful visual content that is intended to be distinguishable from its background (such as icons). Sufficient color contrast is critical for individuals who are colorblind or have low vision and benefits many others.

The following example uses very low color contrast combinations for text:

The word “apple” in orange font with red background; the word “banana” in light yellow font with dark yellow background; the word “orange” in light orange font with dark orange background.

Compare this to the following text, which uses high color contrast combinations:

The word “apple” in white font with maroon background; the word “banana” in white font with black background. The word “orange” in dark orange font with white background.

The first example is much harder to read than the second. High contrast allows everyone to read more quickly and effectively and avoid straining their eyes.

How To Assess Color Contrast

You cannot always assess sufficient color contrast using just your eyes, as many color combinations may appear accessible when they are not.

For example: Red text on a green background might appear to have good contrast to many users but could be completely unreadable for someone who is red-green color blind.

Use the WebAIM Contrast Checker to ensure your digital content meets at least WCAG 2.1 AA color contrast standards.

Practical Application: Color Contrast

A common accessibility issue at CU Anschutz is using CU gold on a white background (and vice versa). There is not enough color contrast between CU gold and white to meet accessibility standards.

On the left, example email with a green checkmark showing black text on a gold background. On the right, example email with a red X showing white text on a gold background.

Refer to the CU Anschutz Brand Standards for accessible color combinations.

Using Color to Convey Meaning

Another essential element of color accessibility is avoiding the use of color alone to convey meaning.

Communicating information only through color is inaccessible because not everyone perceives color in the same way. People with color blindness, low vision, or environmental limitations like glare may miss important information. Additionally, assistive technologies like screen readers do not interpret visual color cues, making color‑dependent information completely unavailable to many users.

To ensure accessibility, color should be used as a supplement, not the only method of communication. Important information, like instructions, errors, or status indicators, must also be conveyed through text, symbols, patterns, or programmatic cues so everyone can understand the content regardless of how they perceive or interact with it.

Practical Application: Color & Meaning

Consider which of the two images below would be accessible to someone who is red-green colorblind.

Password requirements: a solid red circle with “longer than 8 characters.” A solid green circle with “uses special characters.” A solid green circle with “uses numerals and letters.”

Password requirements: a red circle with a white “x” followed by “longer than 8 characters.” A green circle with a white checkmark followed by “uses special characters.” A green circle with a white checkmark followed by “uses numerals and letters.”

Without the additional icons (the X and checkmarks), the first image is inaccessible to someone who can’t distinguish between red and green because it only uses color to convey which password requirements have been met. The visual icons would also need alt text to describe each icon, such as “passed” for the green icon and “failed” for the red icon.

Additional Resources

CMS Login