Accessibility
Design Accessibility (a11y)
Designing products usable by people with disabilities, following WCAG guidelines for perceivable and operable interfaces.
Technisches Detail
WCAG 2.1 defines accessibility as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are relative luminance values. Level AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 and 4.5:1 respectively. WCAG 3.0's proposed APCA (Advanced Perceptual Contrast Algorithm) accounts for font weight and polarity (light-on-dark vs dark-on-light), providing more accurate readability predictions than the current formula.
Beispiel
```css
/* WCAG AA compliant color combinations */
.text-primary {
color: #1a1a1a; /* on white: 17.4:1 ✓ AAA */
background: #ffffff;
}
.text-secondary {
color: #525252; /* on white: 7.1:1 ✓ AAA */
background: #ffffff;
}
.button-primary {
color: #ffffff; /* on blue: 4.6:1 ✓ AA */
background: #2563eb;
}
```