Алекс получил письмо от студентки: она не может прочитать описания курсов на светло-сером фоне. Он подумал, что это единичный случай проблем с монитором. Потом пришло ещё пять похожих писем за неделю.
Он открыл инструменты разработчика Chrome и впервые увидел раздел Accessibility. Контрастность его основного текста была 3.2:1. Минимальный стандарт — 4.5:1. Почти весь текст на сайте не проходил проверку.
Масштаб проблемы
Алекс начал проверять все цветовые комбинации. Серый текст на белом фоне — провал. Светло-синие ссылки — провал. Жёлтые кнопки с белым текстом — тоже провал. Даже заголовки курсов в карточках имели недостаточный контраст.
Проблема оказалась в том, что дизайнер выбирал цвета визуально, без проверки соотношений. А Алекс просто верстал по макетам, не задумываясь о стандартах.
Процесс исправления
Он установил плагин для Figma, который автоматически проверяет контрастность. Затем пересмотрел всю цветовую палитру. Основной текст стал почти чёрным вместо серого. Для ссылок нашёл более насыщенный синий. Кнопки перекрасил с учётом соотношения 7:1 для лучшей читаемости.
Самым трудным было убедить дизайнера изменить фирменные цвета. Алекс показал статистику: примерно 8% пользователей имеют проблемы с цветовосприятием. Это сотни студентов, которые просто не видят контент нормально.
Обновление заняло месяц. Жалобы прекратились. Алекс теперь проверяет контрастность на этапе ревью каждого макета.