Цветовой контраст: как не потерять текст, кнопки и смыслы на экране

Цветовой контраст: как не потерять текст, кнопки и смыслы на экране

Контраст — это не “красиво/некрасиво”, а вопрос читаемости. Если текст сливается с фоном, пользователь теряет смысл, а не терпение. Особенно часто страдают вторичные кнопки, плейсхолдеры, подсказки и серый текст на светло-сером фоне.

Проверьте три вещи:
— обычный текст должен читаться без усилия;
— иконка не должна быть единственным носителем смысла: добавляйте подпись;
— у состояний hover, focus и disabled контраст тоже должен сохраняться, иначе элемент выглядит “живым”, но не работает.

Частая ошибка — ориентироваться на “на глаз нормально”. На ярком мониторе дизайнеру может быть ок, а на ноутбуке пользователя текст уже исчезает. Ещё одна проблема — цветовая пара сама по себе проходит, но поверх картинки, градиента или полупрозрачной подложки всё разваливается.

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