Color is a powerful tool in digital content—it can draw attention, convey meaning and enhance visual appeal—but people perceive color in different ways. To be effective, color must be used in a way that ensures everyone can understand the content, regardless of how they see it.

Relying only on color to communicate information can create barriers for people with visual impairments, including color blindness and low vision. Similarly, when there isn’t enough contrast between text and background, it can be hard or even impossible for some users to read the content.

Impact

Users should be able to scan a page and quickly find what they need. Color can help with that—but only if it’s used accessibly.

If color is the only way something is communicated, like using red to show an error or green to show success, people who can’t see those colors may miss the message entirely. That can lead to confusion or prevent someone from completing a task.

Low contrast can also be a problem. Light gray text on a white background might look sleek, but it can be unreadable for someone with low vision or in bright lighting. This is especially problematic when the elements with low contrast are interactive components in a webpage, such as links and buttons, or key content in a document.

When color and contrast are used well, content becomes easier for everyone to read and understand.

How to use color accessibly

Making color accessible comes down to two main ideas: don’t rely on color alone, and make sure there’s enough contrast.

Key principles

  • Don’t rely on color alone: In addition to color, use text labels, icons, patterns, or shapes to back up what color is trying to say.

Example: Instead of just using red and green dots to show status, add labels like “Error” and “Success.”

  • Make sure there’s enough contrast: Text should stand out clearly from the background. The contrast ratio should be at least 4.5:1 for normal text (3:1 for large text and icons). A color contrast of 7:1 is even better for text and will ensure the greatest visibility for readers.

There are free tools online that can help you check this. Avoid combinations like light gray on white or yellow on light blue.

Note: At Illinois, Illini Orange should only be used for text that is larger than 16pt (22px). For smaller text, use Altgeld to ensure sufficient contrast. For more guidance, refer to the university’s web color pairings for accessibility to learn about approved color pairings within the university's branding.

Additional considerations: Complex backgrounds

Sometimes, even good contrast isn’t enough—like when text sits on top of a photo or gradient. In those cases:

  • Add a solid background behind the text.
  • Use a semi-transparent overlay to darken or lighten the image.
  • Move the text to a clearer part of the layout.

These small changes can make a big difference in whether someone can read and understand your content.