Insufficient Color Contrast

What is Insufficient Color Contrast?

Insufficient color contrast, the brightness of foreground and background colors in documents, can make content difficult to perceive. Low color contrast can increase eye strain or cause students to miss information. This can apply to text and image. High color contrast is especially important for individual who may have low vision or are colorblind. The World Wide Web Consortium (W3C) created a video about the implications of insufficient color contrast.

How to Check for and Fix Insufficient Color Contrast

There are several tools that can help determine if a document’s font and background colors meet accessibility requirements for contrast. Our recommendation is to use an automatic scanner in the form of a browser extension, website, or desktop software to inspect color contrast ratios, many of which include color blindness simulators. For accessible text, aim for a 4.5:1 ratio between colors. For text that is bold and 19px or is 24px+, the contrast minimum is 3:1, which is the appropriate ratio for elements like tabs and buttons. Review the following tools for checking color contrast: 

Web Content Accessibility Guidelines (WCAG) success criteria

Ensuring colors are accessible meets Success Criteria 1.4.3 – Contrast (Minimum), 1.4.1 – Use of Color, and 1.4.11 – Non-text Contrast.

Conveying Information through Color

Using color to convey information—like marking errors in red or showing progress in green—can be helpful, but it shouldn’t be the only method. Many users, including those with color blindness or low vision, may not perceive color differences. To ensure everyone can understand your content, always pair color with another indicator, such as text labels, icons, or patterns.

Additional Resources

Section 508 provides a great example of how to incorporate descriptive labels to a graph.

Penn State also provides various examples of how to convey information through color including using symbols, text, and color considerations.