Color Contrast Checker

Ensure your text is readable by checking color contrast against WCAG guidelines.

Foreground Color

Background Color

Sample Text

This is how your text will look.

(Large text example: 18pt or 14pt bold)

About Color Contrast

Color contrast is crucial for web accessibility, ensuring that text and other visual elements are distinguishable for users, especially those with visual impairments.

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios:

Level AA (Normal Text): Requires a contrast ratio of at least 4.5:1.
Level AA (Large Text): Requires a contrast ratio of at least 3:1. (Large text is defined as 18 point (typically 24px) or 14 point (typically 18.66px) bold.)
Level AAA (Normal Text): Requires a contrast ratio of at least 7:1.
Level AAA (Large Text): Requires a contrast ratio of at least 4.5:1.

This tool helps you verify if your chosen color combinations meet these standards.