♿

contrast checker,

Contrast Checker (WCAG 2.1)

Check text/background contrast against WCAG standards.
Auto-suggests passing colors and issues compliance certificates.

♿

WCAG 2.1 AA/AAA

Full international compliance

🎯

Auto-Suggest Colors

Nearest passing color proposed

🏆

Issue Certificate

Download passing proof

🔤 Text Color

HEX

🎨 Background Color

HEX

This is normal text (16px) preview

This is bold text (16px bold)

This is large text (24px)

This is large bold text (18px bold)

Contrast Ratio

12.63 : 1

AA Pass

AA
4.5

AAA
7.0

✅

AA Normal Text

≥ 4.5:1

✅

AA Large Text

≥ 3:1

✅

AAA Normal Text

≥ 7:1

✅

AAA Large Text

≥ 4.5:1

📋 CSS Code

about,

About

A free tool to instantly check whether your web or app color combinations meet WCAG 2.1 contrast standards. Low contrast makes text hard to read for people with visual impairments.

When your colors fail, the tool automatically suggests the nearest passing color, helping you improve accessibility without drastically changing your design.

Once you pass the AA standard, you can download an official WCAG AA Compliance Certificate to share globally.

how to,

How to Use

STEP 1

Enter Colors

Click the color picker or type a HEX code/RGB directly for both text color and background color.

STEP 2

Check Results

Contrast ratio and WCAG AA/AAA pass/fail status update in real time with a live preview.

STEP 3

Issue Certificate

If you pass the AA threshold, you can download an official certificate and share it easily.

glossary,

Glossary

Contrast Ratio: A numerical value representing the difference in light between the foreground and background colors. It ranges from 1:1 (no difference) to 21:1 (black on white).
WCAG (Web Content Accessibility Guidelines): International standards established by the W3C defining how to make web content more accessible. Governments worldwide enforce compliance to these guidelines.
AA Standard: The mid-range target for contrast. Normal text requires at least a 4.5:1 ratio, while large text (18pt+) requires 3:1. This is the legal baseline for most corporate environments.
AAA Standard: The strictest WCAG standard targeting specialized accessibility needs. Requires 7:1 for normal text and 4.5:1 for large text. It can heavily restrict design choices.
Relative Luminance: The relative brightness of any point in a colorspace. It leverages mathematical gamma calculations adjusting for human eye perception to score colors on a 0 to 1 scale.
Accessibility (a11y): The practice of creating usable environments for people with disabilities, including vision impairment, cognitive constraints, and age-related decline.

faq,

FAQ

Q.What is the recommended contrast ratio for web text?: Under WCAG AA standards, normal text requires a minimum ratio of 4.5:1. Larger text (typically 18pt or 14pt bold) only requires 3:1.
Q.Does this tool simulate color blindness?: No, this version focuses exclusively on mathematically verifying contrast ratios. Please use dedicated color blindness simulation software alongside this tool.
Q.How does the algorithm calculate the ratio?: It implements the exact WCAG recommendation formula by calculating the Relative Luminance of both colors and comparing them utilizing the (L1 + 0.05) / (L2 + 0.05) scale.
Q.Should I aim for AA or AAA compliance?: The global industry standard and legal requirement for most commercial operations is the AA level. AAA is highly restrictive and generally only mandated for specialized government or disability platforms.
Q.Is my brand color data sent to a cloud server?: Never. All chromatic analysis and certificate rendering happens strictly natively within your local device's browser memory ensuring total corporate privacy.
Q.Is the certificate generated legally binding?: It is a reliable mathematical proof of your passed combinations under W3C formulas but does not replace a comprehensive third-party accessibility audit.