Color Contrast

Why Color Contrast Matters

Have you ever come across a webpage or presentation slide where the choice of colors makes it difficult (or even painful) to read the text? Color contrast plays a crucial role in ensuring that text and actionable elements on a page are distinguishable from their background. While many benefit from adequate color contrast, individuals with low vision or color blindness rely on sufficient contrast to read and interact with content effectively. For this reason, the Web Content Accessibility Guidelines (WCAG) require specific, minimum contrast standards, outlined as follows.

How To

General Practice

Use a color contrast checker to test the ratio between text on a page and its background, or between non-text elements (buttons, icons, form fields, etc.) and their background. The WebAIM Contrast Checker and WAVE Web Accessibility Evaluation Tool are two great tools for this.

• For normal size text, the contrast ratio must be at least 4.5:1.
• For large text, the contrast ratio must be at least 3:1. (Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.)
• For non-text elements (and more specifically, their borders), the contrast ratio must also be 3:1.

Color must not be used as the only way of conveying information.

• Example: A calendar app where a solid red dot indicates being busy, a solid green dot indicates being available, and a solid yellow dot indicates being away will not make sense to someone who is colorblind.
• Solution: One of those dots could be solid color, but the others would have to have another way to distinguish themselves. E.g., the red dot could also contain an “x” symbol, the green dot could also contain a checkmark, and the yellow dot could resemble the hands of a clock.

Distinguish links from surrounding paragraph text using both color and underlining.

Using the WebAIM Color Contrast Checker

Technical Tip

Unsure if your webpage text size is normal or large? Right-select the text, choose the Inspect Element, and select the Computed tab to access the source code, including font information. You can also use a keyboard shortcut to access this information:

• Chrome: Command + Option + I (Mac), Control + Shift + C (Windows)
• Firefox: Control + Shift + C 
• Edge: F12
• Opera: Control + Shift + I

What to Avoid

• Using color combinations that do not meet minimum contrast requirements.
• Placing text over complex, moving, or otherwise low-contrast images.
• Using color as the only way to convey information. Instead (or in addition), apply patterns, symbols, or labels as secondary indicators.

Additional Resources