Цветовой контраст: где дизайн часто ломает чтение и как это быстро проверить

Цветовой контраст: где дизайн часто ломает чтение и как это быстро проверить

Контраст — это не про «красиво/некрасиво», а про то, сможет ли человек прочитать текст, увидеть кнопку и понять состояние интерфейса. Проблема обычно не в самом цвете, а в паре: светло-серый текст на белом, бледная рамка у поля, ошибка, которую видно только если вглядеться.

Проверьте в первую очередь: — основной текст и подписи; — плейсхолдеры и подсказки внутри полей; — ссылки в тексте; — иконки, которые несут смысл; — состояния «неактивно», «ошибка», «выбрано». Если элемент сообщает важную информацию только цветом, это уже риск.

Светлый фон с тонкой серой типографикой часто выглядит «чисто» в макете, но в реальном интерфейсе читается хуже, особенно на мобильном и при ярком освещении. То же касается кнопок: если текст на цветной заливке слишком близок по тону, пользователь видит форму, но не видит действие.

Хорошая привычка — смотреть на экран в полусолнце, уменьшать яркость и проверять интерфейс без особого внимания: если смысл пропадает, контраст слабый. Усиливайте не только текст, но и не-текстовые элементы: границы, иконки, индикаторы состояния. Тогда интерфейс остаётся понятным не только в макете, но и в руках пользователя.