WCAG AA & AAA compliance · instant results
Colorpickee's Contrast Checker instantly calculates the color contrast ratio between any two colors. Enter HEX values or use the color pickers — results update in real time with no page reload.
All calculations follow the WCAG 2.1 relative luminance formula and are performed locally in your browser. No data is sent to any server.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios so that people with low vision or color blindness can read web content comfortably.
Enter your text color and background color using the HEX inputs or click the color swatch to open the native color picker. The contrast ratio and WCAG pass/fail status update instantly.
If your combination fails, suggested lighter or darker alternatives appear automatically — click any swatch to apply it.
Poor color contrast is one of the most common accessibility failures on the web. It affects an estimated 300 million people with color vision deficiencies, as well as users in bright sunlight or on low-quality displays.
Checking contrast early in your design process is faster and cheaper than fixing it after launch.
For normal body text, you need a contrast ratio of at least 4.5:1. For large text (18pt or 14pt bold) and UI components like buttons and input borders, a ratio of 3:1 is sufficient.
AA is the standard compliance level required by most accessibility laws and guidelines. AAA is the enhanced level — it's stricter (7:1 for normal text) and not always mandatory, but recommended for text-heavy or critical interfaces.
The ratio is calculated using the WCAG 2.1 relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. Luminance is derived from linearized sRGB values.
Currently the tool works with solid HEX colors. For transparent colors, you'll need to first calculate the effective color as it appears on the actual background, then check that.
Yes — completely free, with no account required and no limits. All processing happens locally in your browser.