Контрастность

Определение: Контрастность — это заметность текста и элементов интерфейса на фоне: насколько хорошо различаются цвет шрифта и цвет подложки (а также иконки, кнопки и состояния). Чем выше контраст, тем легче читать и быстрее находить нужные элементы, особенно на мобильных, при ярком свете и для людей с особенностями зрения.

Зачем это нужно

• Повысить читаемость: текст не «сливается» с фоном и не утомляет глаза.
• Сделать кнопки и ссылки заметными: пользователю проще понять, куда нажимать.
• Уменьшить точки трения: меньше ситуаций «не вижу, где форма/ошибка/подсказка».
• Улучшить доступность (accessibility): сайт становится удобнее для людей с разным зрением.
• Сохранить понятную иерархию: важное видно сразу, второстепенное — не мешает.
• Избежать проблем на разных экранах: цвета по-разному выглядят на телефонах и мониторах.

Пример

Пример кода:

.btn-primary { background:#0B5FFF; color:#FFFFFF; }

Скриншот

Подпись к скриншоту: два состояния одного блока: плохой контраст (серый текст на светло-сером фоне) и хороший контраст (тёмный текст на светлом фоне), чтобы было видно разницу

Частые ошибки

• Использовать «модный» светло-серый текст на белом фоне — выглядит аккуратно, но плохо читается.
• Делать ссылки и кнопки почти одинаковыми с обычным текстом — непонятно, что кликабельно.
• Показывать ошибки только цветом (красной рамкой) без текста — пользователь может не понять, что произошло.
• Не проверять контраст на мобильном и при ярком освещении — там проблема проявляется сильнее.
• Ставить текст на пёстрые фото без затемняющей подложки — буквы «теряются».

Связанные термины

• Accessibility (доступность)
• Типографика
• UI-дизайн
• Фокус (keyboard focus)
• Состояния элементов
• Точки трения

Наши услуги

• Доработка сайтов — улучшаем читаемость, контраст и заметность ключевых элементов для роста конверсии.
• Создание корпоративных сайтов — проектируем дизайн с понятной иерархией и хорошей читаемостью.
• Техническая поддержка сайта — исправляем стили и проблемы отображения на разных устройствах.