Checker Wcag Contrast
Fast, accurate and free online checker wcag contrast tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Rate this tool:
Related tools
Other tools you may find usefulWCAG – AA and AAA contrast checking for accessibility
Color contrast is a key accessibility requirement (WCAG). Low contrast makes text unreadable for people with low vision, color blindness, or reading in sunlight. The tool checks the text color/background color pair and evaluates WCAG 2.1 compliance.
WCAG 2.1 – contrast levels
AA (minimum): normal text (< 18px or <14px bold) ≥ 4.5:1. Large text (≥ 18px or ≥ 14px bold) ≥ 3:1. UI components and info graphics ≥ 3:1. AAA (enlarged): normal text ≥ 7:1. Large text ≥ 4.5:1. Level AAA: Recommended for critical content (medical instructions, legal forms).
How contrast is calculated
Relative luminance (L): L = 0.2126R + 0.7152G + 0.0722B (after gamma linearization). Contrast ratio = (L1+0.05)/(L2+0.05) where L1 > L2. Result: 1:1 (no contrast) to 21:1 (white on black). The tool calculates automatically for any HEX/RGB/HSL pair.
The most common contrast errors
Gray text on white background: #999999 on #FFFFFF = 2.85:1 (fail). Light blue link on white: #74B9FF = 2.4:1 (fail). Yellow text on white: almost always fail. Placeholder input: often too bright (many developers don't check placeholders). Disabled states: WCAG exempts the requirement for disabled elements.
Tips for selecting colors
Dark text on a light background: it's easier to achieve high ratios. Slightly darker primary: #0060DF instead of #0085FF – better contrast while maintaining color. Dark mode: white text on a dark background - check separately. The tool automatically suggests the closest color that meets AA.
Frequently asked questions
Is WCAG mandatory by law?
In Poland: The Digital Accessibility Act (2019, implementation of EU Directive 2016/2102) applies to public entities. In the EU: European Accessibility Act (2022) will extend the requirement to the private sector (e-commerce) from 2025. USA: Section 508 (government), ADA (companies). Private commercial sites in Poland: no direct obligation, but exposure to complaints.
Is 4.5:1 contrast a lot?
For context: white on black = 21:1. White on dark gray #767676 = 4.48:1 (almost AA). Black on yellow #FFFF00 = 19.1:1. Dark blue navy on white: ~12-15:1. For a regular design: 4.5:1 is achievable without sacrificing design, you just need to check.
How to test contrast across the entire page?
ax DevTools (Chrome extension): scans the entire page. WAVE (web accessibility evaluation tool): visual overlay with errors. Lighthouse: Chrome DevTools Accessibility Audit. Pa11y: CLI tool. Storybook: a11y addon tests components. Automated testing: 30-40% WCAG issues – the rest must be checked manually.
How does contrast affect SEO?
Google doesn't directly measure contrast as a ranking factor. But: low availability = higher bounce rate = negative UX signal. Google Mobile-Friendly Test and PageSpeed may flag accessibility issues. Core Web Vitals: Not contrast, but overall UX quality.
Does animated text need to meet contrast?
WCAG 1.4.3 (contrast): applies to text "presented as text" - HTML/CSS animations are affected. Text in movies and videos: WCAG 1.4.3 is not directly applicable, but WCAG 1.2.2 (subtitles) is. WCAG 2.3.1 (flashes): animated content may cause seizures - limit of 3 flashes/second.
Related tools: HEX to HSL converter, color scheme tester and triadic scheme generator.