<b>Цветовой контраст: как не сделать интерфейс красивым, но нечитаемым</b>

<b>Цветовой контраст: как не сделать интерфейс красивым, но нечитаемым</b>

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

Проверяйте не только текст, но и все смысловые элементы:
• основной текст и подписи;
• иконки, которые несут смысл;
• границы полей и кнопок;
• состояния фокуса, hover и ошибки.
Если элемент сообщает действие или статус, он обязан читаться без угадывания. Особенно это критично для мелкого текста и тонких линий.

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

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