Accessible Color Palette Generator: WCAG AA/AAA, Tailwind

Generate accessible design system color palettes compliant with WCAG 2.2 contrast ratios and export directly to Tailwind CSS.

Accessible colour palette: WCAG contrast ratios and example

From one base colour, the tool builds a five-role palette (surface, primary, accent, dark neutral, soft tint) and measures the contrast of each colour on white and on the dark background #0f172a. The badge follows the WCAG thresholds: 7:1 for AAA, 4.5:1 for AA, 3:1 for large text (AA Large badge).

Method

  • The base colour is converted to HSL (hue, saturation and lightness keep their decimals; only the RGB result is rounded). Each harmony sets 5 colours: in complementary mode, surface (same hue, 95% lightness), primary (lightness kept between 35 and 65%), accent (hue + 180°, 50% lightness), dark neutral (15% saturation, 20% lightness) and a soft accent tint (92%).
  • WCAG relative luminance: each sRGB channel c = value ÷ 255 is linearised (c ÷ 12.92 if c ≤ 0.04045, otherwise ((c + 0.055) ÷ 1.055)2.4), then L = 0.2126 R + 0.7152 G + 0.0722 B.
  • Contrast = (lighter L + 0.05) ÷ (darker L + 0.05).

Worked example

Base #3b82f6, complementary mode (HSL 217.2°, 91.2%, 59.8%). The primary stays #3b82f6, since its lightness is already between 35 and 65%: 3.68:1 on white, so AA Large only, and 4.85:1 on #0f172a (AA). The orange accent #f29b0d only works on the dark background (8.05:1, AAA; 2.22:1 on white). The neutral #2b313b reaches 13.08:1 on white.

Limits

  • Only two backgrounds are tested; contrast between two palette colours is not measured. To convert a single colour between HEX, RGB, HSL and CMYK and read its contrast on white and black, use the colour converter instead.
  • The 3:1 threshold applies to large text (18 pt, or 14 pt bold) and to UI components (criterion 1.4.11), not to body text.
  • The Tailwind export lists the 5 colours as surface, primary, accent, dark and support.

Sources and dates: W3C, WCAG 2.2 (criteria 1.4.3, 1.4.6 and 1.4.11, glossary "relative luminance"), Recommendation of 12 December 2024; linearisation threshold 0.04045 (0.03928 before May 2021, no effect on 8-bit values) (checked 10/14/2026).

Frequently Asked Questions

What contrast ratio does WCAG require for text?

Level AA requires at least 4.5:1 for body text and 3:1 for large text (18 pt, or 14 pt bold). Level AAA raises this to 7:1 and 4.5:1.

Why does blue #3b82f6 fail AA on white?

Its contrast on white is about 3.7:1, below the 4.5:1 threshold for body text. It works for a button or a large heading (3:1), not for a paragraph.

Is white text on a bright colour always readable?

No. White has a relative luminance of 1, so an orange such as #f29b0d only gives 2.2:1 against it. On the dark background #0f172a, the same orange reaches 8:1.

Which WCAG version does the tool apply?

The contrast thresholds and luminance formula of WCAG 2.2, the W3C Recommendation of 12 December 2024, which match WCAG 2.1 on this point. Linearisation uses the 0.04045 threshold.

Is this tool really free?

Yes, all tools on Kristools are 100% free and accessible without registration.

Is my data protected?

Yes. All processing is performed directly and securely inside your browser. No personal data is sent to our servers.