Gliora
Tools

Money

Housing & transport

Life

Tools

Español

Color contrast checker (WCAG)

Color contrast checker (WCAG)

Sample text · Aa
Contrast ratio 16.32:1
AA normal text
✓ Passes
AAA normal text
✓ Passes
AA large text
✓ Passes
AAA large text
✓ Passes

Per WCAG 2.1: normal text needs 4.5:1 (AA) or 7:1 (AAA); large text needs 3:1 (AA) or 4.5:1 (AAA).

This color contrast checker works out the contrast ratio between text and background and tells you which WCAG accessibility levels it meets.

Accessible design

The contrast between text and background determines whether your content is readable. This tool calculates the ratio and shows at a glance which accessibility levels — AA and AAA, for normal and large text — it meets.

FAQ

What contrast ratio do I need?
Per WCAG 2.1, normal text needs at least 4.5:1 for AA level and 7:1 for AAA. Large text (18.66px bold or larger, or 24px or larger) drops to 3:1 (AA) and 4.5:1 (AAA).
Why does contrast matter?
Good contrast makes your content readable for everyone, including people with low vision, and it's a web accessibility requirement.
Which colour formats can I use?
Pick colours with the colour picker or type a HEX value directly (e.g. #1A202C). The ratio updates instantly as you change either colour.