Контраст и цвет: читаемость интерфейса
Проверяем текст на фоне, состояния элементов и информацию, которая не должна зависеть только от цвета.
Зачем это нужно
Цвет работает только в сочетании с фоном и окружением. Красивый оттенок может быть слишком бледным для мелкого текста. Полупрозрачность и фоновая фотография дополнительно меняют фактический контраст.
Проверяйте реальные пары
Используйте измеритель контраста для текста и его фактического фона. В WCAG для обычного текста уровня AA обычно применяется минимум 4,5:1, для крупного — 3:1, с отдельными условиями и исключениями. Не оценивайте соответствие только по впечатлению.
Разберите все состояния
Проверьте обычное, активное, наведённое и фокусное состояния. Светлая кнопка с белым текстом может стать нечитаемой только при hover. Подсказки и вторичный текст тоже должны оставаться различимыми.
Продублируйте смысл
У ошибки должна быть текстовая причина, у выбранного пункта — дополнительный признак кроме цвета. Для графиков используйте подписи или другие способы различать серии.
Важное ограничение
Контрольная проверка
- Основной и вторичный текст проверены инструментом.
- Ошибка понятна без красного цвета.
- Ссылки различимы в окружающем тексте.
- Фокус не сливается с фоном.