Interactive lab
Contrast Checker
Type in a text color and a background color. This tool calculates the real WCAG contrast ratio between them as you type. Nothing is sent to a server, the math runs in your browser.
Try it
Check a Color Pair
Real WCAG math, calculated in your browser as you type. No values are sent anywhere.
The quick fox jumps.
Body text at a normal reading size.
21.00 : 1
AA Normal Text AA Large Text AAA Normal Text AAA Large Text
Normal text needs 4.5:1 (AA) or 7:1 (AAA). Large text (18px+, or 14px+ bold) and UI borders need 3:1 (AA) or 4.5:1 (AAA).