Color Contrast Checker
Enter two colors and instantly see the WCAG contrast ratio with AA and AAA pass/fail guidance.
Enter foreground and background colors in hex or RGB to instantly calculate the WCAG contrast ratio, view AA/AAA pass-fail results, preview text on your colors, and get optional tweak suggestions.
How to use this color contrast checker
Type or paste a foreground and background color. The checker normalizes valid input to uppercase hex, calculates the exact WCAG contrast ratio instantly, and shows pass/fail for AA and AAA thresholds. Use Suggest fix to nudge one color toward compliance, share results via the URL, or reset to start over.
WCAG contrast ratio thresholds
WCAG 2.x requires at least 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA). This tool always displays all four outcomes so you can compare levels at a glance.
Supported color formats
Enter #RGB, #RRGGBB, rgb(r,g,b), or comma-separated r,g,b values. Channels must be integers from 0 to 255. Alpha transparency, 8-digit hex, HSL/HSLA, and CSS named colors are not supported in v1.
What pass and fail mean
Pass means the computed ratio meets or exceeds the listed threshold for that level. Fail means it does not. Labels and icons accompany color so results are understandable without relying on color alone.
Frequently Asked Questions
Why are alpha and gradients not supported?
Version 1 evaluates only fully opaque sRGB colors. Alpha blending and gradients need compositing rules this tool does not model yet, so rgba(), 8-digit hex, and gradient analysis are out of scope for the MVP.
How is the contrast ratio calculated?
The checker uses the WCAG relative luminance formula for opaque sRGB colors: linearize each channel, compute luminance, then apply (lighter + 0.05) / (darker + 0.05). Displayed ratios round to two decimals; threshold checks use the full value.
What does Suggest fix do?
It deterministically moves the selected foreground or background color along a lightness path toward black or white until the chosen WCAG level is met, returning the nearest compliant hex and resulting ratio when one exists.
Can I share a specific color pair?
Yes. Valid foreground, background, and text size values sync to URL query parameters (for example ?fg=000000&bg=FFFFFF&size=normal) so you can link directly to a result.
Does the page store my colors?
Calculations run entirely in your browser. The last valid color pair may be saved in localStorage on your device for convenience; use Reset to clear inputs, URL params, and stored state.