Color Contrast Checker

Check text and background color contrast against WCAG accessibility levels.

Large preview text

Normal body text sample for readability check.

15.78:1

Contrast ratio

AA normal

PASS

AA large

PASS

AAA normal

PASS

AAA large

PASS

Related Tools

🎨
Color Converter
Convert between HEX, RGB, HSL and OKLCH, check WCAG contrast ratios, and generate a tonal shade strip.
 🎨
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
 🌫️
CSS Box Shadow Generator
Visually build a CSS box-shadow and copy the code.

0 comments

How it works

Pick a text color and a background color and the tool computes the contrast ratio using the WCAG formula, which is based on the relative luminance of each color. It then shows whether the pair passes the AA and AAA accessibility levels for both normal and large text. Higher ratios are easier to read, especially for people with low vision. A live preview shows the colors together. All calculation runs in your browser.


              ratio = (L1 + 0.05) / (L2 + 0.05)   (L = relative luminance)

Common use cases

  • Checking that body text meets WCAG AA before shipping a design.
  • Choosing an accessible link color against a background.
  • Verifying button label contrast for readability.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large text. The checker shows pass or fail for each.

What counts as large text?

Roughly 18.66px bold or 24px regular and above. Large text has a lower contrast requirement because bigger shapes are easier to read.

How is the ratio calculated?

From the relative luminance of each color using the WCAG formula. Ratios range from 1:1 (identical) to 21:1 (black on white).