Live Preview

Heading Text Preview

This is a sample paragraph demonstrating how your text will look with the selected foreground and background color combination. Good contrast ensures that all users, including those with visual impairments, can read your content comfortably.

This is small text (12-14px). WCAG requires higher contrast ratios for text this size since it is harder to read. Normal text must meet at least 4.5:1 for AA compliance.

Common Accessible Color Combinations

Click any combination to apply it. All meet WCAG AA for normal text (4.5:1 minimum).

About WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with moderately low vision. Contrast ratio is calculated using the relative luminance of the foreground and background colors.

WCAG Conformance Levels

Level AA (Normal Text): Requires a contrast ratio of at least 4.5:1. This is the minimum standard most websites should meet.
Level AA (Large Text): Requires a contrast ratio of at least 3:1. Large text is defined as 18pt (24px) or 14pt (18.66px) bold.
Level AAA (Normal Text): Requires a contrast ratio of at least 7:1. This is the enhanced standard for optimal readability.
Level AAA (Large Text): Requires a contrast ratio of at least 4.5:1 for large text at the enhanced level.
UI Components (AA): Non-text elements like form borders, icons, and focus indicators must have at least 3:1 contrast against adjacent colors.

How Contrast Ratio is Calculated

The contrast ratio formula uses relative luminance, which accounts for human perception of different wavelengths of light. The sRGB color values are first linearized, then weighted according to the human eye's sensitivity: green contributes 71.52%, red 21.26%, and blue 7.22%. The final ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).

Why Color Contrast Matters

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Additionally, aging naturally reduces contrast sensitivity. Sufficient color contrast benefits everyone, especially when viewing screens in bright sunlight or on low-quality displays. Meeting WCAG standards is often a legal requirement for government and public-sector websites under laws like the ADA (Americans with Disabilities Act) and the European Accessibility Act.

Tips for Accessible Color Design

Do not rely on color alone to convey information. Use text labels, patterns, or icons as well.
Test your colors against both light and dark backgrounds.
Consider users with color blindness: avoid red/green combinations for critical information.
Use this tool to verify all text, button, and link colors on your website.
Aim for WCAG AAA (7:1) when possible for the best readability.

Color Contrast Checker