What contrast ratio is required for WCAG AA and AAA?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (≥18pt regular or ≥14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text.

Does this tool send my colors to a server?

No. All calculations run locally in your browser; nothing is uploaded.

Does it support 3-digit hex like #abc?

Yes. #abc is normalized to #aabbcc automatically.

Does the tool support transparency or gradients?

No. Contrast is computed for solid colors only (#RRGGBB or #RGB). For semi-transparent overlays, compute the flattened color against the background first.

Color Picker & Contrast Checker — WCAG 2.1

Pick colors & check contrast

Ad

Normal text

Almost before we knew it, we had left the ground.

Large text

Sphinx of black quartz, judge my vow.

How to use

Pick a Text and Background color using the color inputs or paste a hex value (e.g., #1a73e8 or #abc).
The tool instantly shows the contrast ratio and pass/fail badges for AA (normal/large) and AAA (normal).
Preview how the pair looks on Normal and Large text. “Large” means ≥18pt normal or ≥14pt bold.
Click Copy to copy the hex for either color.
All calculations run locally—nothing leaves your browser.

Tips

Only solid colors are supported. For semi-transparent overlays, first compute the flattened color against the background.
#RGB is auto-expanded to #RRGGBB.
For non-text UI (icons, borders), WCAG suggests ≥3:1 against the adjacent color.

FAQ

What are AA vs AAA requirements?

AA: ≥4.5:1 for normal text, ≥3:1 for large text. AAA: ≥7:1 for normal text, ≥4.5:1 for large text.

What counts as “large” text?

At least 18pt (≈24px) normal weight, or 14pt (≈18.67px) bold.

Can I enter RGB or HSL?

This tool accepts hex (#RRGGBB or #RGB) for accuracy and simplicity.

Does it work offline?

Yes—after the first load, it works without internet.

Is my data sent anywhere?

No. Everything runs locally in your browser.

Related tools

More design & text utilities:

Text Utilities Image Resizer JSON Formatter URL Tools

Prefer বাংলা? Try the বাংলা সংস্করণ.