Accessibility Contrast Calculator

Check if your color combinations meet WCAG accessibility standards

Foreground (Text) Color:

Background Color:

This is example text that shows how your colors will look together.

Contrast Ratio

21:1

The contrast ratio between your selected colors.

WCAG 2.1 Compliance

Understanding Contrast Ratios

Contrast ratio is a measure of the difference in perceived luminance (or brightness) between two colors. The WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text to ensure readability for people with visual impairments.

WCAG 2.1 Compliance Levels

AA Level (minimum): Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
AAA Level (enhanced): Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large Text: Defined as text that is at least 18pt (24px) or 14pt (18.7px) and bold.

Meeting these standards helps ensure that your content is accessible to a wider audience, including people with visual impairments or color blindness.