Free Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards. Ensure your designs are readable for everyone.

How to Check Color Contrast

Pick a text (foreground) color using the color picker or enter a HEX code.
Pick a background color.
The contrast ratio and WCAG compliance results update automatically.
Check the preview panels to see how text looks at different sizes.

WCAG Compliance Levels

AA Normal (4.5:1): Minimum contrast for normal text (under 18px or 14px bold). Required for most accessibility compliance.
AA Large (3:1): Minimum contrast for large text (18px+ or 14px+ bold). Slightly relaxed because large text is inherently easier to read.
AAA Normal (7:1): Enhanced contrast for normal text. The highest standard, recommended for critical content like body text.
AAA Large (4.5:1): Enhanced contrast for large text. Recommended for headings and important UI elements.

Why Color Contrast Matters

Accessibility: About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Sufficient contrast ensures content is readable for everyone, including people with low vision.

Legal compliance: Many countries require websites to meet WCAG 2.1 AA standards. In the US, ADA compliance often references WCAG guidelines. The EU's European Accessibility Act (EAA) takes effect in 2025.

Better UX for everyone: Good contrast improves readability in all conditions — bright sunlight on mobile screens, dim lighting, or tired eyes. It's not just about disability; it's about usability.

Common Color Combinations

Combination	Ratio	AA	AAA
Black on White	21:1	Pass	Pass
#333 on White	12.6:1	Pass	Pass
#767676 on White	4.5:1	Pass	Fail
#999 on White	2.8:1	Fail	Fail

Need to Generate Images Automatically?

Templated lets you generate images from templates via API — perfect for social media, marketing, and e-commerce.

Easy-to-use API

Our Image Automation API lets you automate image creation from templates at scale.

No-code Integrations

Integrate with popular no-code platforms like Zapier, Make and Bubble.

Customizable Templates

Create and customize from our 100+ templates gallery to match your brand and specific needs.

Integrations

Seamlessly integrate with your favorite tools

What our customers say

People love how great our product works and how we're always there to help

Rated 4.7

"Business pressures now demand almost a 24x7 operation. The difference between choosing one SaaS product or another isn't just down to the technical capabilities of each, but down to their responsiveness when it doesn't quite work. In this case, an issue blocked us from being able to use the platform as intended. Within minutes of using the live chat, the issue was not only reproduced but correctly identified. Within the hour, the hot fix had been coded, tested and applied - unblocking the bottleneck and allowing us to carry on working. This is exceptional and the reason why I can't recommend this company enough - I'm so impressed and very grateful for their hard work. Keep it up!"

March 12, 2026

Jason

"This is a clever idea, especially in concert with programmatic (AI-generated) SEO."

17 January 2024

Ryan Hoover

Creator of ProductHunt

"We were looking for tools to help our users create and edit images with templates. We tried options like Canva, but Templated.io turned out to be the perfect choice for our product. It offers an easy API to render images, and its embed editor lets us provide our users with a full editing experience without having to create complex frontend components. It's a really great tool!"

September 16, 2025

Harish

"We integrate Templated.io into our portal for custom flyer generation. The editor is amazing, and the Canva import tool is exactly what we were looking for. Massive shoutout to Pedro for the technical support. He responds incredibly fast and fixes issues in no time. Highly recommended!"

June 9, 2026

Yuan Zhuang

"Brilliant piece of software. Reasonably priced (vs Canva's outrageously expensive API), and despite a few intricacies with the editor, a really fully-featured document generation API. Really great support too from Pedro, the founder!"

August 17, 2025

Jacob Burns

"Very reliable platform. Almost no errors ever. Easy to setup templates and use the API. And AMAZING support!"

March 24, 2026

Lawrence Perera

"We booked the "Scale" package to use it as a "print product editor" and we are amazed by the features and the support! Pedro replies to every question and also implemented small hints to the API for better functions on our request. Absolutly great Software and Service!"

December 18, 2025

Sven Rißmann

südheide.media

"Templated.io is basically a an API-first graphics content designer which makes it super easy to programmatically create document and image assets. It has most basic features and it is robust and "just works". The Make.com app really makes it super simple to incorporate into automation workflows. What sets templated.io apart the most is Pedro and his super fast and service minded, solutions oriented responses."

May 26, 2025

Siavash

"Amazing API, perfect support and a lot of new features on a monthly basis."

November 26, 2025

Kalina Staykova

"Currently working through an implementation of Templated.io and the customer service has been spectacular!!! I get near immedate response and near immediate remedies. It's glorious. I wish other companies were like this!!! Strong recommendation!"

July 17, 2026

Tracy C

"The editor is easy to use, very similar to Canva and the API is simple enough to integrate on the backend."

20 February 2024

Halem Wenderson

Developer at Telvetto

Color Contrast Checker FAQs

Common questions about color contrast and WCAG accessibility

What is WCAG?

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. It defines how to make web content more accessible to people with disabilities, including guidelines for color contrast ratios.

What contrast ratio do I need?

For WCAG AA compliance (the most common requirement): 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). For WCAG AAA (enhanced): 7:1 for normal text and 4.5:1 for large text.

What is considered "large text" in WCAG?

Large text is defined as 18px (14pt) or larger for regular weight, or 14px (11pt) or larger for bold text. Large text has more relaxed contrast requirements because its larger size makes it inherently easier to read.

Is this tool free?

Yes, completely free with no limits. The contrast calculation runs entirely in your browser — no data is sent to any server.

Do I need to meet WCAG AAA?

WCAG AA is the standard requirement for most legal and organizational accessibility policies. AAA is the gold standard but is not required in most cases. However, for critical content like body text, aiming for AAA ensures the best readability.

Why does my design fail the contrast check?

Common issues include: light gray text on white backgrounds, colored text on similarly-colored backgrounds, or text overlaid on images without a solid background. The fix is usually to darken the text or lighten/darken the background.

Does contrast apply to non-text elements?

Yes. WCAG 2.1 requires a minimum 3:1 contrast ratio for UI components (buttons, form inputs, icons) and graphical objects that convey information. This is separate from the text contrast requirements.

How is the contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of the two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance. The maximum ratio is 21:1 (black on white).

Can I check contrast for color-blind users?

This tool checks luminance contrast, which is the primary accessibility metric. While it doesn't simulate color blindness specifically, sufficient luminance contrast ensures readability regardless of color vision deficiency type.

What are some accessible color combinations?

Safe combinations include: dark text (#333 or darker) on white/light backgrounds, white text on dark backgrounds (#333 or darker). Avoid: light gray on white, yellow on white, light blue on white, or any low-contrast pastel combinations.

Automate Your Image Generation Today

We can help you with a simple API and no-code integrations

Try For Free

Related Free Tools

Discover more free tools you might find useful.

View All Tools