Creating accessible content: color and contrast

Audience: Students, Faculty, Staff, Affiliates

Responsible Group: IT Training and Outreach

Overview

Color accessibility ensures that digital content can be perceived and understood by everyone, including people with color vision deficiencies, low vision, or those using assistive technologies. It also follows Universal Design for Learning (UDL) principles and mobile-first best practices so content remains readable on small screens and in varied lighting conditions.

Why it matters

Accessible color use improves readability, reduces errors, and ensures crucial information is not missed. Without it, users may fail to distinguish differences (e.g., errors vs. success, good vs. bad, etc.) or interpret charts correctly, especially on mobile or in environments with glare.

Visual example of poor vs. good color contrast

Bad contrast example
Hard to read: light gray text on white background provides insufficient contrast.
Good contrast example
Easy to read: dark text on white background meets minimum contrast requirements.

Best practices

  • Do not rely on color alone to convey meaning; pair color with text labels, icons, or patterns.
  • Ensure sufficient color contrast between text and its background.
  • Use patterns, labels, or icons in charts and graphs (not color-only keys).
  • Limit palette size; prefer high-contrast choices that remain distinct on mobile.
  • Test on multiple devices (small screens, touch displays) and in bright/low-light settings.
Tip: Productivity & comfort for everyone: High-contrast, well-labeled designs are easier to read outdoors, on projectors, and on mobile, reducing eye strain and helping all users, not only those with accommodations.

Compliance standards

Click this link to go to the LinkedIn Learning video on accessible color

How to make it accessible

  1. Check contrast ratios using built-in tools (Microsoft Accessibility Checker in Word, PowerPoint, Outlook, Excel) or third-party checkers.
  2. Avoid color-only communication; add text labels, icons (e.g., ✔ Approved), or patterns.
  3. Choose accessible palettes and avoid problematic pairings (e.g., red/green, blue/purple). Keep a limited set of brand-compliant, high-contrast colors.
  4. Test in grayscale to confirm the information still makes sense without color.
  5. Design mobile-first; verify readability on small screens and at lower brightness.

Applying accessibility standards

Quick review checklist

  • Text/background contrast ≥ 4.5:1 (≥ 3:1 for large text). Tip: Use the WebAIM Color Contrast Checker.
  • Color is never the only way information is conveyed.
  • Icons, patterns, or text labels supplement any color cues.
  • Design verified on mobile and in grayscale.
  • Validated with Microsoft Accessibility Checker or another tool.

Need Help?

If this article needs to be updated, please leave feedback on this article and it will notify the owner of the article.

Print Article