dunplab - Web tools, generators and validators for best performances dunplab - Web tools, generators and validators for best performances Menù
  1. Tester and Validators
  2. Color contrast checker
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

Insert colors

Background color
Foreground color
CHECK CONTRAST

What is the color contrast?

How does it work?

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.

Related resources

WCAG 2 AA contrast ratio
W3C

Share this tool

Did u like it? Share it!

Related tools

Try these one!