Color and contrast: making palettes readable
How WCAG contrast ratios work, why lightness is not brightness, and how to build a palette that passes accessibility checks.
Color decisions become accessibility decisions the moment text sits on top of them. WCAG expresses that as a contrast ratio between the foreground and background luminance, ranging from 1:1 for identical colors to 21:1 for black on white. The thresholds worth memorising are 4.5:1 for normal body text and 3:1 for large text at AA.
Lightness is not perceived brightness
HSL makes it easy to produce a "10% lighter" variant, but equal lightness values across different hues do not look equally bright. Yellow at 60% lightness reads far brighter than blue at the same value, so a palette that looks balanced on the wheel can still fail a measured check.
Never rely on hue alone
Color-blind users cannot separate some hue pairs at all. Anything encoded by color—status, chart series, validation state—needs a second signal such as an icon, a label, or a pattern.
A workflow that holds up
Pick a base color, derive the surrounding scale, then measure the pairs you actually intend to ship rather than the whole grid. Prune steps that fail instead of adjusting the threshold, and record the passing combinations as tokens so nobody re-derives them by eye.
Verify before you commit
Measure pairs with Contrast Checker, translate values with Color Converter, and generate candidate scales with Palette Generator. The Color Toolkit collection groups the whole workflow.
Try related tools
Keep exploring
- learnHow to use Contrast CheckerCheck WCAG AA/AAA contrast ratios for text colors. A practical guide to Contrast Checker: when it fits, how to get a reliable result, and the mistakes worth avoiding.
- learnGetting started with Palette GeneratorGenerate complementary, analogous, and triadic palettes from a base HEX. A practical guide to Palette Generator: when it fits, how to get a reliable result, and the mistakes worth avoiding.
- collectionColor ToolkitConvert, mix, and audit colors—HEX/RGB/HSL conversion, palettes, gradients, tints, and WCAG contrast checks. Browse this curated wowTools collection of local
- compareHEX vs RGB Color NotationTwo ways to write the same color in CSS—compare HEX codes and rgb() notation for readability, alpha support, and tooling.
- compareRGB vs HSL Color ModelsChannel-based color versus hue, saturation, and lightness—compare which model is easier to adjust and theme. Compare approaches side by side, then try matching
- compareTints vs ShadesMixing a base color toward white or toward black—compare tints and shades for building UI color scales. Compare approaches side by side, then try matching
- landingColor Palette ToolsBuild and verify palettes in your browser—convert HEX/RGB/HSL, sample images, derive scales, and check contrast. Curated wowTools landing with local browser
- glossaryContrast ratioContrast ratio compares the relative luminance of two colors on a scale from 1:1 to 21:1, and it determines whether text on a background is legible. Related wowTools tools and further reading are linked from this glossary entry.
- glossaryHSLHSL describes color as hue, saturation, and lightness, which makes generating tints, shades, and hover states far easier than adjusting RGB channels. Related wowTools tools and further reading are linked from this glossary entry.
- glossaryWCAGWCAG is the Web Content Accessibility Guidelines, a set of testable success criteria organised into A, AA, and AAA conformance levels. Related wowTools tools and further reading are linked from this glossary entry.