← ClaudeAtlas

wcag-accessibilitylisted

UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification. Disabled UI elements are explicitly exempt from colour contrast requirements. Use when designing, building, or reviewing any user-facing interface for accessibility compliance.
dembrandt/dembrandt-skills · ★ 13 · Web & Frontend · score 83
Install: claude install-skill dembrandt/dembrandt-skills
# WCAG Accessibility (EN 301 549 / European Standard) ## The Standard The **European Accessibility Act (EAA)** requires digital products and services in the EU to meet **EN 301 549**, which references **WCAG 2.2 Level AA** as the technical baseline. This is not optional — it is a legal requirement for products operating in the EU market. **Default: always build to WCAG 2.2 AA.** Deviating requires explicit, documented justification. Do not skip accessibility requirements because of timeline pressure or design preference. WCAG 2.2 AA organises requirements under four principles: **Perceivable, Operable, Understandable, Robust**. --- ## Perceivable Users must be able to perceive all content and UI components. ### Colour Contrast | Context | Minimum ratio | Enhanced (AAA) | |---|---|---| | Normal text (< 18pt / < 14pt bold) | **4.5 : 1** | 7 : 1 | | Large text (≥ 18pt / ≥ 14pt bold) | **3 : 1** | 4.5 : 1 | | UI components and graphical objects | **3 : 1** | — | **Disabled elements are exempt.** WCAG explicitly excludes inactive UI components from contrast requirements (WCAG 1.4.3 exception). A disabled button may use low-contrast text — this is intentional and correct, as it communicates the unavailable state. Do not use colour as the only means of conveying information (e.g. a red border alone to indicate an error — add an icon or text label). ### Text Alternatives - Every meaningful image needs `alt` text describing its content or function - Decorative images use `a