Accessible Palette: Create color systems with consistent lightness and contrast

Set starting colors:

Lightness & WCAG Contrast

WCAG 2: 1
WCAG 3: 1
WCAG 2: 1.2
WCAG 3: 6
WCAG 2: 1.5
WCAG 3: 22
WCAG 2: 1.9
WCAG 3: 37
WCAG 2: 2.5
WCAG 3: 51
WCAG 2: 3.4
WCAG 3: 65
WCAG 2: 4.8
WCAG 3: 78
WCAG 2: 6.4
WCAG 3: 87
WCAG 2: 8.7..8.8
WCAG 3: 96
WCAG 2: 11.2
WCAG 3: 102..103
L: 98.2 C: 2.5 H: 19.6
#FFF8F8
L: 93.9 C: 8.1 H: 30.8
#FFE9E6
L: 85 C: 22 H: 30.5
#FFC7C0
L: 76.2 C: 37.3 H: 32.3
#FEA599
L: 67.4 C: 57.1 H: 34.2
#FE7E6D
L: 57.8 C: 59.1 H: 35.2
#E26352
L: 48 C: 50.6 H: 35.1
#BA5143
L: 40.2 C: 43.3 H: 35.2
#9B4438
L: 31.8 C: 35.5 H: 34.5
#7B362D
WCAG 2: 8.7
L: 24.9 C: 29.1 H: 35.2
#612B23
WCAG 3: 102
L: 98.2 C: 7.8 H: 96.3
#FFFAEB
L: 93.9 C: 27.4 H: 94.2
#FEEDB9
L: 85 C: 69.9 H: 87.2
#FECF48
L: 76.2 C: 63.2 H: 86.3
#E2B640
L: 67.4 C: 56.9 H: 85.7
#C79F38
L: 57.8 C: 49.7 H: 84.6
#AA8630
L: 48 C: 42.6 H: 83.1
#8D6D27
L: 40.2 C: 36.7 H: 83
#765B21
L: 31.8 C: 30.3 H: 81.5
#5E471A
WCAG 2: 8.8
L: 24.9 C: 24.9 H: 80.8
#4B3815
WCAG 3: 103
L: 98.2 C: 5 H: 144.3
#F4FCF4
L: 93.9 C: 17.2 H: 144.7
#D9F5DA
L: 85 C: 44.1 H: 143.4
#9EE5A1
L: 76.2 C: 72.6 H: 140.7
#5DD462
L: 67.4 C: 68.2 H: 140.5
#4CBA51
L: 57.8 C: 59.7 H: 140.5
#409D44
L: 48 C: 50.9 H: 140.6
#358138
L: 40.2 C: 44.1 H: 140.9
#2C6C2F
L: 31.8 C: 36.2 H: 140.9
#235525
WCAG 2: 8.8
L: 24.9 C: 29.8 H: 140.8
#1C431D
WCAG 3: 103
L: 98.2 C: 2 H: 230
#F6FBFD
L: 93.9 C: 7.3 H: 238.3
#DFF0F9
L: 85 C: 17 H: 237.1
#B1DBEF
L: 76.2 C: 26.3 H: 241.1
#82C5E6
L: 67.4 C: 34.3 H: 246.4
#51AEDC
L: 57.8 C: 41.1 H: 256.5
#1993D0
L: 48 C: 39.8 H: 262
#0078B4
L: 40.2 C: 34.5 H: 261.1
#006496
L: 31.8 C: 28.6 H: 258.9
#005077
WCAG 2: 8.7
L: 24.9 C: 23.9 H: 257.7
#003F5E
WCAG 3: 102
L: 98.2 C: 2.1 H: 280.6
#F9FAFE
L: 93.9 C: 7.7 H: 285.7
#EBEDFC
L: 85 C: 19.5 H: 288.9
#CFD2F7
L: 76.2 C: 30.7 H: 290.6
#B4B8F1
L: 67.4 C: 42.5 H: 292.3
#999EEB
L: 57.8 C: 55.1 H: 293.8
#7A82E3
L: 48 C: 57.5 H: 295.6
#6268CA
L: 40.2 C: 48 H: 296.9
#5656A5
L: 31.8 C: 37.4 H: 298.3
#48447F
WCAG 2: 8.7
L: 24.9 C: 29.8 H: 299.9
#3B3562
WCAG 3: 103
L: 98.2 C: 0.6 H: 255.5
#F9FAFB
L: 93.9 C: 1.7 H: 265.7
#ECEEF1
L: 85 C: 4.1 H: 264.6
#D0D5DC
L: 76.2 C: 6.5 H: 264.7
#B5BDC8
L: 67.4 C: 8.9 H: 267.3
#9BA5B4
L: 57.8 C: 11.6 H: 267.7
#7F8C9F
L: 48 C: 13.8 H: 270.3
#657389
L: 40.2 C: 11.7 H: 269.2
#546072
L: 31.8 C: 9.6 H: 267.6
#424C5A
WCAG 2: 8.7
L: 24.9 C: 7.9 H: 267
#343C47
WCAG 3: 103
L: 98.2 C: 0 H: 0
#FAFAFA
L: 93.9 C: 0 H: 0
#EDEDED
L: 85 C: 0 H: 0
#D4D4D4
L: 76.2 C: 0 H: 0
#BCBCBC
L: 67.4 C: 0 H: 0
#A4A4A4
L: 57.8 C: 0 H: 0
#8B8B8B
L: 48 C: 0 H: 0
#727272
L: 40.2 C: 0 H: 0
#5F5F5F
L: 31.8 C: 0 H: 0
#4B4B4B
WCAG 2: 8.7
L: 24.9 C: 0 H: 0
#3B3B3B
WCAG 3: 103

