Color Contrast Checker (WCAG AA/AAA)

Make sure everyone can read your text

Light grey text on white, white text on a pastel button, a subtle placeholder in a form field — low-contrast color choices are among the most common accessibility problems on the web. They make content hard to read for people with low vision or color blindness, for older users, and for anyone looking at a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios, and many laws and procurement rules reference them. This checker tells you in a second whether a color pair passes.

How to check contrast

1. Enter the text color and the background color — HEX, RGB and HSL all work — or use the color pickers.
2. Read the contrast ratio and the live preview with large text, body text, small print and a button outline.
3. Check the pass/fail result for each WCAG level.
4. If a check fails, click “Use” on a suggested color to switch to the nearest passing shade with the same hue.
5. Use Swap to test the reverse combination, such as light text on a dark background.

WCAG contrast requirements

Level AA is the standard most organizations aim for and the level referenced by most accessibility regulations. AAA is stricter and useful for long-form reading. The UI component rule (WCAG success criterion 1.4.11) covers things like input borders, focus indicators, icons and chart lines that people need to see to use a page.

How the ratio is calculated

WCAG compares the relative luminance of the two colors — how bright they appear, weighted for the eye’s sensitivity to red, green and blue. The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 for identical colors to 21:1 for black on white. Because thresholds are strict, this tool rounds the ratio down, so a pair that measures 4.499:1 is correctly shown as failing 4.5:1. Semi-transparent text colors are blended with the background first.

Fixing a failing color pair

You rarely need to abandon a brand color. Usually a slightly darker text shade on light backgrounds, or a lighter one on dark backgrounds, is enough. The suggestions keep your color’s hue and change only its lightness, in small steps, until it passes AA or AAA — choosing whichever direction needs the smaller change.

Build an accessible palette with the Tailwind Color Shades Generator, convert colors between formats with the Color Converter, or pull colors from a photo with the Color Palette from Image tool.