← back to tools

Colour Accessibility Checker

Check WCAG 2.1 contrast ratios for AA & AAA compliance. Pick from image or enter hex codes. Instant pass/fail with fix suggestions.

100% browser-based — no data leaves your device
Text / Foreground
Background
🖼

Drop a design screenshot or mockup

or browse to upload

👆 Click image above to sample a colour — click foreground target, then click image, then background target

Foreground / Text
#FFFFFF
Click to pick from image
Background
#1A1812
Click to pick from image
Bulk Colour Pairs — one per line, format: #FG, #BG

Paste your design's colour pairs. Each line = one check. Hex codes only.

—
Contrast Ratio
Normal Text (16px)
The quick brown fox jumps
over the lazy dog
Large Text (24px+)
Aa Bb Cc Dd Ee
💡 Suggested Fixes — click to apply

About WCAG Contrast

What is WCAG?

Web Content Accessibility Guidelines — the international standard for accessible web design. Level AA is required by law in many countries for public-facing sites.

The ratios explained

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt+ or 14pt bold) only needs 3:1 for AA and 4.5:1 for AAA.

What counts as large text?

18px regular weight (1.125rem) or 14px bold. Decorative text, logos and inactive UI components are exempt from contrast rules.

100% private

All calculations use the Canvas API and run entirely in your browser. Images never touch a server. Works offline once loaded.