Salesforce Lightning 2 Color Palette — Accessibility & Quality Audit
Salesforce Lightning 2 ships 13 color ramps with 14 shades each. Chromametry scores it 86.31 / 100, ranking #4 of 11 design systems in the palette benchmark.
Open Salesforce Lightning 2 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 Salesforce Lightning 2 palette WCAG accessible?
Any two Salesforce Lightning 2 shades that are at least 7 steps apart reach 4.5:1 contrast in every ramp — that is the palette's contrast span (K). Pick text and background 7 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) | 6 of 13 |
| 4.5:1 | body text (WCAG AA) | 7 of 13 |
| 7:1 | body text (WCAG AAA) | 9 of 13 |
Quality metrics
Each metric is 0–1 (higher is better); the composite score is their geometric mean × 100.
| Metric | Salesforce Lightning 2 | What it measures |
|---|---|---|
| Contrast efficiency | 0.925 | how much of the ramp the WCAG contrast span consumes |
| Lightness linearity | 0.919 | whether perceived lightness steps evenly |
| Chroma smoothness | 0.846 | whether saturation changes without kinks |
| Hue stability | 0.937 | whether each ramp keeps its hue from light to dark |
| Spacing uniformity | 0.711 | whether adjacent shades are equally distinct (CIEDE2000) |
All 13 ramps
neutral
#000000 · #181818 · #242424 · #2E2E2E · #444444 · #5C5C5C · #747474 · #939393 · #A0A0A0 · #AEAEAE · #C9C9C9 · #E5E5E5 · #F3F3F3 · #ffffff
blue
#000000 · #001639 · #03234D · #032D60 · #014486 · #0B5CAB · #0176D3 · #1B96FF · #57A3FD · #78B0FD · #AACBFF · #D8E6FE · #EEF4FF · #ffffff
cloud-blue
#000000 · #001A28 · #0A2636 · #023248 · #084968 · #05628A · #107CAD · #0D9DDA · #08ABED · #1AB9FF · #90D0FE · #CFE9FE · #EAF5FE · #ffffff
electric-blue
#000000 · #001642 · #001E5B · #002775 · #022AC0 · #0250D9 · #066AFE · #4992FE · #5F9FFE · #7CB1FE · #A8CBFF · #D6E6FF · #EDF4FF · #ffffff
indigo
#000000 · #200647 · #1F0974 · #321D71 · #2F2CB7 · #3A49DA · #5867E8 · #7F8CED · #8E9BEF · #9EA9F1 · #BEC7F6 · #E0E5F8 · #F1F3FB · #ffffff
purple
#000000 · #240643 · #300B60 · #401075 · #5A1BA9 · #7526E3 · #9050E9 · #AD7BEE · #B78DEF · #C29EF1 · #D7BFF2 · #ECE1F9 · #F6F2FB · #ffffff
red
#000000 · #300C01 · #4A0C04 · #640103 · #8E030F · #BA0517 · #EA001E · #FE5C4C · #FE7765 · #FE8F7D · #FEB8AB · #FEDED8 · #FEF1EE · #ffffff
pink
#000000 · #370114 · #4B0620 · #61022A · #8A033E · #B60554 · #E3066A · #FF538A · #FE7298 · #FE8AA7 · #FDB6C5 · #FDDDE3 · #FEF0F3 · #ffffff
hot-orange
#000000 · #281202 · #421604 · #4A2413 · #7E2600 · #AA3001 · #D83A00 · #FF5D2D · #FF784F · #FF906E · #FEB9A5 · #FFDED5 · #FEF1ED · #ffffff
orange
#000000 · #201600 · #371E03 · #3E2B02 · #5F3E02 · #825101 · #A96404 · #DD7A01 · #F38303 · #FE9339 · #FFBA90 · #FEDFD0 · #FFF1EA · #ffffff
yellow
#000000 · #281202 · #2E2204 · #4F2100 · #6F3400 · #8C4B02 · #A86403 · #CA8501 · #D79304 · #E4A201 · #FCC003 · #F9E3B6 · #FBF3E0 · #ffffff
teal
#000000 · #071B12 · #072825 · #023434 · #024D4C · #056764 · #0B827C · #06A59A · #03B4A7 · #01C3B3 · #04E1CB · #ACF3E4 · #DEF9F3 · #ffffff
green
#000000 · #071B12 · #0C2912 · #1C3326 · #194E31 · #396547 · #2E844A · #3BA755 · #41B658 · #45C65A · #91DB8B · #CDEFC4 · #EBF7E6 · #ffffff
How Salesforce Lightning 2 compares
Design systems that score higher: Adobe Spectrum (88.59), IBM Carbon (88.46), U.S. Web Design System (87.67).
Other audits: Adobe Spectrum · IBM Carbon · U.S. Web Design System · 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.