Color contrast checker

Color contrast checker

Check if your color scheme meet the WCAG 2 AA contrast ratio thresholds

Enter a background and a foreground color and check if the contrast ratio meet the Web Content Accessibility Guidelines

Tester and validators

5 Share

Insert colors

Background color
Foreground color

What is the color contrast?

The World Wide Web Consortium (W3C) is an international organization committed to improving the web. It is made up of several hundred member organizations from a variety of related IT industries. W3C sets standards for the World Wide Web (WWW) to facilitate interoperability and cooperation among all web stakeholders.

It was established in 1994 by the creator of the WWW, Tim Berners-Lee.

Contrast is the difference in luminance or colour that makes an object (or its representation in an image, icon or display) distinguishable.

In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.

On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression.

Contrast is important because it allows designers and marketers to actually guide the attention of visitors who come to their websites, and this is done with and without color.

WCAG 2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or for user interface components.

WCAG 2 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.

References and resources

WCAG 2 AA contrast ratio
W3C

Share this Tool

Did you like it? Share it!

Share this tool

Related tools. Try these one!

Generators, builders and validators to improve your SEO and web performances

Home Back to top of the page