What contrast ratio does WCAG require?

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. This tool targets the normal-text thresholds.

How is the contrast ratio calculated?

It uses the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L is relative luminance derived from gamma-corrected sRGB channels and L1 is the lighter color. The result ranges from 1:1 to 21:1.

Why do some palettes get rejected?

The generator picks random colors then measures contrast. Pairs below your chosen threshold are discarded and it tries again, so every shown palette is guaranteed to pass.

Does this cover color-blind safety?

Contrast ratio addresses brightness difference, which helps low-vision and many color-blind users. It does not guarantee hue distinguishability, so still test accent colors with a color-blindness simulator.

Can I use the accent color for text?

The accent is verified against the background too, so it is safe for buttons, links or large headings that sit on the background. Always confirm in context at the real font size.

WCAG-Accessible Color Palette Generator

Accessible palettes, generated and verified

This generator produces random color combinations and only shows you the ones that pass WCAG contrast requirements. Instead of guessing whether your text is readable, every palette comes with the measured contrast ratio so you know it meets AA (4.5:1) or AAA (7:1) before you ship it.

How it works

Contrast is computed with the official WCAG formula. First each color’s relative luminance is found by linearising its sRGB channels:

channel = c / 255
linear  = channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ^ 2.4
L = 0.2126*R + 0.7152*G + 0.0722*B
ratio = (Llight + 0.05) / (Ldark + 0.05)

The tool randomly samples a background and text color, measures the ratio, and rejects the pair if it falls below your chosen threshold. It repeats until both the text and the accent color clear the bar — so the displayed palette is always compliant.

Tips and notes

Use AAA (7:1) for body copy where reading comfort matters; AA (4.5:1) is the legal minimum in most jurisdictions.
Large text (24px or 18.66px bold) only needs 3:1, so you have more freedom for headings.
Contrast alone is not full accessibility — pair it with clear focus states, hue checks, and real-device testing.