OneTool

How to check color contrast for accessibility

Low-contrast text fails accessibility and is hard to read. Here's how to check a color pair against WCAG.

Open Contrast Checker

The thresholds

  • AA — 4.5:1 for normal text, 3:1 for large text.
  • AAA — 7:1 for normal text, 4.5:1 for large text.

Steps

  • Open the contrast checker and enter your text and background colors.
  • Read the contrast ratio and the AA/AAA pass/fail badges.
  • Adjust a color until it passes for your text size.

Tools used in this guide

Contrast CheckerCheck WCAG color contrastColor PickerPick colors and get every codeHEX / RGB / HSL ConverterConvert between color formats

Related guides

How to extract a color palette from an imageHow to generate a CSS gradientHow to convert HEX to RGB (and back)

How to check color contrast for accessibility — FAQ

AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. The checker shows each result live.