U.S. Web Design System Color Palette — Accessibility & Quality Audit
U.S. Web Design System ships 25 color ramps with 12 shades each. Chromametry scores it 87.67 / 100, ranking #3 of 11 design systems in the palette benchmark.
Open U.S. Web Design System in the Palette Generator →
Free, no account, runs in your browser. Edit any ramp and watch the WCAG contrast and scores update live.
Is the U.S. Web Design System palette WCAG accessible?
Any two U.S. Web Design System shades that are at least 6 steps apart reach 4.5:1 contrast in every ramp — that is the palette's contrast span (K). Pick text and background 6 or more steps apart and you never need to check a pair by hand.
| Contrast target | Used for | Steps apart needed (K) |
|---|---|---|
| 3:1 | large text, icons, UI borders (WCAG AA) | 5 of 11 |
| 4.5:1 | body text (WCAG AA) | 6 of 11 |
| 7:1 | body text (WCAG AAA) | 8 of 11 |
Quality metrics
Each metric is 0–1 (higher is better); the composite score is their geometric mean × 100.
| Metric | U.S. Web Design System | What it measures |
|---|---|---|
| Contrast efficiency | 0.911 | how much of the ramp the WCAG contrast span consumes |
| Lightness linearity | 0.936 | whether perceived lightness steps evenly |
| Chroma smoothness | 0.810 | whether saturation changes without kinks |
| Hue stability | 0.938 | whether each ramp keeps its hue from light to dark |
| Spacing uniformity | 0.800 | whether adjacent shades are equally distinct (CIEDE2000) |
All 25 ramps
red-cool
#ffffff · #f8eff1 · #f3e1e4 · #ecbec6 · #e09aa6 · #e16b80 · #cd425b · #9e394b · #68363f · #40282c · #1e1517 · #000000
red
#ffffff · #f9eeee · #f8e1de · #f7bbb1 · #f2938c · #e9695f · #d83933 · #a23737 · #6f3331 · #3e2927 · #1b1616 · #000000
red-warm
#ffffff · #f6efea · #f4e3db · #ecc0a7 · #dca081 · #d27a56 · #c3512c · #805039 · #524236 · #332d29 · #1f1c18 · #000000
orange
#ffffff · #f6efe9 · #f2e4d4 · #f3bf90 · #f09860 · #dd7533 · #a86437 · #775540 · #524236 · #332d27 · #1b1614 · #000000
orange-warm
#ffffff · #faeee5 · #fbe0d0 · #f7bca2 · #f3966d · #e17141 · #bd5727 · #914734 · #633a32 · #3d2925 · #1c1615 · #000000
gold
#ffffff · #f5f0e6 · #f1e5cd · #dec69a · #c7a97b · #ad8b65 · #8e704f · #6b5947 · #4d4438 · #322d26 · #191714 · #000000
yellow
#ffffff · #faf3d1 · #f5e6af · #e6c74c · #c9ab48 · #a88f48 · #8a7237 · #6b5a39 · #504332 · #332d27 · #1a1614 · #000000
green
#ffffff · #eaf4dd · #dfeacd · #b8d293 · #9bb672 · #7d9b4e · #607f35 · #4c6424 · #3c4a29 · #293021 · #161814 · #000000
green-warm
#ffffff · #f1f4d7 · #e7eab7 · #cbd17a · #a6b557 · #8a984b · #6f7a41 · #5a5f38 · #45472f · #2d2f21 · #171712 · #000000
green-cool
#ffffff · #ecf3ec · #dbebde · #b4d0b9 · #86b98e · #5e9f69 · #4d8055 · #446443 · #37493b · #28312a · #1a1f1a · #000000
mint
#ffffff · #dbf6ed · #c7efe2 · #92d9bb · #5abf95 · #34a37e · #2e8367 · #286846 · #204e34 · #193324 · #0d1a12 · #000000
mint-cool
#ffffff · #e0f7f6 · #c4eeeb · #9bd4cf · #6fbab3 · #4f9e99 · #40807e · #376462 · #2a4b45 · #203131 · #111818 · #000000
cyan
#ffffff · #e7f6f8 · #ccecf2 · #99deea · #5dc0d1 · #449dac · #168092 · #2a646d · #2c4a4e · #203133 · #111819 · #000000
blue
#ffffff · #eff6fb · #d9e8f6 · #aacdec · #73b3e7 · #4f97d1 · #2378c3 · #2c608a · #274863 · #1f303e · #11181d · #000000
blue-cool
#ffffff · #e7f2f5 · #dae9ee · #adcfdc · #82b4c9 · #6499af · #3a7d95 · #2e6276 · #224a58 · #14333d · #0f191c · #000000
blue-warm
#ffffff · #ecf1f7 · #e1e7f1 · #bbcae4 · #98afd2 · #7292c7 · #4a77b4 · #345d96 · #2f4668 · #252f3e · #13171f · #000000
indigo
#ffffff · #efeff8 · #e5e4fa · #c5c5f3 · #a5a8eb · #8889db · #676cc8 · #4d52af · #3d4076 · #2b2c40 · #16171f · #000000
indigo-cool
#ffffff · #eef0f9 · #e1e6f9 · #bbc8f5 · #96abee · #6b8ee8 · #496fd8 · #3f57a6 · #374274 · #292d42 · #151622 · #000000
indigo-warm
#ffffff · #f1eff7 · #e7e3fa · #cbc4f2 · #afa5e8 · #9287d8 · #7665d1 · #5e519e · #453c7b · #2e2c40 · #18161d · #000000
violet
#ffffff · #f4f1f9 · #ebe3f9 · #d0c3e9 · #b8a2e3 · #9d84d2 · #8168b3 · #665190 · #4c3d69 · #312b3f · #18161d · #000000
violet-warm
#ffffff · #f8f0f9 · #f6dff8 · #e2bee4 · #d29ad8 · #bf77c8 · #b04abd · #864381 · #5c395a · #382936 · #1b151b · #000000
magenta
#ffffff · #f9f0f2 · #f6e1e8 · #f0bbcc · #e895b3 · #e0699f · #c84281 · #8b4566 · #66364b · #402731 · #1b1617 · #000000
gray
#ffffff · #f0f0f0 · #e6e6e6 · #c9c9c9 · #adadad · #919191 · #757575 · #5c5c5c · #454545 · #2e2e2e · #1b1b1b · #000000
gray-cool
#ffffff · #edeff0 · #dfe1e2 · #c6cace · #a9aeb1 · #8d9297 · #71767a · #565c65 · #3d4551 · #2d2e2f · #1c1d1f · #000000
gray-warm
#ffffff · #f0f0ec · #e6e6e2 · #cac9c0 · #afaea2 · #929285 · #76766a · #5d5d52 · #454540 · #2e2e2a · #171716 · #000000
How U.S. Web Design System compares
Design systems that score higher: Adobe Spectrum (88.59), IBM Carbon (88.46).
Other audits: Adobe Spectrum · IBM Carbon · Salesforce Lightning 2 · GitHub Primer · Atlassian · Tailwind CSS · Ant Design · Material UI v4 · Radix UI · Shopify Polaris — or see the full ranking.
Want a palette that scores higher? The Palette Generator builds ramps from any base color with even perceptual steps and a short contrast span.