Skip to content
♿

Contrast Checker

Color

Check text and background contrast for WCAG AA and AAA accessibility compliance.

0
0
Contrast Checker
Sample TextThe quick brown fox jumps over the lazy dog.
Contrast Ratio
21.00:1
WCAG Level
AAA
Excellent contrast for all text sizes

Contrast checker that measures the WCAG contrast ratio between a text color and a background color, and shows the level it reaches: AAA, AA, AA Large or Fail. Type a 6-digit HEX value for each color to see the ratio with a sample text preview.

See more about the Contrast Checker

Invalid HEX hides the result without a message, and the tool does not suggest a fixed color.

Examples

Gray text on white

#767676 on #ffffff → 4.54:1, AA

4.54:1 clears the 4.5:1 AA threshold for normal text, but not the 7:1 AAA level.

Light gray text

#999999 on #ffffff → 2.85:1, Fail

Below 3:1 the result is Fail. Pick a darker text color and check again; the tool does not pick one for you.

Key features

  • WCAG 2.x contrast ratio
  • AAA, AA, AA Large or Fail
  • Sample text preview
  • 6-digit HEX input

Related Blog Posts

Quick answers for Contrast Checker

How is this different from the Color Contrast Ratio Checker?
They use the same WCAG relative-luminance formula and check a single foreground and background pair, this tool additionally renders a live sample-text preview against your chosen colors so you can see the actual contrast, not just the ratio number.
What do the AA and AAA levels mean?
They are the WCAG contrast thresholds, AAA requires a ratio of at least 7:1 for normal text, AA requires at least 4.5:1, and a separate AA Large tier accepts 3:1 for text 18pt or larger.
What happens if my colors fail every level?
The tool shows a "Fail" result when the ratio falls below 3:1, telling you the pairing is not accessible at any WCAG text size.