How is the contrast ratio calculated?

WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours. Relative luminance is computed by converting each sRGB channel to linear light with a gamma curve, then weighting them 0.2126 red, 0.7152 green, and 0.0722 blue.

What contrast ratio do I need?

WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt or 14pt bold). AAA is stricter at 7:1 for normal text. This tool flags AA and AAA pass or fail for each swatch.

Why generate variants instead of just checking one colour?

A single brand colour often fails contrast as a text background, but a slightly lighter or darker shade of the same hue passes. Generating a ladder of lightness values gives you accessible options that still feel on-brand.

Does the tool change the hue of my colour?

No. It converts your colour to HSL and only adjusts the lightness channel up and down, preserving hue and saturation. That keeps every variant recognisably the same brand colour, just lighter or darker.

Is my colour sent anywhere?

No. Hex parsing, HSL conversion, and luminance maths all run in your browser. Nothing about your palette is uploaded or stored remotely.

WCAG-Accessible Colour Palette Suggestor

A brand colour rarely works as-is for text: a punchy mid-tone might look great as a button but fail WCAG contrast the moment you put a label on it. This tool takes one brand colour, generates a ladder of lighter and darker shades of the same hue, and for each one tells you whether black or white text passes AA (4.5:1) and AAA (7:1). Instead of nudging values by hand in a checker, you get an accessible palette in one step — all computed in your browser with the real WCAG luminance formula.

How it works

The maths follows the WCAG 2.1 definition exactly:

Parse the hex colour into red, green, blue (0-255), then convert to HSL so lightness can be varied independently of hue and saturation.
Generate variants by setting lightness to a spread of values (for example 95%, 80%, 65%, the original, 35%, 20%, 10%), keeping hue and saturation fixed.
For each variant, compute relative luminance: normalise each channel to 0-1, linearise it with c <= 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4, then combine as 0.2126*R + 0.7152*G + 0.0722*B.
Compute the contrast ratio against black and against white as (Llight + 0.05) / (Ldark + 0.05), and pick whichever text colour scores higher.

A ratio of 4.5 or more passes AA for normal text; 7 or more passes AAA.

Reading the result

Each swatch shows its hex, the recommended text colour, the achieved contrast ratio, and AA/AAA badges. Pick the shade that is both on-brand and comfortably above 4.5:1 for any text-bearing surface.

Notes

The 3:1 large-text threshold is more forgiving, so a swatch that fails AA for body text may still be fine for big headings. This tool only adjusts lightness, so every variant stays the same hue. All calculation is local — your colour never leaves the browser.