Contrast Testing
Recommended Color Combinations
Text on White Background
| Combination | Contrast | Level | Recommendation |
|---|---|---|---|
| Gray 900 on White | 18.4:1 | AAA | Headings |
| Gray 600 on White | 7.1:1 | AAA | Body text |
| Gray 500 on White | 4.7:1 | AA | Secondary text |
| Orange 700 on White | 4.6:1 | AA | Accent text, links |
| Orange 800 on White | 6.4:1 | AA+ | Strong accent text |
Text on Orange Background
| Combination | Contrast | Level |
|---|---|---|
| White on Orange 500 | 3.1:1 | Large text only |
| White on Orange 600 | 3.6:1 | Large text only |
| White on Orange 700 | 4.6:1 | AA |
Text on Dark Background
| Combination | Contrast | Level |
|---|---|---|
| White on Gray 900 | 18.4:1 | AAA |
| Gray 100 on Gray 900 | 16.2:1 | AAA |
| Orange 400 on Gray 900 | 6.2:1 | AA+ |
Right vs. Wrong
Right
- Text in Orange 700 (#C2570A) on a white background
- Text in Gray 600 (#52525B) as the default text color
- Orange 500 as a button background with white text (≥24px)
- Orange 500 as a decorative accent (lines, icons ≥24px)
Wrong
- ❌ Text in Orange 500 (#FF8500) on a white background
- ❌ Orange 500 on Orange 50 for small text
- ❌ Gray 400 as body text color
- ❌ White on Orange 500 for text below 18px bold
Exception: logo and lockup
The division name in the division lockup carries Orange 600 #EA6D00 and lands at 2.69–3.14:1 on light backgrounds. WCAG 2.1 SC 1.4.3 explicitly exempts logotypes from the contrast requirement: "Text that is part of a logo or brand name has no contrast requirement."
The exception covers the mark and the lockup only. For body text, interface elements and links the tables above apply unchanged — Orange 700 remains the lightest approved text step there.
Contrast Testing Tools
- WebAIM Contrast Checker
- Colour Contrast Analyser (CCA)
- Browser DevTools → Accessibility Panel