Color Palette & Contrast
Check accessible color pairs, preview text, and build a tint/shade palette with a contrast matrix.
Check WCAG contrast for any pair, then build a tint/shade palette and see which combinations pass.
Contrast ratio
17.85:1
Large text ≈ 18pt+ or 14pt+ bold. UI is non-text graphics / controls (WCAG 2.1). Translucent colors are flattened onto white for the ratio.
Large heading preview
Body text should stay readable. The quick brown fox jumps over the lazy dog — 1234567890.
Smaller supporting copy for captions and hints.
UI control sampleBuild a palette from one brand color
Creates lighter and darker steps you can use for buttons, surfaces, and text. Select a swatch → use it above or copy the HEX / CSS.
Quick check: which pairs are readable?
Each cell = that row’s color as text on that column’s color as background. Green passes AAA, amber passes AA, red fails for normal text. Click any cell to load it into the checker above.
| Text ↓ \ Bg → | 100 | 200 | 300 | 500 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|
| 100 | |||||||
| 200 | |||||||
| 300 | |||||||
| 500 | |||||||
| 700 | |||||||
| 800 | |||||||
| 900 |
How to use this tool
- Set foreground and background colors (HEX, rgb, or hsl).
- Read the contrast ratio and AA/AAA badges — use the live preview to confirm readability.
- Pick a brand base color to generate a 7-step palette, copy CSS variables, and click matrix cells to test any pair.
Accessible pairs before you ship UI
Pretty swatches are not enough if body text fails WCAG. DevDock computes the same relative-luminance math auditors use, then helps you expand one brand color into light and dark steps you can drop into CSS. Failures show up in the matrix before they show up in a design review.
Need to sample or convert a single color? Try the Color Picker. Shipping icons next? Use SVG to Tailwind / CSS.
FAQ
What contrast ratio do I need?
WCAG 2.1 AA needs 4.5:1 for normal text and 3:1 for large text (about 18pt+ or 14pt+ bold). AAA is stricter (7:1 / 4.5:1). Non-text UI graphics need at least 3:1.
How is the ratio calculated?
Using the WCAG 2 relative luminance formula on sRGB colors. Semi-transparent backgrounds are composited onto white, then the foreground onto that result, before the ratio is computed.
What is the color grid at the bottom?
It answers one question: if I use this palette color as text on that palette color as background, is it readable? Green = AAA pass, amber = AA pass, red = fails for normal text. Click a cell to load that pair into the checker at the top.
Is this the same as the Color Picker?
No. Color Picker is for sampling and converting one color. This tool checks accessible pairs and builds a small tint/shade scale you can ship as CSS variables.
Is my palette uploaded?
No. Everything runs in your browser.