Shift color range Hue

Stop using HSL for color systems!

HSL is an alternative representation of the RGB color model. It’s the most common way to specify color in design tools, but it has an inherent fault — Lightness and Saturation don’t reflect human perception. Compare blue and green — while both have a Lightness of 50, blue looks much darker.

This becomes a problem when building a color system with HSL, as lightness and contrast are inconsistent across color levels. Following contrast recommendations from Web Content Accessibility Guidelines is barely possible when every color pair needs to be checked individually.

What is CIELAB and LCh?

Unlike the RGB, the CIELAB color model is designed to approximate human vision, and L component closely matches the human perception of lightness. It may be tricky to use it directly (just as RGB), but there are alternative representations like LCh (C is for Chroma) that work similarly to HSL.

In this color model, colors with the same specified Lightness have the same perceived lightness and WCAG contrast ratio. The same blue and green with Lightness of 50 look consistent and have a contrast ratio of 4.5:1 against white, meeting WCAG requirement.

How does Accessible Palette work?

This app uses the chroma.js library to generate color ranges with consistent lightness between levels. A few things to keep in mind:

  • Start with pasting your brand colors or tweak the default palette. Adjust C (Chroma) to make colors more or less saturated, or tweak their H (Hue).
  • Color ranges can be calculated using RGB or CIELAB. Depending on the starting color, they may produce different results. (Blue and purple in the default palette are good starting points for experimenting.)
  • The Hue of the color range can be shifted as it progresses. For example, citrus yellow can become brownish as it gets darker, instead of greenish without correction.
  • The Contrast Ratio is calculated for every color level against white background based on the current WCAG 2.1 Recommendation and an upcoming Working Draft 3.0. (They’re moving to a more accurate algorithm.)
  • Select any color swatch to recalculate Contrast Ratios against it as a background. Adjust lightness levels to reach Contrast Ratios meeting WCAG recommendations.
  • Every palette has a unique URL — save it to your Figma library or code repository to tweak or extend in the future.

All the “whys” and “hows” in a blog post: Accessible Palette: Stop using HSL for color systems

A Wildbit Labs project by Eugene Fedorenko