WCAG Color Contrast Checker

WCAG Color Contrast Checker

Check any foreground and background color pair against WCAG 2.x and APCA contrast standards. Get real-time pass/fail ratings, live text previews at multiple sizes, and smart suggestions for accessible alternatives when your colors fail.

How to Use

1. Click the foreground color chip or type a hex value to pick your text color
2. Click the background color chip or type a hex value to pick your background
3. Read the contrast ratio and WCAG/APCA ratings
4. If colors fail, click a suggestion to apply an accessible alternative

WCAG 2.x Contrast Levels

Large text is defined as 18px (14px bold) or larger. UI components include buttons, input fields, icons, and form controls.

APCA Lc Rating

APCA uses a signed contrast value (Lc) instead of a ratio. Positive values mean dark text on light backgrounds. Negative values mean light text on dark backgrounds.

Common Use Cases

Design system color auditing

Run your brand palette through the checker. Test your primary text color against every background variant in your system. Document which pairs pass AA and which need adjustments.

Dark mode migration

Dark mode inverts your contrast relationships. A color pair that passes in light mode often fails in dark mode. Use the swap button to quickly test both directions.

Email and marketing templates

Email clients render colors differently. Test your email text colors against common email background colors (white, light gray, brand tints) to catch accessibility issues before sending.

Tips for Improving Contrast

• Darken your text by 10-20% in HSL lightness. Usually enough to jump from Fail to AA.
• Lighten your background instead of changing text. Keeps your brand text color intact.
• Use a darker shade of your brand color for body text. Reserve the bright brand color for headings and accents.
• Add a subtle background behind text on images. A semi-transparent dark overlay (rgba(0,0,0,0.5)) dramatically improves readability.