What is a contrast ratio?

The contrast ratio measures the relative luminance difference between two colors. A ratio of 1:1 means identical colors; 21:1 is the maximum (black on white).

What are the WCAG thresholds?

WCAG AA requires 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

Contrast Checker

Check foreground/background color contrast ratio against WCAG standards.

Foreground color

Background color

Invalid hex color — use #rrggbb format.

Related Tools

#Color Palette from Color

Generate complementary, triadic, analogous and other color schemes from one hex color.

#Color Blindness Simulator

Simulate how colors or images appear to people with color blindness.

#cColor Format Converter

Convert colors between HEX, RGB, and HSL formats with a live preview swatch.

FAQ

What is a contrast ratio?: The contrast ratio measures the relative luminance difference between two colors. A ratio of 1:1 means identical colors; 21:1 is the maximum (black on white).
What are the WCAG thresholds?: WCAG AA requires 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

Input a foreground and background color to calculate the WCAG contrast ratio using the official luminance formula. See whether the color pair passes WCAG AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text) standards. A live text preview shows how the combination looks in practice.