Examples
AA contrast: #595959 on white = 7:1 (pass), #767676 = 4.6:1 (pass), #999999 = 2.8:1 (fail)<label for="email">Email</label><input id="email" type="email"> — Correct label<button aria-expanded="false" aria-controls="menu">Menu</button> — ARIA on toggle<img src="logo.png" alt="Genfy: tools for developers"> — Descriptive altfont-size: clamp(1rem, 2vw, 1.5rem); — Scalable text without breaking layout
FAQ
Is WCAG AA enough or do I need AAA?
AA is sufficient for most sites and is the legally required level in almost all jurisdictions. AAA is aspirational, requires 7:1 contrast (very difficult with modern designs) and other strict criteria. Aim for complete AA before considering AAA. Some AAA criteria are impossible to meet for certain content types (e.g., live videos with real-time sign language).
How do I verify if my site complies with WCAG?
Use automatic tools first: Lighthouse in Chrome DevTools, axe DevTools (extension), WAVE (WebAIM). They detect contrast, semantic HTML, missing alt text. Then test manually: navigate with keyboard only, use a screen reader (NVDA free on Windows, VoiceOver on Mac). For legal certification, hire a professional audit: automatic tools only detect 30-40% of issues.
Does dark mode affect WCAG compliance?
Yes. If you offer dark mode, both themes (light and dark) must comply with WCAG AA independently. Text that passes contrast in light mode may fail in dark mode and vice versa. Check both. Use CSS custom properties to change colors and test contrast in both themes. Users may prefer dark mode due to light sensitivity, it's not optional.