Atlassian Color Palette — Accessibility & Quality Audit
Atlassian ships 9 color ramps with 14 shades each. Chromametry scores it 84.23 / 100, ranking #6 of 11 design systems in the palette benchmark.
Open Atlassian 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 Atlassian palette WCAG accessible?
Any two Atlassian shades that are at least 8 steps apart reach 4.5:1 contrast in every ramp — that is the palette's contrast span (K). Pick text and background 8 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) | 7 of 13 |
| 4.5:1 | body text (WCAG AA) | 8 of 13 |
| 7:1 | body text (WCAG AAA) | 10 of 13 |
Quality metrics
Each metric is 0–1 (higher is better); the composite score is their geometric mean × 100.
| Metric | Atlassian | What it measures |
|---|---|---|
| Contrast efficiency | 0.771 | how much of the ramp the WCAG contrast span consumes |
| Lightness linearity | 0.896 | whether perceived lightness steps evenly |
| Chroma smoothness | 0.909 | whether saturation changes without kinks |
| Hue stability | 0.947 | whether each ramp keeps its hue from light to dark |
| Spacing uniformity | 0.713 | whether adjacent shades are equally distinct (CIEDE2000) |
All 9 ramps
lime
#FFFFFF · #EFFFD6 · #D3F1A7 · #BDE97C · #B3DF72 · #94C748 · #82B536 · #6A9A23 · #5B7F24 · #4C6B1F · #3F5224 · #37471F · #28311B · #000000
red
#FFFFFF · #FFECEB · #FFD5D2 · #FFB8B2 · #FD9891 · #F87168 · #F15B50 · #E2483D · #C9372C · #AE2E24 · #872821 · #5D1F1A · #42221F · #000000
orange
#FFFFFF · #FFF5DB · #FCE4A6 · #FBD779 · #FBC828 · #FCA700 · #F68909 · #E06C00 · #BD5B00 · #9E4C00 · #7A3B00 · #693200 · #3A2C1F · #000000
yellow
#FFFFFF · #FEF7C8 · #F5E989 · #EFDD4E · #EED12B · #DDB30E · #CF9F02 · #B38600 · #946F00 · #7F5F01 · #614A05 · #533F04 · #332E1B · #000000
green
#FFFFFF · #DCFFF1 · #BAF3DB · #97EDC9 · #7EE2B8 · #4BCE97 · #2ABB7F · #22A06B · #1F845A · #216E4E · #19573D · #164B35 · #1C3329 · #000000
teal
#FFFFFF · #E7F9FF · #C6EDFB · #B1E4F7 · #9DD9EE · #6CC3E0 · #42B2D7 · #2898BD · #227D9B · #206A83 · #1A5265 · #164555 · #1E3137 · #000000
blue
#FFFFFF · #E9F2FE · #CFE1FD · #ADCBFB · #8FB8F6 · #669DF1 · #4688EC · #357DE8 · #1868DB · #1558BC · #144794 · #123263 · #1C2B42 · #000000
purple
#FFFFFF · #F8EEFE · #EED7FC · #E3BDFA · #D8A0F7 · #C97CF4 · #BF63F3 · #AF59E1 · #964AC0 · #803FA5 · #673286 · #48245D · #35243F · #000000
magenta
#FFFFFF · #FFECF8 · #FDD0EC · #FCB6E1 · #F797D2 · #E774BB · #DA62AC · #CD519D · #AE4787 · #943D73 · #77325B · #50253F · #3D2232 · #000000
How Atlassian compares
Design systems that score higher: Adobe Spectrum (88.59), IBM Carbon (88.46), U.S. Web Design System (87.67), Salesforce Lightning 2 (86.31), GitHub Primer (85.45).
Other audits: Adobe Spectrum · IBM Carbon · U.S. Web Design System · Salesforce Lightning 2 · GitHub Primer · 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.