How color contrast checker works
Color contrast is how distinguishable text is from its background, measured as a ratio from 1:1 (no contrast) to 21:1 (black on white). The WCAG 2.1 standard defines thresholds: normal text needs a ratio of at least 4.5:1 (AA) or 7:1 (AAA), and large text (18pt or 14pt bold) needs 3:1 (AA) or 4.5:1 (AAA).
The ratio is computed from the relative luminance of each color, which accounts for how the human eye perceives red, green, and blue differently. This checker parses two hex colors, computes their relative luminances, and returns the contrast ratio plus pass/fail results for normal and large text at AA and AAA levels.
Enter a foreground (text) color and a background color. The tool shows the ratio, the WCAG pass/fail results, and a live preview of the text on the background. Use it to pick accessible color pairs for buttons, links, and body text, and to audit an existing design for accessibility compliance.