Уровни доступности: обеспечение контрастности и читаемости

Почему контрастность — это не просто "чтобы красиво" 🌈

Веб — это пространство для всех, включая людей с нарушениями зрения. Низкая контрастность текста превращает ваш контент в "невидимку" для 4,5% населения Земли. WCAG (Web Content Accessibility Guidelines) диктует чёткие стандарты:

Минимальный контраст (AA): 4.5:1 для обычного текста
Улучшенный контраст (AAA): 7:1 для мелкого шрифта

🔍 Интересный факт: Соотношение 4.5:1 означает, что светлый элемент в 4.5 раза ярче тёмного (и наоборот).

Как проверить контрастность без магии 🔧

Вместо гадания на кофейной гуще используем инструменты:

1. Браузерные DevTools (Chrome/Firefox):

В панели Elements найдите цвет текста/фона
Кликните на цветной квадратик → проверьте контраст

2. Плагины для Figma:

Stark, Contrast, A11y — мгновенная проверка макетов

3. Онлайн-валидаторы:

- WebAIM Contrast Checker
- Contrast Ratio by Lea Verou

/* Плохо: контраст 2.1:1 */
.button {
  color: #999999;
  background: #F0F0F0;
}

/* Хорошо: контраст 5.7:1 */
.button {
  color: #333333;
  background: #F0F0F0;
}

Текст vs фон: хитрые случаи 🎨

Градиенты и изображения

На сложном фоне текст теряется. Решение:

.hero-text {
  position: relative;
  color: white;
}

.hero-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.3));
  z-index: -1;
}

Полупрозрачность (alpha-канал)

Opacity ≠ доступность. Лучше работать с RGBA:

/* Недоступно: контраст теряется */
.text {
  color: black;
  opacity: 0.6;
}

/* Доступно: сохраняем контраст */
.text {
  color: rgba(0,0,0,0.9);
}

Цвет — не единственный инструмент 🛠️

WCAG допускает 3 способа выделения важной информации:

Цвет + толщина (bold)
Цвет + подчёркивание
Цвет + иконка

/* Плохо: только цвет */
.error {
  color: red;
}

/* Хорошо: цвет + визуальный маркер */
.error {
  color: red;
  font-weight: bold;
  border-left: 3px solid red;
  padding-left: 8px;
}

Тёмные темы: ловушки и решения 🌗

Тёмный режим — не инверсия светлого! Особенности:

Серый текст на чёрном фоне часто теряет контраст
Яркие акцентные цвета могут "резать" глаза

/* Плохо: серый на чёрном */
.dark-mode {
  background: #121212;
  color: #888888; /* Контраст всего 3.2:1 */
}

/* Хорошо: светлый серый */
.dark-mode {
  background: #121212;
  color: #E0E0E0; /* Контраст 12.6:1 */
}

💡 Совет от Данилы Бежина: Используйте prefers-color-scheme для автоматического переключения, но оставляйте ручной выбор темы.

Инструменты для автоматизации 🚀

Встройте проверку контраста в рабочий процесс:

1. PostCSS плагины:

npm install postcss-color-contrast

2. Stylelint правила:

{
  "plugins": ["stylelint-color-contrast"],
  "rules": {
     "color-contrast/color-contrast": true
  }
}

3. Storybook addons:

- storybook-addon-a11y
- axe-storybook-testing

Человеческий фактор: тестируем на реальных пользователях 👥

Техническая проверка — это 50% успеха. Дополните её:

Тестированием с пользователями с нарушением цветовосприятия
Печатью дизайна в ч/б (выявит зависимости от цвета)
Использованием симуляторов дальтонизма (Chrome DevTools → Rendering)

/* Для имитации протанопии (красно-зелёный дальтонизм) */
.filter-protanopia {
  filter: url('#protanopia');
}

Контрастность — это про уважение ✨

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