Как проверить контраст текста на сайте

Проверяйте пару, а не один цвет

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

В качестве учебной пары возьмите основной синий ZIPKA #002FA7 и белый #FFFFFF. Затем замените синий на #A0A0A0 и сравните результат в инструменте. Наблюдайте не только за числом: прочитайте небольшой абзац обычного размера.

Какие значения сравнивать

В WCAG 2.2 уровень AA для обычного текста предусматривает контраст не менее 4.5:1, для крупного — 3:1. Крупным считается текст от 18pt либо от 14pt при полужирном начертании. Это примерно 24px и 18.7px при обычном соотношении единиц CSS. Исключения и точные формулировки есть в первоисточнике.

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

Проверьте состояния элемента

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

Не сообщайте об ошибке только красным цветом. Добавьте текстовое объяснение и понятную связь с полем. Человек должен понимать ситуацию и без различения оттенка.

Практика: исправьте подпись

Сделайте карточку с белым фоном, заголовком и серой подписью #A0A0A0. Постепенно затемняйте подпись, пока пара не пройдёт выбранный порог. Затем уменьшите размер текста: проверьте, не пользовались ли вы послаблением для крупного текста, которое теперь неприменимо.

1. Выписать цвет текста и итоговый цвет фона.
2. Выбрать порог для размера и начертания.
3. Проверить все состояния и фоновые изображения.
4. Прочитать страницу при увеличении масштаба и с клавиатуры.

Сохраните решение как роль в палитре

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

Инструмент проверки контраста ZIPKA поможет сравнить цвета; симулятор особенностей цветовосприятия — дополнить визуальную проверку. Ни один из них по отдельности не подтверждает полное соответствие сайта всем требованиям доступности.