Контрастность ломают не цвета, а мелочи: 5 мест, где текст становится нечитаемым

Контрастность ломают не цвета, а мелочи: 5 мест, где текст становится нечитаемым

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

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

Важно смотреть не только на цвет текста, но и на окружение. Светло-серый текст на белом фоне, синий текст на тёмной фотографии и тонкие иконки-ссылки часто выглядят «аккуратно» для дизайна, но плохо для пользователей. Особенно если размер шрифта маленький или есть полупрозрачность.

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

Начните с самых частых элементов интерфейса: формы, кнопки, ссылки и текст на изображениях — именно там чаще всего прячутся проблемы.