<b>Цветовой контраст: 5 ошибок, из-за которых интерфейс читается только “на глазок”</b>

<b>Цветовой контраст: 5 ошибок, из-за которых интерфейс читается только “на глазок”</b>

Контраст — это не “красиво/некрасиво”, а способ сделать текст, иконки и состояния управляемыми для всех. Если пользователь щурится, промахивается по ссылке или не видит ошибку в форме, проблема часто не в размере шрифта, а в разнице яркости фона и элемента.

Проверяйте в первую очередь:
• серый текст на белом и цветной текст на цветном фоне;
• плейсхолдеры вместо нормальных подписей;
• ссылки, которые отличаются только оттенком;
• ошибки и подсказки, закодированные одним красным цветом без текста;
• disabled-состояния, которые почти не отличимы от обычных.

Отдельная ловушка — контраст в состояниях hover, focus и active. Если фокус виден только тонкой линией близкого оттенка, клавиатурный пользователь теряет ориентир. Иконка тоже должна контрастировать не хуже текста: бледный “лупа” на светлой кнопке выглядит аккуратно, но по факту исчезает.

Простой рабочий принцип: если элемент несёт смысл, он должен читаться без угадывания цвета. Проверьте интерфейс в ч/б, на слабом экране и на фоне сложной картинки. Если различие пропадает — меняйте не только оттенок, но и форму, толщину, подчеркивание или подпись.