Accessible Palette: Create color systems with consistent lightness and contrast

Set starting colors:

Lightness & WCAG Contrast

WCAG 2: 1
WCAG 3: 0
WCAG 2: 1.1
WCAG 3: 7
WCAG 2: 1.4
WCAG 3: 22
WCAG 2: 1.8
WCAG 3: 35
WCAG 2: 2.4
WCAG 3: 48
WCAG 2: 3.4
WCAG 3: 61
WCAG 2: 4.8..4.9
WCAG 3: 73
WCAG 2: 6.3
WCAG 3: 81
WCAG 2: 8.5
WCAG 3: 88..89
WCAG 2: 11.7
WCAG 3: 96
L: 98.2 C: 2.4 H: 19.5
#FFF8F8
L: 93.95 C: 8.1 H: 30.8
#FFE9E6
L: 85.1 C: 21.6 H: 32
#FFC8C0
L: 76.5 C: 36.7 H: 32.3
#FEA69A
L: 67.65 C: 56.6 H: 34.1
#FE7F6E
L: 57.8 C: 59.1 H: 35.2
#E26352
L: 47.6 C: 49.7 H: 35.1
#B85143
WCAG 2: 4.8
L: 40.4 C: 43.7 H: 35.1
#9C4438
L: 32.4 C: 36.1 H: 35.2
#7D372D
WCAG 3: 88
L: 23.55 C: 28.3 H: 33.2
#5D2822
L: 98.2 C: 7.8 H: 96.2
#FFFAEB
L: 93.95 C: 27.4 H: 94.1
#FEEDB9
L: 85.1 C: 69.5 H: 87.1
#FECF49
L: 76.5 C: 63.5 H: 86.3
#E3B740
L: 67.65 C: 57.1 H: 85.2
#C89F38
L: 57.8 C: 49.6 H: 84.5
#AA8630
L: 47.6 C: 42 H: 83.4
#8B6C27
WCAG 2: 4.9
L: 40.4 C: 36.6 H: 83
#765B21
L: 32.4 C: 30.6 H: 81.9
#60491B
WCAG 3: 89
L: 23.55 C: 23.6 H: 80.7
#473514
L: 98.2 C: 4.9 H: 144.2
#F4FCF4
L: 93.95 C: 17.2 H: 144.7
#D9F5DA
L: 85.1 C: 43.4 H: 143.4
#9FE5A2
L: 76.5 C: 72 H: 140.8
#5FD564
L: 67.65 C: 68.7 H: 140.4
#4CBB51
L: 57.8 C: 59.7 H: 140.5
#409D44
L: 47.6 C: 50.8 H: 140.5
#348037
WCAG 2: 4.8
L: 40.4 C: 44 H: 140.8
#2C6C2F
L: 32.4 C: 37 H: 141.2
#235726
WCAG 3: 89
L: 23.55 C: 28.7 H: 141.4
#1A401C
L: 98.2 C: 1.9 H: 229.9
#F6FBFD
L: 93.95 C: 7 H: 240
#E0F0F9
L: 85.1 C: 16.9 H: 237
#B1DBEF
L: 76.5 C: 25.9 H: 241.8
#84C5E6
L: 67.65 C: 33.8 H: 245.6
#53AFDC
L: 57.8 C: 41.1 H: 256.5
#1993D0
L: 47.6 C: 39.3 H: 261.5
#0077B2
WCAG 2: 4.9
L: 40.4 C: 34.1 H: 259.9
#006596
L: 32.4 C: 29 H: 259.5
#005179
WCAG 3: 88
L: 23.55 C: 23.2 H: 257.9
#003C5A
L: 98.2 C: 2 H: 280.6
#F9FAFE
L: 93.95 C: 7.7 H: 288.2
#ECEDFC
L: 85.1 C: 19.4 H: 289.8
#D0D2F7
L: 76.5 C: 31.2 H: 291.2
#B5B8F2
L: 67.65 C: 43 H: 292.7
#9A9EEC
L: 57.8 C: 55.6 H: 293.9
#7A82E4
L: 47.6 C: 57.6 H: 295.6
#6167C9
WCAG 2: 4.8
L: 40.4 C: 48.5 H: 297.2
#5756A6
L: 32.4 C: 38.5 H: 298.3
#494582
WCAG 3: 89
L: 23.55 C: 28.7 H: 300
#38325D
L: 98.2 C: 0.6 H: 255.5
#F9FAFB
L: 93.95 C: 1.6 H: 265.6
#ECEEF1
L: 85.1 C: 4 H: 264.5
#D0D5DC
L: 76.5 C: 6.1 H: 259.4
#B5BEC8
L: 67.65 C: 9.2 H: 263.2
#9AA6B5
L: 57.8 C: 11.9 H: 264.5
#7D8C9F
L: 47.6 C: 13.7 H: 263.7
#617388
WCAG 2: 4.8
L: 40.4 C: 11.5 H: 262.8
#526172
L: 32.4 C: 9.7 H: 265.4
#424D5B
WCAG 3: 89
L: 23.55 C: 7.4 H: 261.9
#303943
L: 98.2 C: 0 H: 0
#FAFAFA
L: 93.95 C: 0 H: 0
#EEEEEE
L: 85.1 C: 0 H: 0
#D5D5D5
L: 76.5 C: 0 H: 0
#BDBDBD
L: 67.65 C: 0 H: 0
#A5A5A5
L: 57.8 C: 0 H: 0
#8B8B8B
L: 47.6 C: 0 H: 0
#717171
WCAG 2: 4.8
L: 40.4 C: 0 H: 0
#5F5F5F
L: 32.4 C: 0 H: 0
#4C4C4C
WCAG 3: 89
L: 23.55 C: 0 H: 0
#383838

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