Toolzie

Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards

15.0:1
Contrast Ratio
Normal Text (AA): PASS
Normal Text (AAA): PASS
Large Text (AA): PASS
Large Text (AAA): PASS
Live Preview
The quick brown fox jumps over the lazy dog.
Large Text — 24px or 18px Bold
Quick Reference — Common Color Combinations
✅ Black (#000) on White (#fff) — 21:1 (AAA)
✅ Navy (#0f172a) on White (#fff) — 15:0:1 (AAA)
✅ White (#fff) on Indigo (#6366f1) — 7.7:1 (AAA)
⚠️ Gray (#6b7280) on White (#fff) — 4.6:1 (AA)
❌ Gray (#9ca3af) on White (#fff) — 2.8:1 (FAIL)
❌ Yellow (#ffeb3b) on White (#fff) — 1.1:1 (FAIL)

You Might Also Like

Color Converter Color Palette Generator Color Picker from Image

Frequently Asked Questions

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. Normal text needs at least 4.5:1 (AA) or 7:1 (AAA). Large text (18px+ bold or 24px+ regular) needs 3:1 (AA) or 4.5:1 (AAA).

What is a good contrast ratio?

A good contrast ratio is at least 4.5:1 for normal text (WCAG AA). For enhanced accessibility (WCAG AAA), aim for 7:1 or higher. The maximum possible contrast ratio is 21:1 (pure black on pure white).

How do you check color contrast?

Enter the foreground (text) color and background color in HEX format. The tool calculates the relative luminance of each color using the WCAG formula and divides them to get the contrast ratio. It then reports whether the combination passes AA and AAA standards for normal and large text.

What colors should I use for accessible design?

Use dark text on light backgrounds (e.g., #0f172a on #ffffff gives ~15:1) or light text on dark backgrounds. Avoid low-contrast combinations like gray on white (#999 on #fff is only 2.7:1). Tools like this contrast checker help you verify before publishing.