Color Contrast Guide
This page documents accessible color combinations from the design system's token palette. All pairings meet or exceed WCAG 2.2 AA requirements as recommended by the DIR Web Modernization Best Practice Standards.
Minimum Contrast Ratios (WCAG 2.2)
| Level | Normal text (< 18px) | Large text (≥ 18px / 14px bold) | UI components |
|---|---|---|---|
| AA (required) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
Approved Text Color Pairings
These combinations are pre-tested and safe to use. The contrast ratio and WCAG level are shown for each.
| Background | Text color | Ratio | Level | Preview |
|---|---|---|---|---|
| White | Black | 16.96:1 | AAA | Sample text |
| White | Primary | 7.02:1 | AAA | Sample text |
| White | Primary dark | 9.72:1 | AAA | Sample text |
| White | Secondary | 6.15:1 | AA | Sample text |
| White | Secondary dark | 8.89:1 | AAA | Sample text |
| White | Gray medium | 4.62:1 | AA | Sample text |
| White | Error | 4.63:1 | AA | Error text |
| Gray lightest | Black | 16.43:1 | AAA | Sample text |
| Primary | White | 7.02:1 | AAA | White on primary |
| Primary dark | White | 9.72:1 | AAA | White on primary dark |
| Black | White | 16.96:1 | AAA | White on black |
| Black | Primary light | 7.84:1 | AAA | Primary light on black |
Combinations That FAIL — Do Not Use
| Background | Text color | Ratio | Level | Preview |
|---|---|---|---|---|
| White | Gray | 2.80:1 | FAIL | Low contrast |
| White | Primary light | 2.76:1 | FAIL | Low contrast |
| White | Warning | 1.70:1 | FAIL | Low contrast |
| White | Info / Accent cool | 2.53:1 | FAIL | Low contrast |
Key Rules
- Never use light gray, primary light, warning yellow, or info cyan as text on white — they fail contrast.
- Warning and info colors are safe for borders and backgrounds, but pair them with dark text.
- When in doubt, test: use the WebAIM Contrast Checker or browser DevTools.
- Override tokens carefully — if you rebrand, re-verify all color pairings meet 4.5:1 minimum.
UI Component Contrast (3:1 minimum)
Non-text UI elements (borders, icons, and focus rings) require at least 3:1 contrast against their background:
| Element | Color | On background | Ratio | Status |
|---|---|---|---|---|
| Focus ring | #2491ff |
White | 3.95:1 | AA |
| Input border | #565c65 |
White | 6.15:1 | AA |
| Error border | #d54309 |
White | 4.63:1 | AA |
| Success border | #00a91c |
White | 3.77:1 | AA |
| Gray border | #dfe1e2 |
White | 1.61:1 | FAIL — decorative only |
DIR Requirement Reference
Per the DIR Web Modernization Best Practice Standards (Feb 2026):
- "Define accessible color combinations and create at least four tints of each color"
- "Always review brand decisions for accessibility compliance"
- "Pass 90% of WCAG 2.2 AA compliance tests"
This page satisfies the requirement for documented accessible color combinations. When rebranding with custom tokens, regenerate this matrix and verify all pairings.