How to Use

Enter foreground

Type a colour in any format — HEX, RGB, HSL, OKLCH, OKLab, LAB, or named colours.

Enter background

Enter the background colour your text will sit on.

Check compliance

See the contrast ratio and whether it passes WCAG AA and AAA at normal and large text sizes.

What is WCAG contrast?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with low vision or colour vision deficiency. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Large text is defined as 18pt+ bold or 24pt+ regular.

About Contrast Checker

Readable text is the foundation of accessible design, and WCAG contrast ratios are the objective measure. ILikePdf Contrast Checker computes the contrast ratio between any two colours and reports pass or fail for AA and AAA thresholds on normal and large text. The live preview lets you nudge colours until they comply, then copy the winning pair. Checking is instant and local — no upload, no account, no excuses for shipping unreadable text.

How to check colour contrast Contrast Checker

Step 1: Enter a foreground colour and a background colour.

Step 2: The tool calculates the WCAG contrast ratio instantly.

Step 3: Check pass/fail status for AA and AAA on normal and large text.

Step 4: Use the slider to adjust colours until they pass.

Step 5: Copy the compliant colour pair for your stylesheet.

Common use cases for Contrast Checker

Verify text is readable before shipping a UI.
Meet WCAG AA accessibility requirements for client sites.
Pick accessible button and link colours.
Audit existing colour pairs for contrast compliance.

Pro tips

WCAG AA needs 4.5:1 for normal text and 3:1 for large text.
AAA requires 7:1 — aim for it on body copy.
The checker runs instantly with no upload.

Was this tool helpful? Rate it

Tap a star to rate.

Contrast Checker