Color Contrast Checker

Check foreground and background colors against WCAG contrast ratios for normal and large text.

Text color Background color Text size

Readable text starts with enough contrast between the foreground and background.

Contrast ratio 14.68:1

Passes WCAG AA and AAA for normal text.

AA normal Pass

Needs 4.5:1

AAA normal Pass

Needs 7:1

AA large Pass

Needs 3:1

AAA large Pass

Needs 4.5:1

Suggested text color

This pair already passes the selected guideline.

#1f2937

How to use this color contrast checker

Enter a text color and background color as hex, RGB, HSL, or a CSS color name.
Choose whether you are checking normal text or large text.
Review the contrast ratio and WCAG AA or AAA pass states.
Apply the suggested text color when you need a quick accessible fallback.

WCAG contrast targets

WCAG contrast checks compare the relative luminance of text and its background. Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA.

How the contrast ratio is calculated

sRGB channel linearization

c_{linear} = \begin{cases} \frac{c_{srgb}}{12.92}, & c_{srgb} \le 0.04045 \\ \left(\frac{c_{srgb}+0.055}{1.055}\right)^{2.4}, & c_{srgb} > 0.04045 \end{cases}

Each red, green, and blue channel is first normalized from 0-255 to 0-1, then converted to linear light.

Relative luminance

L = 0.2126R + 0.7152G + 0.0722B

The green channel carries the most weight because human vision is more sensitive to green light.

Contrast ratio

\operatorname{Contrast} = \frac{L_{lighter} + 0.05}{L_{darker} + 0.05}

The resulting ratio is checked against 3:1, 4.5:1, and 7:1 WCAG text contrast thresholds.

The checker parses the colors in your browser, converts sRGB channels to linear light, calculates relative luminance, and divides the lighter luminance by the darker luminance with the WCAG contrast adjustment.