Copy Paste Tools
Design

Color Contrast Checker

Check foreground and background colors with WCAG 2.2 ratios and an APCA readability guide.

Live preview

12px · Small body copy — The quick brown fox jumps over the lazy dog.

16px · Body copy — The quick brown fox jumps over the lazy dog.

24px bold · Sub-heading

Headline

WCAG 2.2 contrast

14.06:1
AA · Normal textPass
AA · Large textPass
AAA · Normal textPass
AAA · Large textPass
AA · UI & graphicsPass

WCAG checks use the ratio without rounding it first.

APCA (WCAG 3 draft)

+98.5 Lc
Dark text on lightAAA / any size
Lc 90+AAA / any size
Lc 75+Body text · 14–18px
Lc 60+Large or bold body
Lc 45+Headings · non-text
Lc 30+Minimum visibility

APCA reads text and background differently and accounts for size and weight. A larger Lc magnitude means more contrast. Do not compare APCA Lc directly with a WCAG ratio.

Make text easier to read

Choose a text color and a background color. The preview and scores update right away.

WCAG 2.2 uses a contrast ratio for accessibility checks. APCA uses a polarity-aware Lc score and considers how text size and weight affect readability. These two scores use different scales and should not be compared directly.

Good to know

  • WCAG ratios run from 1:1 to 21:1.
  • APCA is polarity-sensitive, so swapping the colors changes its score and direction.
  • The APCA bands shown here are a quick guide, not a replacement for testing the exact type size and weight.
  • APCA is associated with work toward WCAG 3 and is not a WCAG 2.2 conformance test.

Keep going

Browse all tools →