EnglishEN

WCAG Color Contrast Checker

Pick a text color and a background color to see the contrast ratio and accessibility results instantly.

Your text and files never leave your browser — nothing is sent to a server.

Contrast ratio-
  • Normal text AA (4.5:1)-
  • Normal text AAA (7:1)-
  • Large text AA (3:1)-
  • Large text AAA (4.5:1)-
  • UI components & graphics AA (3:1)-

Large text means at least 24px, or about 18.7px when bold.

Preview

This is how a large heading looks

Body text needs at least 4.5:1 to be comfortable to read. Try it on a small screen or in bright light, too.

Small helper text · 13px

ButtonInput field
Suggested passing colors
Change text color to -
Change background to -

How to use

  1. Choose a text color and a background color with the color boxes, or type codes such as #fff or rgb(…). Semi-transparent colors are blended over the background first.
  2. You get the contrast ratio and pass/fail results for AA normal text (4.5:1), large text (3:1) and UI components (3:1), plus the stricter AAA levels.
  3. If a check fails, “Suggested passing colors” shows the closest color with the same hue and only the lightness changed. Click “Apply” to use it.
  4. Both colors are saved in the page URL, so you can copy the link to share with your team.

FAQ

What do AA and AAA mean?

They are conformance levels in the Web Content Accessibility Guidelines (WCAG). Normal text needs 4.5:1 for AA and 7:1 for AAA. AA is the level most laws and policies refer to, including ADA and Section 508 guidance in the US.

How is the contrast ratio calculated?

The tool finds the relative luminance of both colors and divides (lighter + 0.05) by (darker + 0.05). Identical colors give 1:1 and black on white gives 21:1. The ratio is truncated, not rounded, so a value just below a threshold never looks like a pass.

When does the UI components rule apply?

Non-text elements such as button borders, input outlines and icons need at least 3:1 against the colors next to them (WCAG 1.4.11).

Related tools

Color PickerHEX, RGB, HSL and CMYK in one placeColor scale for TailwindOne color to a 50–950 scaleImage Color PickerPick pixel colors and a paletteASCII Art GeneratorText and photos as character art

All tools