Contrast Checker
Enter a text color and a background color to see their contrast ratio, whether they pass WCAG AA and AAA, and a close color that would pass.
Large text, 24 px
Bold text at 18.7 px counts as large too
Normal text at 16 px. The quick brown fox jumps over the lazy dog.
—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 parts and icons AA · 3:1 —
Colors are checked on this page: nothing is sent or saved.
Text people can read, on any screen
Light gray on white looks tidy in a design file and turns faint on a phone in sunlight or for anyone with low vision. WCAG, the web’s accessibility guidelines, measures this with a contrast ratio from 1:1 (none) to 21:1 (black on white). This checker works it out for any pair of colors and shows what passes.
How to use it
- Type, paste or pick the text color and the background color. HEX, rgb(), hsl(), oklch(), CSS names and the other formats all work.
- Look at the sample, then read the ratio and the five checks beside it.
- If a check you need fails, choose that level under the results to see the nearest text color that passes.
- Press “Use this color” to try it, or Swap to check the colors the other way round.
The five checks
- Normal text, AA (4.5:1) and AAA (7:1): body copy, labels and links.
- Large text, AA (3:1) and AAA (4.5:1): 24 px and up, or bold from about 18.7 px.
- UI parts and icons, AA (3:1): borders of inputs and buttons, icons and chart lines, against the colors next to them.
How the suggestion works
The tool keeps the hue and saturation of your text color and changes only its lightness, darker or lighter, until the ratio reaches the level you chose. It checks the result again after rounding to a HEX code, so the color it shows really passes.
Good practice
- Check every pair you use, not just body text: links, placeholder text in inputs, text on buttons, and text over colored bands.
- Check both themes if your site has a light and a dark one; a pair that passes in one can fail in the other.
- Aim above the minimum for small or thin fonts, which look fainter than their color suggests.
- Text over a photo needs checking against its lightest and darkest parts, or a solid band behind it.
Good to know
- See-through colors are laid on the background first, and a see-through background on white.
- Contrast is one part of readable design: size, weight and spacing matter too.
- Checking a long text? The Word Counter shows its length and reading time.