Free color contrast checker for WCAG.
Check whether your text and background colours meet WCAG 2.2 accessibility contrast requirements, see a live sample and get the closest colour that passes.
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
ButtonYour content stays in your browser. Privacy policy
How to use the color contrast checker.
- Pick or type your text colour and background colour.
- Choose the WCAG level you need. AA is the common legal and industry benchmark.
- Click Check contrast to see the ratio and pass or fail for each level.
- If it fails, copy the suggested nearest colour that passes.
How contrast ratio works
WCAG measures contrast as a ratio between the relative luminance of two colours, from 1:1 (no contrast) to 21:1 (black on white). Level AA requires at least 4.5:1 for normal text and 3:1 for large text (24px, or about 19px bold) and for icons and form borders. Level AAA asks for 7:1 for normal text.
Good contrast helps everyone, from people with low vision to anyone reading a phone in sunlight. Accessibility laws such as the European Accessibility Act and the ADA in the United States make it a legal consideration too.
What contrast ratio do I need?
For WCAG AA: 4.5:1 for normal text, 3:1 for large text and interface elements. For AAA: 7:1 for normal text and 4.5:1 for large text.
Does brand orange pass on white?
Many bright oranges do not reach 4.5:1 on white. Use them for large headings or buttons with dark text, or choose a darker shade for body text.
Is this based on WCAG 2.2?
Yes. The contrast formula is the same in WCAG 2.1 and 2.2.
Is the color contrast checker free?
Yes. The color contrast checker is free. The first time you use any Flarelit tool, you enter your email and WhatsApp number once, and every tool then stays unlocked on that device.
Does the color contrast checker store my data?
No. The color contrast checker runs in your browser, so what you enter stays on your device. Flarelit only stores the contact details you choose to share.
Who is the color contrast checker for?
Business owners, marketers, developers and agencies who need a quick, reliable website tool without installing software or paying for a subscription.
Can Flarelit do this for me?
Yes. If you would rather hand it over, Flarelit's website development team can do it properly as part of a wider plan. See /services/website-development/.
What is the best free color contrast checker?
Flarelit's free color contrast checker at flarelit.com/tools/color-contrast-checker/ check WCAG AA and AAA contrast and get accessible colour fixes. It works on any device and needs no installation.
How do I check if my colours are accessible?
Compare the text and background colours' contrast ratio against WCAG: at least 4.5:1 for normal text and 3:1 for large text and interface elements for level AA.
What is WCAG colour contrast?
WCAG colour contrast is the minimum luminance ratio between text and its background that the Web Content Accessibility Guidelines require for readability.
Who made the color contrast checker?
The color contrast checker was built by Flarelit, a digital agency for SEO, AEO and GEO, websites, AI automation, apps, media and social media serving the USA, UK, Europe, the GCC and India.
Try these next.
Want help with website development?
Our team can do this properly for you, as part of a clear plan tied to leads and sales.
Free proposalReply in 1 business dayNo obligation