DESIGN · FREE TOOL
Color contrast checker
Check two opaque hex colors against WCAG 2.2 contrast thresholds.
Your result
Download JSON report ↓A little help goes a long way.
Normal text · 16px. Large example · 24px, regular weight.
This sample uses your chosen colors even when contrast is poor. Read the assessment below for the result.
The report includes the inputs and calculation conventions. Save it only where you intend to keep that information.
A color-pair check, with the thresholds visible.
Each 8-bit sRGB channel is divided by 255, then linearized: c / 12.92 when c ≤ 0.04045; otherwise ((c + 0.055) / 1.055)^2.4. Relative luminance is 0.2126R + 0.7152G + 0.0722B. Contrast is (lighter luminance + 0.05) / (darker luminance + 0.05). Black against white is 21:1; identical colors are 1:1.
AA text thresholds are 4.5:1 for normal text and 3:1 for large text. Large means at least 18pt regular or 14pt bold, approximately 24px or 18.67px in CSS. AAA text thresholds are 7:1 and 4.5:1. Pass/fail uses the unrounded value, even if the displayed ratio rounds up.
For example, #777777 on #FFFFFF is about 4.48:1 and fails AA normal text; #767676 is about 4.54:1 and meets that threshold. A non-text 3:1 result is only a numeric check. Whether a particular control, boundary, graphic or state must meet it depends on the actual interface.
Sources: W3C luminance formula, text contrast, enhanced text contrast and non-text contrast. This is not certification of an entire page or a prediction of readability on every display.