DESIGN / THE EVERYDAY TOOLKIT
Color Contrast Checker.
Measure an opaque sRGB color pair against WCAG contrast ratios. This is a free utility from my portfolio toolkit, with local browser processing and no account required.
Calculates WCAG 2 contrast for opaque sRGB colors. Large text means at least 18pt, or 14pt bold. This checks a color pair, not full page accessibility.
SIMPLE BY DESIGN
How to use Color Contrast Checker
- Choose the foreground text color and its solid background color.
- Generate the contrast ratio and pass/fail results.
- Check the actual font size, weight and surrounding UI before deciding the combination is appropriate.
Check a color pair before applying it to text.
The checker converts two opaque six-digit sRGB HEX colors into relative luminance and calculates their contrast ratio. It compares the unrounded value with WCAG 2 thresholds for normal and large text at AA and AAA levels. The visible preview is a convenience, not a substitute for the numerical result. This check does not cover focus indicators, hover states, images, gradients, transparency or other requirements of an accessible page.
A FEW THINGS TO KNOW
A little more clarity.
What counts as large text?
WCAG large text is at least 18pt, or at least 14pt when bold. The large-text threshold should not be used for ordinary small interface labels.
Is my input sent to a server?
No. This utility processes your input in your browser. URLs you paste are treated as data; the tool does not fetch them. Be careful with clipboard history on shared devices.
FROM THE JOURNAL
Check Color Contrast in the Actual Interface, Not Just the Palette
Evaluate text and background pairs, account for real component states, and keep color from becoming the only signal.