Контрастность сайта: 5 ошибок, из-за которых текст читают не все

Контрастность сайта: 5 ошибок, из-за которых текст читают не все

Контраст — это не только «белое по чёрному». Для доступности важен любой текст, кнопка и ссылка, которые должны быть различимы на фоне. Если элементы сливаются, человек с низким зрением, дальтонизмом или на ярком экране просто не поймёт, куда нажимать.

Частые ошибки:
— светло-серый текст на белом фоне;
— ссылка выглядит как обычный текст;
— текст лежит на пёстром изображении без подложки;
— активное и неактивное состояние кнопки отличаются только оттенком;
— серые плейсхолдеры используются как основной текст.

Проверяйте не только цвета, но и размер шрифта, толщину начертания, фон под текстом и hover/focus-состояния. Если элемент понятен только «на глаз», контраст, скорее всего, слабый. Для текста, иконок и управляющих элементов должен быть запас, а не минимально допустимая разница.

Хорошее правило простое: сначала делайте интерфейс читаемым в чёрно-белом варианте, потом добавляйте цвет. Так вы быстрее заметите слабые места и не превратите дизайн в красивую, но нечитаемую картинку.