Check WCAG 2.1 contrast ratios. Ensure your text is readable for everyone.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with visual impairments, including color blindness and low vision. Contrast ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum, black on white).
WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt / 24px or 14pt bold). WCAG AAA is stricter: 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need at least 3:1 against adjacent colors.
The contrast ratio is calculated from the relative luminance of both colors using the formula defined in WCAG 2.1. Luminance accounts for how the human eye perceives different wavelengths — green appears brighter than blue at the same intensity. This tool calculates the exact ratio and checks against all WCAG levels so you can fix accessibility issues before shipping.
This tool in other languages:
Français:
Vérificateur de contraste — WCAG
Español:
Verificador de contraste — WCAG
Deutsch:
Farbkontrast-Prüfer — WCAG
Português:
Verificador de contraste — WCAG
日本語:
カラーコントラストチェッカー
中文:
颜色对比度检查工具
한국어:
색상 대비 검사기
العربية:
مدقق تباين الألوان
Enter your foreground (text) color and background color — the contrast ratio and WCAG pass/fail results appear instantly. AA Large, AA Normal, AAA Large, and AAA Normal each have their own thresholds, all checked at once.
WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text (18pt+, or 14pt+ bold). WCAG 2.1 AAA requires 7:1 for normal text, 4.5:1 for large text. AA is the legal baseline in most jurisdictions; AAA is best practice for content meant for broad audiences.
Large text is 18pt (~24px) or larger, or 14pt (~18.66px) bold or larger. Large text has a lower contrast requirement (3:1 AA, 4.5:1 AAA) because larger characters are inherently easier to read. Below those sizes, normal-text ratios apply.
Light gray text on white is the most common contrast failure on the web. #999 on white is ~2.85:1 — fails AA at any size. #767676 is the lightest gray that passes 4.5:1 on white. When in doubt, go darker. Check the ratio here before committing to a gray.
WCAG 2.1 exempts disabled UI elements and pure decoration. Placeholder text is in a gray area (pun intended) — technically exempt but users often mistake it for actual values. Best practice: meet at least 3:1 for placeholders, and never rely on placeholder alone to label a field.