What does this tool do?
The Color Contrast Checker measures the contrast ratio between your chosen text and background colors and instantly shows whether the pair meets WCAG accessibility thresholds. It helps designers, developers and content creators keep text readable for everyone, including low-vision users.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How the contrast ratio is calculated
The tool computes each color's relative luminance using the sRGB formula, then compares them as (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (no contrast) to 21:1 (pure black on white). As you pick a foreground and background color, a live sample heading and paragraph update in real time, so you can judge the number alongside the visual outcome rather than guessing.
WCAG AA and AAA levels
Four badges summarize the result: AA Normal text ≥4.5:1, AA Large text ≥3:1, AAA Normal ≥7:1 and AAA Large ≥4.5:1. Large text means roughly 18pt or 14pt bold and above. Aim for at least AA on body copy, buttons and links; target AAA where stricter accessibility matters, such as government, banking or healthcare interfaces.
Frequently asked questions
What do the green, orange and red colors mean?
The ratio reads green when it is 4.5 or higher (passes AA Normal), orange between 3 and 4.5 (acceptable for large text only), and red below 3 (fails).
Why does large text allow a lower ratio?
Larger and bold letters have thicker strokes that are easier for the eye to distinguish, so WCAG grants them a more lenient 3:1 threshold.
Can I test transparent or semi-transparent colors?
This checker works with fully opaque HEX colors. To test a translucent layer, first find its final color blended over the background and enter that HEX value.
Is Color Contrast Checker free?
Yes. Color Contrast Checker and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Color Contrast Checker works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.