Colors
WCAG Contrast Pair Generator
Used by developers, writers, and creators worldwide.
A WCAG contrast pair generator builds a text-and-background color pairing that meets accessibility contrast requirements out of the box. Choose AA or AAA and it picks a shared hue, then searches darker text shades against a light background until the pair clears the 4.5:1 threshold for AA or the stricter 7:1 for AAA, reporting the exact ratio it achieved. Because both colors share a hue family, the result feels designed rather than random, while still being safe for body copy. Designers and developers use it to seed an accessible component theme, choose readable callout colors, or quickly demonstrate a compliant pairing in a design system. The relative luminance and contrast math run inline using the official WCAG formula, so the numbers are real, not estimated. Copy the text and background hex codes straight into CSS and you have a legible, compliant starting point in seconds.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Pick AA or AAA as your target level.
- Click Generate to build a compliant color pair.
- Check the reported contrast ratio.
- Copy the text and background hex into your CSS.
Use Cases
- •Seeding an accessible color theme for a component
- •Choosing readable text and background for a callout
- •Demonstrating a compliant pairing in a design system
- •Finding AAA-level pairs for fine print and legal text
- •Generating safe defaults for alerts and notices
Tips
- →Use AA for most UI and AAA for dense or critical text.
- →Regenerate to explore different hue families.
- →Large text can use lower-contrast pairs at 3:1.
- →Verify with the accessible text color picker for body copy.
FAQ
what is the difference between AA and AAA
AA requires a 4.5:1 contrast ratio for normal text, which suits most interfaces. AAA requires 7:1, a stricter target for maximum readability that is recommended for dense or critical text like legal copy.
why do both colors share a hue
Anchoring the text and background on the same hue keeps the pair feeling cohesive and intentional rather than clashing. The generator only varies lightness and saturation to reach the required contrast.
is the contrast math accurate
Yes. It uses the official WCAG relative-luminance formula on the sRGB channels and the standard contrast-ratio equation, so the reported ratio matches dedicated accessibility checkers.
You might also like
Popular tools from other categories that share themes with this one.