WCAG контрастность: доступность цветов в веб-дизайне

Контрастность — критически важный параметр доступности веб-интерфейсов. Недостаточный контраст между текстом и фоном делает содержимое нечитаемым для людей с нарушениями зрения, а также для всех пользователей в условиях яркого солнечного света.

Стандарты WCAG

WCAG (Web Content Accessibility Guidelines) определяют минимальные требования к контрастности:

• Уровень AA (нормальный текст) — коэффициент контрастности ≥ 4.5:1
• Уровень AA (крупный текст ≥ 18px bold или ≥ 24px) — ≥ 3:1
• Уровень AAA (нормальный текст) — ≥ 7:1
• Уровень AAA (крупный текст) — ≥ 4.5:1

Формула расчёта

Контрастность рассчитывается через относительную яркость (relative luminance) каждого цвета. Формула: (L1 + 0.05) / (L2 + 0.05), где L1 — яркость светлого цвета, L2 — тёмного.

Заключение

Проверьте контрастность ваших цветов в нашем инструменте WCAG-контрастности. Подберите цвета в Color Picker.