Accessibility
WCAG contrast checker.
Validate your colour combinations against WCAG 2.1 accessibility standards. Pick colours, preview text rendering in real-time, and ensure your designs are inclusive.
Contrast checker
Quick Presets
Heading Text
This is a preview of how your text will look against the chosen background colour. Readability is critical for user experience and accessibility compliance.
Small text like captions and metadata requires even higher contrast ratios for comfortable reading.
Contrast Ratio
17.05:1
AAA
WCAG 2.1 Conformance
AA — Normal Text
≥ 4.5:1
AA — Large Text
≥ 3:1
AAA — Normal Text
≥ 7:1
AAA — Large Text
≥ 4.5:1
Guidelines
- •Large text = 18pt+ (24px) or 14pt+ (18.5px) bold
- •AA is the minimum standard for most websites
- •AAA is recommended for maximum inclusivity
How the checker works
WCAG 2.1 compliant
Tests against all four conformance levels: AA Normal, AA Large, AAA Normal, and AAA Large. Know exactly which text sizes pass at your chosen colours.
Live preview
See exactly how headings, body text, and small captions render against your background. No guessing — real-time visual feedback as you tweak colours.
CSS export
One-click copy of the CSS color and background-color declarations. Paste directly into your stylesheet and move on.
How to use it
Getting a useful result.
- Enter your text colour and the colour actually behind it. If the text sits on an image or a gradient, test against the lightest and the darkest part — the worst of the two is your real result.
- Read the ratio, not the swatch. 4.5:1 is the minimum for normal body text, 3:1 for large or bold text above roughly 24px, and 7:1 is the stricter AAA level.
- Adjust the lighter colour first. Lightening light text usually preserves the design better than darkening the background.
- Test your buttons and links as well as your paragraphs. Placeholder text in form fields and grey captions are where sites fail most often.
Contrast is not a matter of taste — it is measured, and the numbers come from the WCAG standard. Light grey text on white is the most common failure in modern design, and it reads perfectly well to a designer on a good monitor in a dark room while being genuinely hard work for someone in their forties, on a phone, outdoors.
In India this matters more than average. A large share of visitors read on a mid-range screen in daylight, and low-contrast type simply disappears in that situation. You do not lose those customers to a competitor's better offer; you lose them because they could not read yours.
It is also the accessibility rule most likely to be raised in a procurement or tender checklist, so passing it is worth having in writing. Every colour pair we ship on a client site is checked with this same calculation before it goes live.
Common questions
What ratio do I actually need?
4.5:1 for normal text and 3:1 for large text is the AA level, which is what almost every guideline, tender and accessibility audit means when it says a site must be accessible. AAA asks for 7:1 and is worth targeting for long-form reading, but it constrains your palette considerably.
Does this apply to my logo and decorative graphics?
No. Logos are explicitly exempt, and purely decorative graphics carry no requirement. It applies to text, and to the parts of an interface a person has to see to use — button edges, form field borders, icons that carry meaning on their own.
My brand colour fails. Do I have to change it?
Not usually. Keep the brand colour for large headings, buttons and blocks of colour, where the 3:1 threshold applies, and use a darker or lighter variant for body text. Most brands end up with a display colour and a reading colour for exactly this reason.
Contrast is where a brand's colours meet the people who have to read them — graphic design.