Checks WCAG contrast ratio between two colors.
The Contrast Checker calculates the WCAG contrast ratio between a foreground color and a background color, then reports whether it meets the AA and AAA accessibility thresholds. Enter two colors as hex or rgb() values and instantly see the ratio plus pass/fail results for normal and large text. It's useful for verifying that text, buttons, and UI elements are readable enough to satisfy WCAG a11y requirements.
No. The contrast calculation runs entirely in your browser, and nothing you type is uploaded or stored anywhere.
You can use 6-digit hex (#ffffff), 3-digit shorthand hex (#fff, with or without the #), and rgb()/rgba() values like rgb(255, 0, 0). Other formats such as HSL or named colors are not parsed.
It uses the WCAG formula: relative luminance of each color is computed, then the ratio is (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (black on white).
AA requires 4.5:1 for normal text and 3.0:1 for large text; AAA requires 7.0:1 for normal text and 4.5:1 for large text. The tool shows a pass or fail mark for each of these four thresholds.
Under WCAG, large text is roughly 18pt (24px) or 14pt (about 18.66px) bold and above. Large text qualifies for the lower contrast thresholds shown in the results.