Why Color & Contrast Matter
Not everyone sees color the same way. People with low vision, color blindness, or situational limitations (glare, small screens, bright sunlight) may struggle with content that relies on color alone or has insufficient contrast between text and background.
⚡ Quick Rules
- 4.5:1 for normal text, 3:1 for large text
- Never use color alone to convey meaning — add text, icons, or patterns
- Test with a contrast checker tool
- Ensure links are distinguishable (underline, not just a different color)
- Be cautious with brand colors — test them before using for text
Contrast Requirements
WCAG 2.1 Level AA requires specific contrast ratios between text and its background:
| Text Type | Minimum Contrast Ratio |
|---|---|
| Normal text (under 18pt / 14pt bold) | 4.5:1 |
| Large text (18pt+ / 14pt+ bold) | 3:1 |
| User Interface components (e.g., button, text field) and graphical objects (e.g., icons) | 3:1 |
What Does 4.5:1 Look Like?
Black text on white background = 21:1 ✅ (exceeds requirement)
Dark gray (#444) on white = 9.7:1 ✅
Light gray (#999) on white = 2.8:1 ❌ (fails)
White text on light blue (#ADD8E6) = 1.7:1 ❌ (fails badly)
White text on dark blue (#003366) = 10.7:1 ✅
Don't Use Color Alone to Convey Meaning
Color is a great way to enhance communication, but it should never be the only way information is conveyed.
Examples
| ❌ Color Alone | ✅ Color + Text/Icon |
|---|---|
| Red text to indicate an error: "Email" | Red text + ⚠ error icon + text: "Email — Please enter a valid email address" |
| Green cells to show passing grades in a spreadsheet | Green fill + "Pass" text label |
| A chart using only red and blue lines to distinguish data | Red and blue lines + direct labels on each line + a legend |
| A form with required fields marked only in red | Red asterisk (*) + text: "Required fields marked with *" |
Testing Contrast
Free tools make it easy to check contrast:
| Tool | What It Does |
|---|---|
| WebAIM Contrast Checker | Enter foreground and background colors; get the ratio and pass/fail |
| Built-in Accessibility Checkers | Word, PowerPoint, and Acrobat Pro flag low-contrast issues automatically |