A client once shipped light-gray text on a white background because ‘it looked clean on the designer’s calibrated monitor.’ Their older users couldn’t read a word of it, and an accessibility audit flagged nearly every page. Aesthetic judgment is not a contrast measurement, and contrast is measurable, which is exactly why there’s no excuse for guessing.
Pick any two colors and this checker reports the WCAG contrast ratio plus pass/fail against AA and AAA for normal and large text. The thresholds worth memorizing: 4.5:1 for normal text (AA), 3:1 for large text and UI components. If your palette fails, nudge lightness, not hue, until it passes; brand colors usually survive a lightness tweak intact.
Try it now: open the free tool, runs 100{e0bed9560a59d6d3feee569f5ae3dad3ee14a646b3fccc2d16becbf099999e03} in your browser.
What experience taught me: test the actual text sizes you ship (small captions fail where headlines pass), check hover and disabled states too (they’re still content), and never rely on color alone to convey meaning, pair it with icons or labels for colorblind users. Accessibility lawsuits now target small sites, not just enterprises; a passing palette is cheap insurance that also happens to be good design.
Bottom line: measure, don’t eyeball, 4.5:1 for body text, test real sizes, never color-alone.
Your turn: use the tool free here, no signup, nothing leaves your device.
How do you use HTML/CSS Color Picker & Contrast Checker?
Open the HTML/CSS Color Picker & Contrast Checker in your browser (Pick colors and verify WCAG contrast ratios). Type or paste your input, adjust the options, and copy the result. Everything runs locally on your device with no account and nothing stored, so the three steps below take seconds even for confidential work.
- Paste the data or snippet you want to process.
- Run the tool and watch the output update.
- Copy the result for use in your own code.
Try HTML/CSS Color Picker & Contrast Checker free. It opens right in your browser.