Contrast-targeted color scales

Pick key colors and a background, then say how much contrast each step must have. Every step is solved to hit its target, so text and UI tokens are accessible by construction, in light and dark.

How to build a contrast-targeted scale

  1. Add one to three key colors. Two or three keys blend in OKLCH along lightness.
  2. Set the background the scale will sit on: white, paper, night, black, or any hex code.
  3. Choose the metric, WCAG 2 contrast ratios or APCA Lc.
  4. Set the target for each step, or start from a preset, and add or remove steps, up to 16.
  5. Copy the scale as CSS variables, a Tailwind v4 @theme block or DTCG design tokens JSON.

What you can do

  • Solved to hit each target

    Every step is solved to land within 0.05 of its WCAG ratio, or within 1 of its APCA Lc value, on your background.

  • Light and dark

    Build the scale for a light background and for a dark one, so both themes get accessible steps.

  • WCAG or APCA

    Target WCAG 2 contrast ratios, or APCA Lc values as a supplementary measure.

  • Presets and custom steps

    Start from a preset set of targets, then edit, add or remove steps.

  • Key color blending

    Give two or three key colors and the scale blends between them in OKLCH along lightness.

  • Three export formats

    Copy CSS variables, a Tailwind v4 @theme block or DTCG JSON design tokens.

Frequently asked questions

What is a contrast-targeted color scale?

A scale where each step is built to have a specific contrast against your background, instead of a fixed lightness. Because the ratios are chosen in advance, you know which steps are safe for text at 4.5:1 and which for UI parts at 3:1.

How is this different from a Tailwind-style scale?

A Tailwind-style scale from 50 to 950 is spaced evenly by lightness, so its contrast against a background depends on the color. A contrast-targeted scale is spaced by the contrast you ask for on a particular background, so the accessibility of each step is known.

Should I use WCAG or APCA targets?

WCAG 2 ratios are what most standards and audits require. APCA Lc is a perceptual alternative from the WCAG 3 drafts and is supplementary to WCAG 2, so use it as extra guidance.

What contrast ratios should my steps hit?

Aim for at least 4.5:1 for body text, at least 3:1 for large text, icons and borders, and lower ratios for subtle surfaces. The presets give common starting points.

Can I use the scale in Tailwind v4 and design tokens?

Yes. Export it as CSS variables, a Tailwind v4 @theme block or DTCG JSON, which design token tools can read.