🍋
Menu
Design

Accessibility

Design Accessibility (a11y)

Designing products usable by people with disabilities, following WCAG guidelines for perceivable and operable interfaces.

Chi tiết kỹ thuật

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.

Ví dụ

```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;
}
```

Công cụ liên quan

Thuật ngữ liên quan