Enter a base color and get a full tint-to-shade palette, with real WCAG contrast ratios and AA/AAA badges calculated for every single swatch.
Every ratio is calculated locally — nothing is sent anywhere.
Relative luminance and contrast ratio use the exact gamma-corrected formulas from the WCAG spec, not an approximation.
Every swatch shows pass/fail badges for normal and large text at both WCAG levels.
Just pick a base hue — the full tint-to-shade scale and its text-color guidance are generated for you.
Build a usable, accessible color scale from a single brand color in seconds.
Choosing colors that look good is easy; choosing colors that everyone can actually read is harder. The Web Content Accessibility Guidelines (WCAG) define a precise, testable formula for how much contrast text needs against its background, based on how the human eye perceives brightness rather than raw RGB distance. This tool applies that exact formula to every swatch in your palette, so you can pick a shade for text or for a background with real numbers instead of guesswork.
Each of the red, green and blue channels is gamma-corrected using the WCAG sRGB formula, then combined with the weights 0.2126, 0.7152 and 0.0722, reflecting how much each color contributes to perceived brightness.
The lighter and darker relative luminance values are combined as (L1 + 0.05) / (L2 + 0.05), producing a ratio between 1:1 (identical) and 21:1 (pure black on pure white).
WCAG relaxes the requirement for large text (roughly 18pt, or 14pt bold and up), since bigger glyphs remain legible at lower contrast than small body copy.
Varying only lightness (and slightly, saturation) keeps every swatch recognizably part of the same color family, which is what makes a tint-to-shade scale feel cohesive in a real design system.
Questions about the contrast math, the palette scale and your privacy.
This tool applies the official WCAG formula: each sRGB channel is gamma-corrected, combined into a relative luminance using the weights 0.2126 red, 0.7152 green and 0.0722 blue, and then the lighter and darker luminance values are compared as (L1 + 0.05) / (L2 + 0.05). No approximation is used.
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and up). Level AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
Each swatch is compared against both pure white and pure black text, and this tool recommends whichever produces the higher contrast ratio. On light swatches black usually wins; on dark swatches white usually wins.
Your base color is converted to hue, saturation and lightness. Ten lightness steps are then generated from near-white to near-black while keeping the same hue, with saturation gently reduced near the extremes so the palette stays natural instead of muddy.
No. Every calculation, from HSL conversion to contrast ratios, runs locally in your browser. Your last color is optionally remembered in your browser's local storage only, purely for convenience.