Color Contrast Checker - WCAG AA & AAA

Loading tool…

WCAG Color Contrast Checker

Low contrast text is one of the most common accessibility problems on the web. QodeCat Contrast Checker calculates the exact WCAG 2.1 contrast ratio between any two colors and tells you which success criteria they meet.

AA normal text: at least 4.5:1.
AA large text (24px, or 18.66px bold): at least 3:1.
AAA normal text: at least 7:1, and AAA large text: at least 4.5:1.
UI components and graphics (icons, input borders, focus rings): at least 3:1.

How it works

The official formula

Each color is converted to relative luminance using the sRGB curve defined by WCAG. The ratio is (lighter + 0.05) divided by (darker + 0.05), giving a value from 1:1 (no contrast) to 21:1 (black on white). Results are never rounded up, so 4.48:1 fails AA.

Fix failing colors quickly

When a pair fails AA, the tool keeps your hue and saturation and finds the nearest lighter or darker text color that passes. Apply it with one click and fine-tune from there.

Frequently Asked Questions

Q. Which color formats can I enter?

Hex codes like #333 or #1a2b3c and rgb() values like rgb(26, 43, 60). You can also use the color picker next to each field.

Q. What counts as large text?

WCAG defines large text as at least 18pt (24px) regular, or 14pt (about 18.66px) bold. Large text only needs 3:1 for AA.

Q. Is AA enough?

AA is the level most laws and policies require. AAA is stricter and recommended for long-form reading or audiences with low vision.