Color Contrast Checker
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
What is Color Contrast Checker
This tool measures the contrast ratio between a text color and a background color, then checks it against the WCAG 2.1 accessibility guidelines. It shows a live preview of both colors together and tells you whether the pair passes AA or AAA for normal text and large text, so you can catch readability problems before they reach production.
How to use
- Pick or type the text color in the first field, as a HEX code.
- Pick or type the background color in the second field.
- Check the contrast ratio and the pass/fail badges for AA and AAA.
- Click the swap button to test the colors in reverse.
- Copy the URL to share the exact pair with your team.
When to use it
Picking body text for a new design and not sure it is readable enough? Enter your text color and background, for example #767676 on #FFFFFF, and you get a 4.54:1 ratio: a pass for AA normal text but a fail for AAA. That is the gap between an accessible product and a flagged audit, whether you are reviewing a client site or shipping your own app.
Frequently asked questions
What is a good contrast ratio for text?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and up). WCAG AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
What is the maximum possible contrast ratio?
21:1, the ratio between pure black (#000000) and pure white (#FFFFFF). No color pair can exceed it.
Why did my colors fail AA but the design still looks fine to me?
Contrast ratio measures accessibility, not personal taste. Someone with low vision, or anyone viewing a screen in bright sunlight, needs more contrast than a pair that looks fine to typical vision.
Does this tool check color blindness too?
No. This tool checks luminance contrast per the WCAG formula, which benefits all users including many forms of color blindness, but it does not simulate specific color vision deficiencies.
Can I share this tool with my inputs pre-filled?
Yes. The URL updates automatically as you pick colors. Copy it from the address bar or use the Share button, anyone who opens the link sees your exact colors ready to go.
Related tools
Aspect Ratio Calculator
Calculate aspect ratios, find a missing width or height, and resize images or video while keeping the same proportions. Free and instant.
Base64 Decoder
Decode Base64 strings to plain text instantly in your browser. Supports full Unicode output including emojis. Free online Base64 decoder.
Base64 Encoder
Encode any text to Base64 instantly in your browser. Supports Unicode, emojis and special characters. Free online Base64 encoder.