Check contrast. Build a color scale.
Test any text/background pair against WCAG AA and AAA, then generate a tint-and-shade scale from your brand color.
How to check color contrast
- Pick a text color and a background color.
- Read the contrast ratio and the WCAG AA / AAA pass-or-fail badges.
- Adjust either color until it passes for the text size you need.
- Generate a tint-and-shade scale from your base color and copy any value.
What the WCAG levels mean
WCAG sets a minimum contrast of 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at the stricter AAA. Meeting AA is the common target for accessible, readable interfaces.
Why shades and tints matter
One brand color is rarely enough — you need lighter tints for backgrounds and darker shades for text and hover states. Generating an even scale from your base color gives you a consistent, accessible set to work from.
Frequently asked questions
What is a good contrast ratio?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1. Higher is more readable.
What's the difference between AA and AAA?
AA is the widely-used accessibility target; AAA is a stricter level for maximum readability. The tool shows pass/fail for both.
What are tints and shades?
A tint is a color mixed with white (lighter); a shade is mixed with black (darker). Together they form a scale around your base color.
Can I use my brand color?
Yes — pull your saved brand primary in one click and generate the scale from it.
Is it free?
Yes, completely free with no signup, and nothing is uploaded.