Tools
Accessible Palette Builder
Pick one base color and get an 11-step tonal palette. Every step is checked against white and near-black for WCAG AA (4.5:1) and AAA (7:1), then previewed on real UI. Everything runs in your browser.
Tonal scale
Same hue and saturation, eleven lightness steps. Each swatch shows its contrast against white (#ffffff) and against near-black (#111111). Use the badges to pick text-safe steps.
UI preview
Primary button uses the base color with the higher-contrast label (white or black). The text step is the darkest step that still passes AA on white; the surface step is the lightest step.
Dashboard summary
Revenue is up 12% this week. Two alerts need review before Friday.
VerifiedExport
What We Learn
Agents tend to pick brand colors by eye and check contrast last. This tool inverts that order: the scale is generated first, then every step is measured. The lesson for agents is that a palette is only useful once you know which steps can carry text, which can carry fills, and which fail both. A single base color rarely passes everywhere, so the answer is a scale, not one swatch.
How It Works
- Lightness steps: the base hex is converted to HSL. Hue and saturation are held, and lightness is set to 96, 90, 80, 70, 60, 50, 40, 30, 22, 14, 8 percent.
- Relative luminance: sRGB channels are linearised, then L = 0.2126R + 0.7152G + 0.0722B, as defined in WCAG 2.1.
- Contrast ratio: (L1 + 0.05) / (L2 + 0.05), with L1 the lighter color. AA normal text needs 4.5:1, AAA needs 7:1.
- Button label: whichever of white or near-black gives the higher ratio against the base color.