The guides
Read in order if you are starting a palette from nothing; the first three cover choosing and validating one, and the last three cover the technical decisions underneath it.
- WCAG color contrastWhat the ratio measures, the AA and AAA thresholds for body text, large text and UI components, which elements are exempt, and how to repair a failing pair without abandoning a brand color.
- How to build an accessible color paletteStart from the pair that has to pass, expand into ramps, assign roles, then measure the nine pairings an interface actually renders — instead of repairing a palette afterwards.
- How to choose a color paletteA repeatable order: decide what the palette has to do, fix the neutral, pick one anchor hue, choose a harmony for a reason, and test it on a layout rather than a swatch strip.
- OKLCH vs HSLWhy HSL lightness is not perceptual, what that does to a 50-950 ramp with real numbers, how gamut mapping works, and when HSL is still the right tool.
- Dark mode color palettesWhy inverting a light theme fails, elevation as lightness rather than shadow, what to do with saturated accents, and a token structure that serves both themes.
- From a color palette to design tokensPrimitive and semantic layers, naming that survives a rebrand, and the same palette expressed as CSS custom properties, SCSS, Tailwind v3 and v4, and DTCG JSON.
Or read it as one page
Color for interfaces is the same subject matter as a single reference document — harmonies, formats, contrast, accessible palettes, dark mode and tokens in one place. The guides above go deeper on each; the reference is the faster read.
The tools these guides use
Every guide links to the tool that checks the thing it describes, and every one of those tools runs entirely in your browser. The full list is on the tools page.