Tools › WCAG Contrast

Color contrast
checker WCAG

Enter text and background colors — get the contrast ratio and WCAG AA and AAA accessibility check. Free, no registration.

Text
Background
Large text (18px+)
Normal text (14px). Bold text (14px). This is an example of how content looks on the selected background with the selected text color.
21 : 1
Contrast ratio
WCAG 2.1 Requirements
📝AA — normal text: minimum 4.5:1
🔤AA — large text (18px+ or 14px bold): minimum 3:1
✨AAA — normal text: minimum 7:1
⭐AAA — large text: minimum 4.5:1

What is WCAG

WCAG (Web Content Accessibility Guidelines) is an international web accessibility standard. Level AA is the baseline required for most websites. AAA is the enhanced level for maximum accessibility.

How contrast is calculated

The contrast ratio is calculated using the WCAG formula based on the relative luminance of two colors. Maximum contrast is 21:1 (black on white), minimum is 1:1 (identical colors).

Why it matters

Low contrast makes reading difficult for people with visual impairments. In many countries, WCAG AA compliance is a legal requirement for government and commercial websites.

FAQ
What is the minimum contrast required for a website?
For normal text — minimum 4.5:1 (AA level). For large text (18px and above or 14px bold) — 3:1. These are the basic WCAG requirements for accessibility.
What is the difference between AA and AAA?
AA is the standard accessibility level achievable for most designs. AAA is the enhanced level with stricter contrast requirements. AAA compliance is desirable but not always mandatory.
Do requirements apply to images?
WCAG contrast requirements apply to text — both regular and text in images. Decorative elements and logos are excluded from requirements.
Is this tool free?
Yes, completely free with no limits. No registration.