Color Contrast Checker

Check foreground and background color contrast ratios against WCAG accessibility guidelines.

color contrast checker wcag accessibility a11y

Color Setup

Contrast Ratio

0:1

This is what your body text will look like. Make sure it's easily readable for all users.

WCAG 2.1 Accessibility Checks

AA - Normal Text
Fail
Ratio > 4.5:1 (size < 18pt)
AA - Large Text
Fail
Ratio > 3.0:1 (size >= 18pt)
AAA - Normal Text
Fail
Ratio > 7.0:1 (size < 18pt)
AAA - Large Text
Fail
Ratio > 4.5:1 (size >= 18pt)

WCAG AA is the standard accessibility target for most websites and apps. It ensures text is readable by users with moderately low vision. UI components and graphic objects also need to meet a 3.0:1 contrast ratio.

No ratings yet — be the first!

💬 Comments

to leave a comment

Loading comments...

✨ Oriz AI

🤖

Hi! I'm Oriz AI. Ask me anything about the tools on this page.

BYOK-first · Puter.js fallback · 10 providers available