На той неделе я начала со Стэнфорда и рака. Заканчиваю практикой.

Чеклист по которому я прохожу макет, прежде чем отдать в разработку. Десять минут — и большинство ловушек цветовой доступности видно.

1. Чёрно-белый тест Скриншот → обесцветить → посмотреть. Если в чёрно-белом теряется смысл — у тебя проблема. Это делается за 30 секунд в любом редакторе.

2. Симулятор дальтонизма В Figma — плагин Stark или A11y. В браузере — расширение Colorblindly. Прогоняешь через три режима: дейтеранопия (зелёный), протанопия (красный), тританопия (синий). Самый частый — первые два.

3. Иконка + текст для каждого статуса Ошибка, успех, предупреждение, информация — должны различаться без цвета. Проверь: если убрать заливку — читается ли всё ещё разница между ними?

4. Контраст ≥ 4,5:1 для текста Плагин Contrast или Colour Contrast Analyser. Серый текст на белом — главный нарушитель. Placeholder в полях — почти всегда мимо. WCAG AA — это минимум, не идеал.

5. Графики — не только цветом Линии: пунктир, сплошная, точки. Подписи прямо у данных, не только в легенде. Паттерны для столбцов в одноцветных группах.

6. Состояния полей Ошибка — рамка + иконка + текст под полем. Не просто покрасневшая рамка. Не просто восклицательный знак внутри.

7. Реальный тест на пользователе Дальтонизм есть у 8% мужчин и 0,5% женщин. В команде разработки из 12 мужчин один — почти точно. Покажи макет — спроси, видна ли разница между статусами.

Я свела это в Figma-гайд для дальтоников ещё в марте — ссылка ниже. Бесплатный, можно использовать в проектах. https://www.figma.com/community/file/1479450466687865902/1-12

Каким пунктом ты сегодня пренебрёг чаще всего? Признавайтесь 👇