Как проверить контраст цветов сайта и исправить слабые сочетания

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

Что должно получиться

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

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

При этом один коэффициент не описывает всё удобство чтения. На него влияют размер, начертание, интервалы и условия отображения. В этой инструкции проверяем сочетания цветов; состав текста, порядок действий и общую доступность сайта нужно оценивать отдельно.

Из чего это складывается

Крупным считается не любой заголовок. В определении WCAG речь о размере не менее 18 пунктов для обычного начертания или 14 пунктов для жирного. Проверяйте фактические параметры. Нельзя считать мелкую подпись крупной только потому, что она размечена заголовком или выглядит больше соседнего текста.

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

Как это сделать по шагам

1. Выберите типичные страницы. Возьмите статью, каталог или список, карточку и форму, если они есть на сайте. Добавьте блоки с цветным фоном и изображениями. Начните с часто повторяющихся элементов: их исправление поможет сразу нескольким страницам.
2. Зафиксируйте состояния. Посмотрите обычный вид, наведение, фокус клавиатуры, выбранный вариант и сообщение об ошибке. Отдельно отметьте действительно недоступные элементы. Не подменяйте ими плохо заметные, но работающие действия.
3. Определите цвета. Для однотонного непрозрачного текста и фона возьмите значения из вычисленных стилей браузера. Если есть прозрачность, наложение или изображение, учитывайте итоговое сочетание слоёв. Значение цвета из палитры само по себе может не совпасть с отображаемым.
4. Измерьте пару. Введите цвета в проверяющий инструмент или используйте средства браузера, которые показывают контраст. Уточните, умеет ли выбранное средство определять сложный фон. Не принимайте отсутствие предупреждения за доказательство, что любой участок страницы проверен.
5. Сравните с нужным критерием. Учитывайте тип элемента, размер и начертание текста. Решение о прохождении принимайте по полному значению коэффициента. Число чуть ниже порога не становится подходящим после округления.
6. Исправьте сочетание. Попробуйте затемнить текст, осветлить фон или изменить подложку. Для текста поверх фотографии часто надёжнее выделить спокойную область или отдельный однотонный блок. Сохраняйте смысл состояний и повторяемость оформления.
7. Повторите проверку на странице. Проверьте тот же элемент во всех нужных состояниях, на узком экране и в используемых темах оформления. Сохраните пару цветов и результат, чтобы после обновления шаблона можно было проверить изменение снова.

Небольшой расчёт на однотонном фоне

Ниже — учебные сочетания непрозрачных цветов в пространстве sRGB. Коэффициенты рассчитаны по формуле W3C для относительной яркости и контраста. Это не результаты аудита itsnew.ru. Значения в таблице округлены только для чтения, а вывод сделан по полному результату расчёта.

Эти результаты относятся только к указанным парам. Если серый текст сделать полупрозрачным или поставить на другой фон, нужен новый расчёт. Также нельзя объявить подходящей всю кнопку по цвету её заливки: отдельно проверяется читаемость надписи и значимая информация об управлении.

Как работать с изображением и прозрачностью

На фотографии фон под началом и концом строки может сильно отличаться. Средний цвет всей картинки ничего не говорит о самом слабом участке под буквами. Посмотрите места, где различие минимально, и проверьте разные варианты обрезки. На телефоне под текстом иногда оказывается совсем другая часть кадра.

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

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

Частые ошибки

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

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

Округлять в пользу прохождения. Пороговые значения — граница, а не приблизительная цель. Если расчёт дал 4,499:1, это ниже 4,5:1. Для отображения число можно сократить, но решение по сокращённой записи принимать нельзя.

Затемнять один текстовый блок без проверки состояния. Правка обычного вида может оставить слабым наведение или фокус. В тёмной теме тот же цвет способен исчезнуть на новом фоне. Проверяйте набор состояний, который действительно используется на сайте.

Путать слабый контраст с отсутствием других признаков. Различимый красный цвет ещё не объясняет, в каком поле ошибка. Добавьте понятное текстовое пояснение и связь с элементом. Проверка коэффициента не заменяет работу со смыслом сообщения.

Применять исключения ко всему фирменному оформлению. Исключение для текста логотипа не распространяется автоматически на подписи, кнопки и обычные заголовки в цветах бренда. Роль каждого элемента рассматривают отдельно.

Как проверить

• Для повторяющихся элементов сохранены конкретные пары цветов и состояния.
• Обычный и крупный текст оценены по соответствующим условиям.
• Подписи, подсказки и сообщения об ошибках не забыты.
• Значимые нетекстовые элементы проверены отдельно от надписей.
• Для прозрачности и изображений учтён реальный фон под содержанием.
• Вывод о прохождении не основан на округлении вверх.
• После правки проверены телефон, используемые темы и состояния.
• Результат описан как проверка контраста, без обещания полной доступности сайта.

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

Подробные условия и исключения приведены у W3C в материалах о минимальном контрасте текста и нетекстовом контрасте. Обзор инструментов есть в руководстве MDN.

Цвета удобнее проверять вместе с типографикой сайта. Для понимания роли элементов пригодится разбор UI и UX. Если нужна помощь с исправлением палитры интерфейса, приложите список проблемных пар к задаче в разделе дизайна сайтов.

Вопросы и ответы

Можно ли проверить контраст просто на глаз?

Визуальная проверка помогает заметить слабые места, но зависит от зрения, экрана и условий. Для сравнения с численным критерием нужны цвета конкретной пары и расчёт коэффициента.

Любому заголовку достаточно контраста 3:1?

Нет. Упрощённое условие относится к крупному тексту по определению WCAG. Если фактические размер и начертание не подходят под это определение, применяют требование для обычного текста.

Нужно ли проверять текст внутри поля?

Да, если этот текст должен быть прочитан: введённое значение, подсказку и сообщение при работе с полем. Нельзя исключить подпись из проверки только потому, что она оформлена светлым второстепенным цветом.

Достаточно ли одного цвета для светлой и тёмной темы?

Это нужно проверить. Контраст зависит от пары, поэтому смена фона меняет результат. Проверьте также состояния элемента в обеих темах, если они предусмотрены на сайте.

Почему инструмент не проверил текст на фотографии?

Не каждое средство умеет определить сложный или многослойный фон. Уточните его возможности и проверьте слабые участки отдельно. Отсутствие автоматического предупреждения ещё не подтверждает подходящий контраст.

После исправления контраста сайт полностью доступен?

Нет. Вы проверили один аспект. Отдельно оценивают структуру, управление с клавиатуры, подписи, масштабирование, обработку ошибок и другие условия работы с содержанием.