Skip to content
♿

WCAG Contrast Checker

Color

Check color contrast ratios and verify WCAG AA and AAA compliance for accessibility.

0
0
WCAG 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

Accessibility guidelines don't just recommend readable text, they specify exact numeric thresholds, a 4.5:1 contrast ratio for normal text and 3:1 for large text or UI components at the AA level, stricter still at AAA, and the only way to know whether a specific foreground and background color pair actually clears one of those bars is to calculate the ratio rather than eyeball it. This tool checks the contrast ratio between two colors and states plainly whether that pair passes AA, passes AAA, or fails, against the specific text size it's being used for.

See more about the WCAG Contrast Checker

Useful for confirming a button's text color actually meets AA contrast against its background before shipping a design, checking whether a light gray caption clears the large-text threshold, or verifying a color pairing meets AAA for a project with a stricter accessibility requirement.

Key features

  • Clean interface
  • Fast processing
  • No signup required
  • Works offline

Related Color tools

Color Mixer

Color

Color Temperature Adjuster

Color

Color Name Finder

Color

WCAG Contrast Auditor

Color

Color Opacity Generator

Color

Color Tone Generator

Color

Related Blog Posts

Quick answers for WCAG Contrast Checker

How do I enter the colors to compare?
A color picker and a matching hex text field for both foreground and background, so you can either click to pick a color or type a hex code directly.
What does the WCAG Level result tell me?
It labels the contrast ratio as AAA, AA, AA Large, or Fail based on the standard WCAG 2.1 thresholds, along with a short description of what that level means for readability.
Is there a live preview of the color combination?
Yes, a sample text block renders using your exact foreground and background colors, so you can see how the pairing actually looks before relying on the numeric ratio alone.