Use the free WCAG Color Contrast Checker below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why Contrast Is the Simplest Accessibility Win
Contrast is the difference in brightness between text and its background, and it decides whether words can be read at all. Light grey text on a white background may look elegant in a design tool, but for many readers, including older users and people in bright sunlight, it simply disappears. The Web Content Accessibility Guidelines, known as WCAG, set clear minimum ratios so that designers do not have to guess what readable means.
This checker measures the exact ratio between any two colors and tests it against the WCAG levels. Level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, while the stricter AAA level asks for 7 to 1 for normal text and 4.5 to 1 for large text. Large text means at least 18 points, or 14 points in bold. The tool shows a live preview of your colors at headline and body sizes, so you judge the result with your eyes as well as with the numbers.
How to Use It
Pick a text color and a background color with the color pickers, or type hex values directly. The ratio and the four pass or fail results update as you change either color, and the preview shows your exact combination at two sizes.
- Choose your text color with the first color picker.
- Choose your background color with the second picker.
- Read the contrast ratio at the top of the result.
- Check the four results: AA and AAA for normal and large text.
- If a result fails, darken the text or lighten the background in small steps until it passes.
- Use the swap button to test the reverse combination, which is often used for buttons and banners.
A Worked Example
Dark slate text on white, around hex 111827, gives a ratio well above 17 to 1, so it passes every level easily. Medium grey text on white, around hex 777777, gives a ratio below 4.5 to 1, so it fails AA for normal text even though it looks fine at a glance on a good monitor. That gap between looks fine and passes the standard is exactly why measuring matters: the checker catches combinations that eyes alone approve and standards reject.
Tips That Save Time
- Aim for AA for all body text, and treat AAA as the target for small or important text like form labels.
- Test brand colors early. A brand palette that fails contrast will force redesigns later if it is only checked at launch.
- Test text on top of images and gradients too, using the darkest part of the image behind the text as the background color.
- Do not rely on bold or large size to rescue a failing combination unless the text really is large everywhere it appears.
- Keep a list of passing pairs from your palette, so future pages reuse colors that are already proven.
Common Mistakes to Avoid
The most common mistake is judging contrast on a bright, high-quality monitor in a dark room, which flatters weak combinations. Another is checking only the headline size and forgetting that body text, captions, and form hints are smaller and need a higher ratio. A third is using color alone to convey meaning, for example red for error, without also adding text or an icon, which leaves color-blind readers without the message. Contrast is necessary, but it is only one part of readable design.
Questions People Ask
What ratio do I actually need? For most websites, AA is the accepted target: 4.5 to 1 for normal text and 3 to 1 for large text. AAA is stricter and is a good goal for small text.
Does this tool change my website? No. It only measures the colors you pick here in your browser. Nothing is uploaded, and no file is changed.
Readable text is not a matter of taste, it is a number you can check in seconds. Pick your colors, read the ratio, and ship combinations that pass.
Pingback: CSS Selector Tester - Test CSS Selectors Against HTML Free Online