WCAG Color Contrast Checker & Palette Generator
Test any text and background colour against the WCAG accessibility standard, see a live preview, and get the closest colour that passes. Then build a full palette with tints, shades and colour harmonies, and copy it as CSS variables.
1. Pick your colours
Accepted formats: HEX (#1f2937 or #fff), rgb(31, 41, 55) and hsl(215, 28%, 17%).
2. Closest colours that pass
Contrast result
Large text means at least 24px regular, or 18.66px bold. UI components are things like button borders and form fields.
Live preview
Normal text sample. The quick brown fox jumps over the lazy dog.
ButtonPalette generator
What colour contrast means
Colour contrast is the difference in brightness between text and the background behind it. The Web Content Accessibility Guidelines (WCAG) turn that difference into a ratio from 1:1, which is no contrast at all, to 21:1, which is black on white. The higher the ratio, the easier the text is to read, especially for people with low vision or colour blindness and for anyone looking at a screen in bright light.
The WCAG targets to aim for
- Level AA, normal text: at least 4.5:1.
- Level AA, large text: at least 3:1.
- Level AA, interface components and graphics: at least 3:1, for example button borders, icons and form fields.
- Level AAA: at least 7:1 for normal text and 4.5:1 for large text.
Level AA is the usual goal for websites. AAA is stricter and not always possible for every colour pair.
How to fix low contrast without losing your brand
- Keep your brand colour for large areas, logos and buttons, and use a darker shade of it for small text.
- Use the "closest colours that pass" suggestions above. They keep your hue and only change the lightness.
- Check grey text on white with extra care. Light grey placeholder text and captions are one of the most common failures.
- Do not rely on colour alone to show meaning. Add an icon, a label or an underline as well.
Using the palette generator
Enter a base colour and the tool builds ten tints and shades that share its hue, so they always look like part of the same family. It also shows classic colour harmonies: complementary, analogous and triadic. Copy the generated CSS variables into your stylesheet and use them across your site. Then test your real text and background combinations in the checker above, because a nice-looking palette is not automatically an accessible one.
Limits of this checker
The checker compares two solid colours using the WCAG 2.x formula. It does not analyse images, gradients or semi-transparent layers, and it does not replace testing with real users or assistive technology.
Frequently asked questions
What is a good contrast ratio?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text and interface components such as buttons and form borders. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is at least 24 CSS pixels (18 point) in regular weight, or at least about 18.66 pixels (14 point) in bold.
Why does colour contrast matter?
Low contrast is hard to read for people with low vision or colour blindness, and for anyone using a phone in bright sunlight. Many accessibility rules and procurement requirements refer to WCAG, so meeting level AA is a common target.
Does the checker support transparency or gradients?
No. It compares two solid, opaque colours. For text over images or gradients, test the colour at the hardest spot, where the background is closest to the text colour.
How is the closest passing colour found?
The tool keeps the hue and saturation of your text colour and changes only its lightness, in small steps, until the contrast target is reached. This keeps the result as close to your brand colour as possible.
How are the palettes generated?
Tints and shades keep your colour's hue and saturation and change the lightness. Harmonies rotate the hue around the colour wheel. They are good starting points, not a finished brand palette.
Is my data sent to your server?
No. Everything runs in your browser with JavaScript. The colours you enter are not uploaded or stored by us.
Need a brand palette that works everywhere?
Our designers create complete brand identities, from logo and colours to typography and brand guidelines.