What does this tool do?
The Color Contrast Checker calculates the contrast ratio between a text (foreground) and background color and shows whether it passes WCAG accessibility standards. Web designers, developers and content creators use it to make sure their text stays readable for everyone.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Ratio and WCAG levels
Enter two colors as hex or pick them from the color swatch; the tool computes relative luminance and instantly returns the contrast ratio, such as 4.5:1. The result is graded with four badges: AA Large (≥ 3:1), AA (≥ 4.5:1), AAA Large (≥ 4.5:1) and AAA (≥ 7:1). A live preview at the top renders a large heading and normal body text in your chosen colors so you can also judge readability by eye.
Common combinations
Frequent color pairs like black on white, white on blue, or gray on white load with one click and show their contrast ratio on the label. This helps you pick a starting point and quickly rule out low-contrast pairings such as gray on white. Per WCAG 2.1, AA requires 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text.
Frequently asked questions
Why does large text allow a lower ratio?
Text at 18pt and above (or bold 14pt) has thicker strokes and is easier to read, so WCAG permits a lower threshold of 3:1 for large text.
Which color formats can I enter?
The tool works with six-digit hex color codes in #rrggbb form, and you can also set the value using the built-in color picker.
Is transparency (alpha) supported?
The calculation uses solid hex colors; for semi-transparent colors, enter the effective color after it is blended with the background first.
Is Color Contrast free?
Yes. Color Contrast 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 works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.