✗ Color only
Error: Invalid email
Success: Form submitted
Why contrast matters
Sufficient color contrast ensures content is readable for people with:
- Low vision: Affects 246 million people worldwide
- Color blindness: 8% of men, 0.5% of women
- Aging eyes: Contrast sensitivity decreases with age
- Situational impairments: Bright sunlight, low-quality screens
Low contrast is the #1 accessibility issue on the web, affecting 83% of home pages (WebAIM Million 2024).
WCAG contrast requirements
Text contrast (WCAG 1.4.3 - Level AA)
| Text type | Definition | Required ratio |
|---|---|---|
| Normal text | Under 18pt (24px) or under 14pt bold (19px) | 4.5:1 minimum |
| Large text | 18pt+ (24px+) or 14pt bold (19px bold) | 3:1 minimum |
| Incidental text | Inactive UI, decorative, logos | No requirement |
Non-text contrast (WCAG 1.4.11 - Level AA)
UI components and graphics need 3:1 contrast against adjacent colors:
- Form input borders
- Buttons and controls
- Focus indicators
- Icons that convey information
- Chart elements and data visualization
Enhanced contrast (Level AAA)
For maximum accessibility:
- Normal text: 7:1
- Large text: 4.5:1
Testing contrast
Online tools
| Tool | Best for | Link |
|---|---|---|
| WebAIM Contrast Checker | Quick two-color check | webaim.org/resources/contrastchecker |
| Coolors Contrast Checker | Visual preview | coolors.co/contrast-checker |
| Who Can Use | Simulates vision conditions | whocanuse.com |
Desktop applications
- Colour Contrast Analyser (CCA): Free from TPGi — Includes eyedropper tool
- Stark: Figma, Sketch, Adobe XD plugin
Browser extensions
- WAVE: Shows contrast errors in page context
- axe DevTools: Detailed contrast analysis
- Accessibility Insights: Includes contrast checker
UA brand colors and accessibility
Primary UA colors
| Color | Hex | On white | On black | Usage notes |
|---|---|---|---|---|
| Arizona Red | #AB0520 | 5.9:1 ✓ | 3.5:1 ✓ | Safe for normal text on white |
| Arizona Blue | #0C234B | 12.6:1 ✓ | 1.7:1 ✗ | Excellent on white, not on black |
| Oasis | #1E5288 | 6.8:1 ✓ | 3.1:1 ✓ | Safe for normal text on white |
| Darker Red | #8B0015 | 8.2:1 ✓ | 2.6:1 ⚠️ | Better contrast than Arizona Red |
See the UA Brand Color Guide for full palette.
Problem combinations to avoid
- Light gray text on white backgrounds
- Red text on blue backgrounds (or vice versa)
- Yellow or light blue on white
- Green and red together (color blindness)
Don't use color alone
WCAG 1.4.1: Color cannot be the only way to convey information.
Problem examples
- Red text for errors with no other indicator
- Color-coded status without labels
- Required fields marked only with red asterisks
- Charts using only color to distinguish data
Solutions
- Add icons or symbols (⚠️ ✓ ✗)
- Include text labels
- Use patterns in charts
- Underline links (don't rely on color alone)
- Add "(required)" text to mandatory fields
✓ Color + text/icon
⚠️ Error: Invalid email
✓ Success: Form submitted
Designing for color blindness
Types of color blindness
| Type | Affects | Prevalence |
|---|---|---|
| Protanopia/Protanomaly | Red perception | ~1.5% of men |
| Deuteranopia/Deuteranomaly | Green perception | ~6% of men |
| Tritanopia/Tritanomaly | Blue perception | ~0.01% |
| Achromatopsia | All color (grayscale) | ~0.003% |
Safe color combinations
- Blue and orange
- Blue and yellow
- Varying lightness/darkness rather than hue
- Using patterns or textures with colors
Testing for color blindness
- Coblis simulator
- Toptal Color Filter
- Chrome DevTools: Rendering → Emulate vision deficiencies
Dark mode considerations
Many users prefer dark mode for reduced eye strain. Ensure contrast works in both modes:
- Test both light and dark themes
- Don't assume background color
- Use CSS custom properties for theme switching
- Ensure focus indicators work on dark backgrounds
Color & contrast checklist
- ☐ Normal text has 4.5:1 contrast
- ☐ Large text has 3:1 contrast
- ☐ UI components have 3:1 contrast
- ☐ Focus indicators are visible
- ☐ Color is not the only indicator
- ☐ Works for color blindness
- ☐ Links are distinguishable from text
- ☐ Charts have patterns or labels
- ☐ Tested with contrast checker tool