Контрастность текста: 5 проверок, которые спасают чтение на сайте

Контрастность текста: 5 проверок, которые спасают чтение на сайте

Контраст — не «красиво/некрасиво», а базовая доступность. Если текст сливается с фоном, пользователь не читает, а угадывает. Проверьте не только основной контент, но и кнопки, ссылки, ошибки форм, плейсхолдеры и подписи к иконкам.

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

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

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