Sam Joyce

Nº 008lab · type1 island loads on viewHow to read the figures

Contrast on one hue

A twelve-step OKLCH ramp from one hue, with every WCAG ratio computed live.

Contrast on one hue

oklch · h 165 · c 0.085

This site’s tokens on hue 165

  • --washL 0.93 · 1.12below 3:1
  • --signalL 0.50 · 5.30AA
  • --signal-hiL 0.42 · 7.42AAA
165°
0.085
Background
In sRGB
7 of 12
Body text, 4.5:1
5 steps
Large text and UI, 3:1
7 steps
Background
#f8f5f1
:root {
  --h165-01: #c2ffea; /* clipped */
  --h165-02: #aaf3d2;
  --h165-03: #93dbbb;
  --h165-04: #7cc3a4;
  --h165-05: #65ac8e;
  --h165-06: #4f9578;
  --h165-07: #387f63;
  --h165-08: #206a4f;
  --h165-09: #00553c; /* clipped */
  --h165-10: #004129; /* clipped */
  --h165-11: #002e17; /* clipped */
  --h165-12: #001c07; /* clipped */
}
Describe this figure

Hue 165, chroma 0.085: 7 of 12 steps in sRGB; 5 pass 4.5:1 and 7 pass 3:1 on paper.

  1. Step 1, #c2ffea, clipped: 1.03 to 1 on paper, below 3:1.
  2. Step 2, #aaf3d2: 1.17 to 1 on paper, below 3:1.
  3. Step 3, #93dbbb: 1.48 to 1 on paper, below 3:1.
  4. Step 4, #7cc3a4: 1.89 to 1 on paper, below 3:1.
  5. Step 5, #65ac8e: 2.46 to 1 on paper, below 3:1.
  6. Step 6, #4f9578: 3.27 to 1 on paper, AA large, 3:1 for UI.
  7. Step 7, #387f63: 4.41 to 1 on paper, AA large, 3:1 for UI.
  8. Step 8, #206a4f: 5.97 to 1 on paper, AA.
  9. Step 9, #00553c, clipped: 8.17 to 1 on paper, AAA.
  10. Step 10, #004129, clipped: 10.8 to 1 on paper, AAA.
  11. Step 11, #002e17, clipped: 13.8 to 1 on paper, AAA.
  12. Step 12, #001c07, clipped: 16.5 to 1 on paper, AAA.

Things to try

  • Switch the background from paper to sheet and watch step 7. It goes from 4.41:1 to 4.63:1 and crosses the line for body text, though the two backgrounds look almost the same.
  • Push the chroma cap to 0.2. On this hue every step clips: sRGB has no room for that much colour at any lightness.
  • Choose dark paper. The badges move to the other end of the ramp, and step 7 is short of 4.5:1 on both: 4.41:1 on paper, 3.88:1 on dark paper.

How it works

The ramp holds hue and chroma still and walks OKLCH lightness from 0.98 down to 0.18 in twelve equal steps. OKLCH is built so that equal steps in L look roughly equal, which makes it a good space for ramps.

Not every OKLCH colour exists on a screen. Converting a step to sRGB can push a channel below 0 or above 1; the figure clips it to the nearest edge and hatches the swatch. Constant chroma clips at both ends, because very light and very dark colours have little room for colour. At the default cap of 0.085, 7 of the 12 steps fit. A palette meant for real use would taper chroma towards the ends instead.

Each ratio is WCAG 2.x contrast: the two relative luminances, each plus 0.05, larger divided by smaller. AA asks 4.5:1 for body text, and 3:1 for large text and for the edges of controls. AAA asks 7:1. The 3:1 UI badge marks a step that will do for a border or an icon but not for body text. Show the trick lays out every pair of steps, so you can see which two make a readable text and background.

This is the code that checks this site’s own tokens. At hue 165 the figure lists --wash, --signal and --signal-hi. --signal is oklch(0.50 0.085 165), which is where the default chroma comes from.

Keyboard

Key Action
Tab Move between the sliders, background and buttons
Arrow keys Change the focused slider or background
Page Up, Page Down Change a slider in larger steps
Home, End Jump to a slider’s ends

Published

More from the lab

Nº 007Previous

Rag

text-wrap set to wrap, balance and pretty, side by side, with no JavaScript files.

lab · type

Nº 009Next

Wake on message

Services that sleep until a message arrives, wake with their state, and doze off again.

lab · systems