Color contrast checker & fixer

Check an opaque text/background pair against WCAG 2.2 contrast requirements. See the reason for a failure, try a passing text color, and copy the CSS.

Foreground text

3 or 6 HEX digits, with or without #.

Background

3 or 6 HEX digits, with or without #.

WCAG contrast ratio

4.478:1

This pair falls below 4.5:1 for normal text. Use larger qualifying text or adjust one of the colors.

Pass/fail uses the unrounded value: 4.47808945:1.

APCA - supplementary Lc

71.11

Dark text on a light background. Interpret Lc with font size and weight. This is separate from WCAG 2.2 conformance.

Calculation methods

Which text requirements does it meet?

Normal text - AA

At least 4.5:1

Fail

Normal text - AAA

At least 7:1

Fail

Large text - AA

At least 3:1

Pass

Large text - AAA

At least 4.5:1

Fail

Large text is at least 24 CSS px, or at least 18.67 CSS px and bold. The pass labels describe contrast for the stated text category, not the accessibility of the whole design.

Preview the actual pair

16px regular: The quick brown fox jumps over the lazy dog.

24px regular: Readable color starts here.

20px bold: A larger, bolder example.

Find a passing foreground

Keep the background fixed. We try nearby lighter and darker OKLCH values and check the final sRGB result. Clipping may change the color's hue or saturation.

Target contrast ratio

The quick brown fox jumps over the lazy dog.

Original foreground

#777777 · 4.478:1

Fail for 4.5:1 target

Raw ratio: 4.478089453577214:1

The quick brown fox jumps over the lazy dog.

Adjusted foreground

#767676 · 4.542:1

Pass for 4.5:1 target

Raw ratio: 4.542224959605253:1

Color change: 0.397 ΔE00

CIEDE2000, Lab D50, Bradford D65 → D50, 2° observer, kL = kC = kH = 1. Background stays #FFFFFF. This measures the suggested color's change, not a globally smallest possible correction.

Suggested text color: #767676 - 4.542:1

CSS for the adjusted foreground

color: #767676;
background-color: #FFFFFF;

Save the tested roles, original and adjusted colors, raw pass/fail results, calculation versions and a link that restores these inputs.

Use this result

color: #777777;
background-color: #FFFFFF;

Permanent link

How to make the check meaningful

Use the colors that touch each other in the finished interface. Transparent text, gradients, images and overlays require the final composited color, which this opaque HEX checker does not calculate automatically.

For required UI boundaries and meaningful graphics, WCAG 1.4.11 generally uses 3:1 against adjacent colors. Whether a boundary is required depends on how the control is identified. Check focus, hover and error states individually, and do not rely on color alone.

W3C text contrast requirements | W3C non-text contrast

Read the contrast ratio guide | Compare two colors side by side