⤺ color picker

Color contrast checker

Text and background color contrast analyzer based on the WCAG (Web Content Accessibility Guideline) formula.

Contrast ratio
7.50
Contrast rating
5/5
Normal text contrast rating
3/3
Large text contrast rating
3/3
Example n. 2

Red was ruby, green was fluorescent, yellow was simply incandescent. Color was life. Color was everything. Color, you see, was the universal sign of magic.

Tahereh Mafi, Furthermore

How it works?

Our color contrast tester is based on the Web Content Accessibility Guidelines (WCAG).
The basic parameter is the color contrast ratio, which is calculated according to a special formula.
According to WCAG, level AA (minimum) requires that the contrast ratio be at least 4.5:1 for normal text and 3:1 for large text.
Level AAA (enhanced) 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 (usually 18.66px) bold or larger text, or 18-point (usually 24px) unbold or larger text.

Analysis of results

For normal and large text:
- 3/3: WCAG AAA (enchanced) passed.
- 2/3: WCAG AA (minimum) passed.
- 1/3: Test failed.

Contrast ratio greater than 12.00

The result is ideal for any type of text.

Contrast ratio 7.00-12.00

Normal text:
- WCAG AA (minimum): passed
- WCAG AAA (enchanced): passed
Large text:
- WCAG AA (minimum): passed
- WCAG AAA (enchanced): passed

Contrast ratio 4.50-6.99

Normal text:
- WCAG AA (minimum): passed
- WCAG AAA (enchanced): failed
Large text:
- WCAG AA (minimum): passed
- WCAG AAA (enchanced): passed

Contrast ratio 3.00-4.49

Normal text:
- WCAG AA (minimum): failed
- WCAG AAA (enchanced): failed
Large text:
- WCAG AA (minimum): passed
- WCAG AAA (enchanced): failed

Contrast ratio less than 3.00

Normal text:
- WCAG AA (minimum): failed
- WCAG AAA (enchanced): failed
Large text:
- WCAG AA (minimum): failed
- WCAG AAA (enchanced): failed