Contrast Checker

Check WCAG contrast ratios for accessible color combinations

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large bold text (24px) — Example heading

—
Contrast ratio
AA Normal
—
≥ 4.5:1
AA Large
—
≥ 3:1
AAA Normal
—
≥ 7:1
AAA Large
—
≥ 4.5:1
Your files never leave your browser. Nothing is uploaded to any server. Privacy Policy

Verify that your text meets WCAG 2.1 contrast requirements for accessibility. Pick any two colors and instantly see the contrast ratio, plus AA and AAA pass/fail status for normal and large text. Adjust colors live until you hit your target.

How to check WCAG contrast

1
Pick foreground & background

Use the color pickers or paste HEX values for both colors.

2
Read the ratio

The contrast ratio updates instantly with AA / AAA pass/fail badges.

3
Adjust if failing

If your colors fail, tweak the lightness until you meet the target.

✅
WCAG AA & AAA

Test against both AA (4.5:1) and AAA (7:1) standards for normal and large text.

🎯
Live preview

Real-time text preview using the foreground and background colors.

🎨
Easy adjustment

Tweak colors with the picker until the contrast meets your target.

🔢
Exact ratio

See the precise contrast ratio (e.g. 4.7:1) for documentation and audits.

FAQ

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios so text remains readable for users with visual impairments.

AA requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter — 7:1 for normal and 4.5:1 for large text.

Text 18pt+ (24px) regular, or 14pt+ (18.66px) bold. Larger text needs less contrast because shapes are easier to recognize.

Currently only opaque colors are checked. Always test against the actual rendered color over the background.

Many brand palettes were designed before accessibility standards. Use a darker or lighter variant for body text and keep the brand color for accents.

More free tools

🎨
Color Converter

Convert colors between HEX, RGB, HSL, HSV and CMYK formats
🎭
Color Palette Generator

Generate harmonious color palettes — complementary, triadic, analogous, monochrome
🌈
CSS Gradient Generator

Generate beautiful linear and radial CSS gradients with live preview
👁
Color Blindness Simulator

Preview images and colors as seen by users with color vision deficiency
🖼️
JPG to PNG

Convert JPG images to PNG format instantly in your browser
📦
Image Compressor

Compress JPG, PNG and WebP images without losing quality