Проверяйте контраст по фактическим цветам текста и фона, взятым из макета или исходных стилей. Сначала рассчитайте соотношение контрастности в инструменте, затем сверьте его с требованиями WCAG для размера и начертания текста. Отдельно оцените текст на изображениях, ссылки, состояния элементов и читаемость при разных сценариях просмотра.
Контраст макета: контрольный список перед проверкой
- Получите точные цвета текста и фона из стилей, а не подбирайте их на глаз.
- Проверьте каждую пару цветов отдельно в инструменте расчёта контрастности.
- Сопоставьте результат с требованиями WCAG для конкретного текста и его начертания.
- Осмотрите макет целиком: расчёт не выявляет всех проблем на изображениях и градиентах.
- Проверьте ссылки, состояния элементов и подписи при разных условиях просмотра.
Соберите цвета текста и фона из исходных стилей
Этот этап подходит дизайнерам и разработчикам, которые готовят макет к передаче или проверяют уже собранный интерфейс. Не стоит брать цвет на глаз с уменьшенного скриншота: сглаживание, прозрачность и эффекты могут изменить пиксельный оттенок.
Найдите цвет текста и подложки в дизайн-системе, свойствах слоя или стилях сайта. Если задана прозрачность, градиент, наложение или фильтр, зафиксируйте также фон, с которым эффект смешивается: проверять нужно итоговую пару цветов, видимую пользователю.
Проверьте контраст по точным значениям RGB
Для проверки понадобятся значения цветов текста и фона, а также доступ к инструменту, который рассчитывает контраст по WCAG. Подойдёт веб-сервис, плагин для редактора макетов или функция проверки в инструменте разработки. Чтобы проверить контраст текста и фона онлайн, вводите значения из исходных стилей, например RGB или HEX, а не приблизительные оттенки.
Проверка контрастности цветов WCAG должна учитывать фактические цвета после применения прозрачности и эффектов. Если инструмент принимает только непрозрачные значения, сначала получите итоговый цвет под текстом в редакторе или браузере. Не устанавливайте неизвестные расширения и не передавайте макет внешнему сервису, если он содержит конфиденциальные данные: достаточно вручную ввести цветовые значения в доверенный инструмент.
Сверьте результат с требованиями для размера и начертания
Перед расчётом подготовьте макет:
- Выберите конкретный текстовый элемент и его фон.
- Запишите значения цвета текста и итогового цвета подложки.
- Уточните размер и начертание шрифта по стилям макета.
- Определите, какой критерий соответствия нужен для проекта.
- Выберите проверяемую пару. Рассматривайте каждый текстовый стиль и фон отдельно. Для одной подписи на разных подложках выполните отдельные проверки.
- Введите точные значения цветов. Укажите цвет текста и фона в поддерживаемом формате. Если цвет задан с прозрачностью, рассчитайте его итоговый вид поверх подложки до проверки.
- Укажите характеристики текста. Сверьте размер и начертание со стилями макета. По ним определите, какая категория требований WCAG применима к элементу.
- Сопоставьте результат с критерием. Используйте рассчитанное соотношение контрастности и результат проверки инструмента. Если критерий не выполнен, скорректируйте цвет текста или фона и повторите расчёт.
- Зафиксируйте итог. Сохраните проверенные значения и отметьте, для какого элемента и фона они подходят. Это упрощает повторную проверку после изменений макета.
Отдельно оцените текст поверх изображений и градиентов
- Проверьте контраст на самых светлых и самых тёмных участках под текстом.
- Для градиента оцените весь участок, который проходит под надписью, а не только его центр.
- Проверьте результат с учётом затемняющего слоя, размытия или прозрачной плашки.
- Убедитесь, что текст остаётся читаемым при изменении размера или кадрирования изображения.
- Если подложка меняется, проверьте все варианты изображения и фона, предусмотренные макетом.
- При нестабильном контрасте используйте однородную подложку или скорректируйте изображение и наложение.
- Повторите расчёт для итогового сочетания цветов после всех визуальных эффектов.
Числовой расчёт оценивает выбранные цвета, а визуальная проверка показывает, не теряется ли надпись в композиции. Для сложного фона подберите контрастные цвета для текста и фона с учётом наиболее проблемных участков, а не только наиболее удачного фрагмента.
Проверьте контраст ссылок, состояний и второстепенных подписей
- Проверять только основной текст, забывая о ссылках, подписях, подсказках и метках.
- Оценивать ссылку лишь в обычном состоянии и пропускать состояния наведения, фокуса и нажатия.
- Проверять цвет текста на базовой подложке, игнорируя подложку при наведении или выборе.
- Полагаться только на цвет для обозначения ссылки или ошибки: визуальная роль элемента может стать неочевидной.
- Брать оттенок из скриншота вместо точного значения из стиля.
- Не учитывать прозрачность, наложение, тень или изменяющийся фон.
- Считать результат автоматического сканирования полной заменой ручной проверки макета.
Повторите проверку на итоговом макете и в разных сценариях просмотра
Перед передачей проверьте не только исходный дизайн, но и собранную страницу: стили, масштабирование и реальные изображения могут изменить результат. Для проверки доступности сайта контраст текста должен оцениваться вместе с читаемостью интерфейса и состояниями элементов.
- В редакторе макетов: удобно сверять цветовые значения до передачи и проверять повторяющиеся стили.
- В браузере: подходит для проверки итоговых стилей, прозрачности, изображений и состояний элементов.
- С помощью автоматического анализатора: помогает обнаружить проблемные пары цветов на готовой странице, но сложные фоны и визуальную читаемость нужно оценивать отдельно.
- При ручном просмотре: проверьте макет при разных масштабах и условиях освещения. Это дополнение к расчёту, а не его замена.
Инструмент для проверки контраста макета помогает выявить несоответствия, но итоговое решение принимайте по фактической реализации и контексту использования. После правок повторно проверьте все затронутые стили и состояния.
Нюансы проверки контрастности в рабочих макетах
Можно ли проверять цвет по скриншоту?
Для первичной оценки можно, но скриншот может менять оттенок из-за сглаживания, сжатия и цветовых эффектов. Для решения используйте значения из исходных стилей или итоговые цвета в браузере.
Что делать, если цвет текста частично прозрачен?
Сначала определите итоговый цвет текста на конкретном фоне, затем проверьте эту пару. Если фон меняется, проверяйте все предусмотренные варианты.
Достаточно ли проверить только основной текст?
Нет. Проверьте также ссылки, подписи, подсказки и текст состояний интерфейса, включая наведение, фокус и выбранное состояние.
Почему расчёт проходит, а текст всё равно плохо читается?
Расчёт оценивает контраст заданных цветов, но не учитывает все особенности композиции, изображения, размера текста и условий просмотра. Проверьте макет визуально и на итоговой странице.
Как проверять надпись на градиенте?
Проверьте контраст на разных участках градиента под текстом. Если результат нестабилен, добавьте однородную подложку или измените градиент и повторите проверку.
Можно ли ограничиться автоматической проверкой сайта?
Автоматический анализ полезен для обнаружения проблемных сочетаний цветов, но может не оценить текст поверх изображения и визуальный контекст. Дополните его ручной проверкой макета и состояний элементов.