Color Contrast Checker

About Color contrast checker

Pick a text color and a background color and see the WCAG contrast ratio with pass or fail badges for AA and AAA at normal and large sizes. A preview shows three text sizes so you can judge readability with your eyes as well. Use it while choosing colors for text, buttons and form labels.

How to use it

1. Set the Foreground (text) color with its color picker.
2. Set the Background color the same way.
3. Read the large ratio number, the :1 label and the grade badge, which says AAA, AA, AA (large) or Fail.
4. Check the four cards: Normal text AA, Normal text AAA, Large text AA and Large text AAA.
5. Adjust one color at a time until the results you need show Pass.

The classic near-miss gray

#767676 on #ffffff versus #777777 on #ffffff

4.54:1 passes AA for normal text; 4.47:1 fails it

When to use it

• Checking a light gray placeholder or caption color before shipping it.
• Confirming a brand-colored button with white label text meets 4.5:1.
• Documenting contrast for an accessibility audit or a design-system token.
• Finding how much darker a link color must be to reach AAA on white.

Questions about Color contrast checker

What are the thresholds?

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA, per WCAG 2.1.

What counts as large text?

At least 18 point, which is 24 CSS pixels, in regular weight, or at least 14 point, about 18.67 pixels, in bold or heavier.

Why is the ratio truncated instead of rounded?

Rounding could display 4.50 for a true ratio of 4.497 that actually fails AA. The tool cuts to two decimals and grades the number it shows, so badge and headline never disagree.

How is the ratio calculated?

Each color is converted to relative luminance using the sRGB formula with weights 0.2126, 0.7152 and 0.0722. The ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05.

Does it handle transparent colors?

No. It works with opaque colors from the picker, so flatten any translucent color against its background before testing.

Related tools

• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• Color palette generatorGenerate harmonious color palettes — shades, tints, complementary, analogous, and triadic from any seed color
• CSS filter generatorCombine blur, brightness, contrast, hue-rotate, saturate, sepia and more with a live image preview
• Color shades generatorGenerate a full 50–950 shade scale from any color — export as CSS variables or Tailwind config
• Typography scale generatorGenerate a modular type scale from base size and ratio — exports CSS custom properties
• Favicon generatorCreate favicons from text, emoji, or images — export as PNG or ICO at multiple sizes