WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.
Enter a foreground and background color and instantly see the contrast ratio along with WCAG AA and AAA pass/fail flags for normal and large text.
Common use cases
- Verify body-text contrast against WCAG AA (4.5:1) before launch
- Audit existing pages for accessibility compliance with WCAG 2.1
- Test a brand color combination for legibility on dark and light themes
- Pick chart colors that remain readable for users with color vision deficiencies
Frequently asked questions
What's the WCAG threshold?▾
AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
Does it support transparent colors?▾
Yes — for semi-transparent foregrounds, the contrast calculation simulates the result over an opaque background you specify.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
🎨
Color Converter
Convert HEX, RGB, HSL, HSV, CMYK and LAB instantly with auto-detection.