41
Total shades
in database
10
Pass AA on white
24% of shades
6
Pass AAA on white
15% of shades
31
Pass AA on black
76% of shades
WCAG AA Score
Shades passing 4.5:1 on white
10 of 41 Gray shades achieve at least 4.5:1 contrast on white — the WCAG AA threshold for normal body text.
WCAG AAA Score
Shades passing 7:1 on white
6 of 41 Gray shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Gray shade as a background, use these text colors for WCAG AA compliance.
White text works on:
Dark text works on:
Recommended Backgrounds
When using a Gray shade as text color, these backgrounds provide WCAG AA compliance.
Works on white / light:
Automated Accessibility Validation — All Gray Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Platinum | #E5E4E2 | WCAG Fail1.3:1 | WCAG AAA16.5:1 | Text on black |
| Platinum Color | #E5E4E2 | WCAG Fail1.3:1 | WCAG AAA16.5:1 | Text on black |
| Light Gray | #D3D3D3 | WCAG Fail1.5:1 | WCAG AAA14.0:1 | Text on black |
| Pale Silver | #C9C0BB | WCAG Fail1.8:1 | WCAG AAA11.7:1 | Text on black |
| Silver | #C0C0C0 | WCAG Fail1.8:1 | WCAG AAA11.5:1 | Text on black |
| Medium Gray | #BEBEBE | WCAG Fail1.9:1 | WCAG AAA11.3:1 | Text on black |
| French Gray | #BDBDC6 | WCAG Fail1.9:1 | WCAG AAA11.3:1 | Text on black |
| Ash Gray | #B2BEB5 | WCAG Fail1.9:1 | WCAG AAA10.9:1 | Text on black |
| Dark Gray | #A9A9A9 | WCAG Fail2.4:1 | WCAG AAA8.9:1 | Text on black |
| Dark Silver | #A9A9A9 | WCAG Fail2.4:1 | WCAG AAA8.9:1 | Text on black |
| Cloudy Gray | #ACA99E | WCAG Fail2.4:1 | WCAG AAA8.9:1 | Text on black |
| Quick Silver | #A6A6A6 | WCAG Fail2.4:1 | WCAG AAA8.6:1 | Text on black |
| Pewter | #96A8A1 | WCAG Fail2.5:1 | WCAG AAA8.4:1 | Text on black |
| Cadet Gray | #91A3B0 | WCAG Fail2.6:1 | WCAG AAA8.1:1 | Text on black |
| Suede Gray | #9E9E9E | WCAG Fail2.7:1 | WCAG AAA7.8:1 | Text on black |
| Mountain Gray | #9E9E9E | WCAG Fail2.7:1 | WCAG AAA7.8:1 | Text on black |
| Sage Gray | #9E9E8C | WCAG Fail2.7:1 | WCAG AAA7.7:1 | Text on black |
| Spanish Gray | #989898 | WCAG Fail2.9:1 | WCAG AAA7.3:1 | Text on black |
| Cool Gray | #9090C0 | WCAG AA Large3.0:1 | WCAG AA6.9:1 | Text on black |
| Stone Gray | #928E85 | WCAG AA Large3.3:1 | WCAG AA6.4:1 | Text on black |
| Philippine Gray | #8C8C8C | WCAG AA Large3.4:1 | WCAG AA6.3:1 | Text on black |
| Zinc | #8B8B83 | WCAG AA Large3.4:1 | WCAG AA6.1:1 | Text on black |
| Warm Gray | #948878 | WCAG AA Large3.5:1 | WCAG AA6.0:1 | Text on black |
| Roman Silver | #838996 | WCAG AA Large3.5:1 | WCAG AA6.0:1 | Text on black |
| Taupe Gray | #8B8589 | WCAG AA Large3.6:1 | WCAG AA5.8:1 | Text on black |
| Light Slate Gray | #778899 | WCAG AA Large3.6:1 | WCAG AA5.8:1 | Text on black |
| Battleship Gray | #848482 | WCAG AA Large3.8:1 | WCAG AA5.6:1 | Text on black |
| Gray | #808080 | WCAG AA Large4.0:1 | WCAG AA5.3:1 | Text on black |
| Smoke | #738276 | WCAG AA Large4.0:1 | WCAG AA5.2:1 | Text on black |
| Slate Gray | #708090 | WCAG AA Large4.0:1 | WCAG AA5.2:1 | Text on black |
| Steel Gray | #71797E | WCAG AA Large4.4:1 | WCAG AA4.7:1 | Text on black |
| Nickel | #727472 | WCAG AA4.7:1 | WCAG AA Large4.5:1 | Text on white |
| Dim Gray | #696969 | WCAG AA5.5:1 | WCAG AA Large3.8:1 | Text on white |
| Iron Gray | #595E5E | WCAG AA6.6:1 | WCAG AA Large3.2:1 | Text on white |
| Feldgrau | #4D5D53 | WCAG AA7.0:1 | WCAG AA Large3.0:1 | Text on white |
| Marengo | #4C5866 | WCAG AAA7.3:1 | WCAG Fail2.9:1 | Text on white |
| Davy's Gray | #555555 | WCAG AAA7.5:1 | WCAG Fail2.8:1 | Text on white |
| Dark Slate Gray | #2F4F4F | WCAG AAA8.9:1 | WCAG Fail2.4:1 | Text on white |
| Outer Space | #414A4C | WCAG AAA9.1:1 | WCAG Fail2.3:1 | Text on white |
| Charcoal | #36454F | WCAG AAA9.9:1 | WCAG Fail2.1:1 | Text on white |
| Gunmetal | #2A3439 | WCAG AAA12.7:1 | WCAG Fail1.6:1 | Text on white |
Accessibility Notes
- 1
Gray 700+ (#374151 and darker) reliably passes WCAG AAA on white — the go-to for body copy and UI text.
- 2
Gray 500–600 is borderline for AA on white; #6B7280 achieves ~4.6:1 — test the specific context before using for body text.
- 3
Light grays (50–300) fail AA for text on white but are widely used for backgrounds, dividers, and disabled states.
- 4
For placeholder text, WCAG 1.4.3 applies — gray placeholder text must pass 4.5:1 on its background.
- 5
Disabled state elements are exempt from contrast requirements (WCAG exception), but aim for 3:1 minimum as a usability best practice.
Design Examples
BUTTON COMPONENT
Nickel — #727472
CARD WITH GRAY BACKGROUND
Card heading
A card component using Platinum as the background. Dark text ensures readability.
DARK BACKGROUND CARD
Card heading
Nickel background with white text — 4.7:1 contrast.
Design Tips
- ✓
Use #374151 or #1F2937 for primary body text — both exceed WCAG AAA on white.
- ✓
#6B7280 is on the edge of AA compliance; prefer #4B5563 for smaller text where legibility matters.
- ✓
Gray-on-gray combinations (e.g., light gray text on white) frequently fail accessibility audits — always run automated checks.