Контраст — не про красоту: без него кнопки и текст просто перестают работать

Контраст — не про красоту: без него кнопки и текст просто перестают работать

Главная ошибка — мерить контраст “на глаз”. Серый текст на белом фоне, светлая иконка на пёстром баннере, ссылка без подчеркивания: всё это выглядит аккуратно, но для части людей интерфейс становится нечитаемым.

Проверьте базовые случаи:
— обычный текст на фоне;
— текст на изображении и градиенте;
— состояния кнопок: default, hover, disabled;
— ошибки и подсказки возле полей;
— активный пункт меню и ссылки в тексте.

Для обычного текста держите высокий контраст, для крупного — тоже не расслабляйтесь: “крупный” не значит “можно почти сливаться с фоном”. У сложных фонов не надейтесь на прозрачность и тени: лучше затемнить подложку, вынести текст в отдельный блок или заменить изображение.

Не забывайте про не-текстовые элементы: иконка, чекбокс, рамка поля, индикатор ошибки тоже должны быть различимы. Если смысл состояния передаётся только цветом, часть пользователей его пропустит.

Проверяйте контраст в реальном макете, а не в палитре. Если элемент читается только после напряжения глаз, контраст уже слабый.