Color Contrast Checker

Check WCAG contrast compliance between a text color and background color.

14.68:1

Contrast Ratio

AA Normal Text (min 4.5:1)Pass
AA Large Text (min 3:1)Pass
AAA Normal Text (min 7:1)Pass
AAA Large Text (min 4.5:1)Pass

Normal text example (16px) — The quick brown fox jumps over the lazy dog.

Large text example (24px bold)

Overview

Check whether a text color and background color meet WCAG accessibility contrast requirements, with a live preview at normal and large text sizes.

WCAG Contrast Requirements

Level Normal Text Large Text (18pt+ or 14pt+ bold)
AA (minimum) 4.5:1 3:1
AAA (enhanced) 7:1 4.5:1

Contrast ratio is calculated from the relative luminance of both colors, per the WCAG 2.1 formula, and ranges from 1:1 (no contrast) to 21:1 (black on white).

How to use this tool

  1. Pick or enter a text color and a background color.
  2. See the contrast ratio and which WCAG levels it passes.
  3. Use the live preview to check how the combination actually looks at both text sizes.

More Utilities Tools

Browse all tools →