Color Contrast Checker

What is color contrast?

Contrast is a relationship.

Color contrast describes the difference between a foreground color and the background behind it.

A color is therefore never “accessible” on its own. Dark text may work perfectly on a light background and become difficult to read as soon as that background changes.

Choose your foreground and background and Qolorio calculates the contrast ratio between them.

What does the contrast ratio mean?

Contrast ratios run from 1:1 for identical colors up to 21:1 for the strongest possible light–dark contrast.

A higher number usually means the foreground is easier to distinguish from its background.

Qolorio compares the result with common WCAG accessibility requirements for text and interface elements.

For WCAG AA:

Normal text generally needs 4.5:1.

Large text generally needs 3:1.

For the stricter WCAG AAA level:

Normal text needs 7:1.

Large text needs 4.5:1.

For non-text contrast, WCAG AA uses 3:1 for visual information needed to identify a user interface component or its state, and for parts of graphics needed to understand the content.

This does not mean every border, icon or decorative graphic needs 3:1. The requirement applies when that visual information is necessary to identify, operate or understand the element.

Whether text qualifies as “large text” depends on its actual size and weight in the finished design, so always check the final implementation as well as the color pair.

See the difference, not just the number

A ratio is useful, but reading the actual text is better.

The live examples show the selected colors as:

• small supporting text;
• normal paragraph text;
• large text;
• a button or interface element.

This makes it easier to see what the contrast score means in practice.

Measure it. Then look at it.

Try more than HEX

You can enter colors as HEX, RGB, HSL, OKLCH or CSS color names.

Different formats describe color in different ways, but the contrast test always compares the final visible foreground and background colors.

So use whichever format is easiest for you.

Contrast is only part of accessibility

Good contrast makes content easier to see, but accessible design does not stop at a ratio.

Do not rely on color alone to communicate important information. Combine color with clear text, icons, borders, shapes or other visual cues when meaning matters.

An error message should be more than “the red one”.

Color can carry meaning. It should not carry it alone.

Checking one pair is not the same as previewing a system

Use Contrast Checker for a focused foreground-and-background decision. Use Live Canvas when you want to see several named relationships together in a website preview. Or use our powerful tool: Color Studio