Pick a text color and a background color to get the WCAG contrast ratio, a live rendered preview, and a one-click accessible fix when a pair fails.
Enter valid 3 or 6-digit HEX codes for both colors.
Large text looks like this
Normal body text at 16px reads like this - the size most paragraphs, labels and captions actually use.
UI componentEverything runs in your browser - no colors are ever uploaded
See real headings, body copy and a UI component rendered in your exact colors - not just a flat swatch.
Four badges cover normal text, large text and UI components against both WCAG levels - no guessing which rule applies.
When a pair fails AA, get a ready-to-use color for either side - closest match to your original, no manual hunting.
No sign-up, no watermark. Check as many color pairs as you like, entirely in your browser.
Type HEX codes, use the color pickers, or grab colors from your screen with the eyedropper.
The contrast ratio, a live preview and AA/AAA pass status for text and UI components appear instantly.
If a pair fails, tap a suggested color to swap it in - the closest accessible shade to what you started with.
At least 4.5:1 for normal text, and 3:1 for large text (24px+ or 19px+ bold) and for meaningful UI components like buttons, icons and form borders.
AA is the standard most sites and audits target. AAA is stricter - 7:1 for normal text and 4.5:1 for large text - and is usually reserved for content aimed at low-vision readers.
Larger, bolder strokes stay legible at lower contrast than small body text, so WCAG relaxes the minimum ratio for text at 24px or larger (or 19px and bold).
Yes. The UI components badge applies the 3:1 minimum WCAG requires for the visual boundaries of active controls, like input borders, icons and focus outlines.
No. Every calculation happens locally in your browser. Nothing you type or pick is sent to a server.
No install, no account. Just enter two colors and read the result.
Try it now