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