Accessibility Tools

Check color contrast against WCAG guidelines

Accessibility tools help you check whether color combinations meet the Web Content Accessibility Guidelines (WCAG). Enter a foreground and background color to see the exact contrast ratio and clear pass or fail results for normal text, large text, and UI components. These tools report contrast as text, never color alone, and suggest adjustments when a combination falls short.

Tools in this category

Color Contrast Checker Check the contrast ratio between two colors with clear WCAG pass/fail results. WCAG Contrast Checker Test color pairs against WCAG 2.2 AA and AAA thresholds with detailed results.

What you can do here

• Verifying that body text on a colored background is readable
• Checking button and link colors before shipping a design system
• Auditing an existing site for low-contrast text

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text or UI components. AAA requires 7:1 for normal text. The checker reports each threshold separately.

Does this guarantee my site is accessible?

No. Contrast is one important part of accessibility. These tools help you check color contrast; a full audit covers keyboard use, structure, labels, and more.

Explore other categories

Color Pickers Choose, inspect, and name individual colors Color Converters Convert between HEX, RGB, HSL, HSV, HWB, and CMYK Palette Generators Build color schemes and harmonies from any base color Image Color Tools Pick colors and extract palettes from your images Gradient Tools Create and copy CSS gradients Developer Color Tools Convert, generate, and export colors for code