Принципы расчета контрастности по стандартам WCAG 2.1 / 2.2
Доступность веб-контента напрямую зависит от читаемости текстовых и графических элементов. Инструмент «Проверка контрастности» позволяет сопоставить цвет текста и цвет фона для определения их коэффициента контрастности в соответствии с актуальными международными стандартами WCAG 2.1 / 2.2. На основе этих вычислений система определяет, проходят ли выбранные цвета проверку для различных уровней доступности (AA и AAA).
В качестве начальных параметров в инструменте установлены цвета #4f46e5 для текста и #ffffff для фона, что дает коэффициент контрастности 6.29. Диапазон возможных значений коэффициента строго ограничен: от 1:1, что означает полное отсутствие контраста (например, белый текст на белом фоне), до максимального значения 21:1, которое достигается при сочетании абсолютно черного текста с абсолютно белым фоном.
Входные параметры и поддерживаемые форматы цвета
Для проведения анализа пользователю необходимо задать два параметра: цвет текста и цвет фона. Инструмент поддерживает три распространенных формата представления цвета в веб-разработке:
- Hex-коды: шестнадцатеричные значения, например
#1a1a1a. - Значения rgb(): представление цвета в цветовой модели RGB, например
rgb(26, 26, 26). - Значения hsl(): представление цвета через тон, насыщенность и светлоту.
Для удобства работы в интерфейсе предусмотрена специальная кнопка, которая позволяет мгновенно поменять местами цвета текста и фона.
Если введенное значение не распознается системой, инструмент выводит предупреждение об ошибке. При некорректном вводе цвета текста отображается сообщение: «Введите корректный цвет текста, например #1a1a1a or rgb(26, 26, 26).». Если ошибка допущена в поле фона, пользователь увидит сообщение: «Введите корректный цвет фона, например #ffffff или rgb(255, 255, 255).».
Требования к контрастности для разных типов контента
Стандарты WCAG разделяют контент на категории, для каждой из которых установлены свои минимальные пороги соотношения цветов. Инструмент оценивает три группы элементов:
- Обычный текст. К этой категории относится стандартный наборный текст. Для прохождения уровня доступности AA требуется коэффициент контрастности не менее 4.5:1. Для достижения более строгого уровня AAA необходим коэффициент не менее 7:1.
- Крупный текст. Крупные шрифты легче воспринимаются при более низком уровне контраста. Согласно правилам, крупным считается текст размером от 18pt (приблизительно 24px) или от 14pt (приблизительно 18.5px) при использовании полужирного начертания. Для прохождения уровня AA здесь достаточно соотношения 3:1, а для уровня AAA требуется коэффициент не менее 4.5:1.
- Интерфейс и графика. Данная категория включает в себя активные элементы управления и важные графические объекты. Для них применяется одно пороговое значение — коэффициент контрастности должен составлять не менее 3:1. В отличие от текстовых категорий, для интерфейса и графики не предусмотрено разделение на уровни AA и AAA; инструмент выводит единый результат проверки относительно этого порога.
Интерпретация результатов и итоговый вердикт
После проведения расчетов инструмент показывает статус проверки («Пройден» или «Не пройден») для каждого типа контента и уровня доступности. На основе этих данных формируется итоговое резюме, которое принимает одно из следующих значений:
- «Соответствует уровням AA и AAA для обычного текста.»
- «Соответствует уровню AA для обычного текста.»
- «Соответствует уровню AA только для крупного текста.»
- «Ниже минимума AA — увеличьте контрастность.»
Эти вердикты помогают дизайнерам, разработчикам и контент-менеджерам быстро оценить применимость выбранной цветовой схемы и при необходимости скорректировать параметры до соответствия целевым стандартам.
Конфиденциальность данных при проверке
Все вычислительные процессы и анализ цветовых кодов происходят непосредственно в веб-браузере пользователя. Вводимые текстовые значения цветов и параметры фона не передаются на серверы BroBroGo. Это обеспечивает локальную обработку информации во время работы с инструментом.
Часто задаваемые вопросы
Что означают результаты AA и AAA? AA — это уровень доступности, к которому стремится большинство сайтов: для обычного текста требуется коэффициент не менее 4.5:1, а для крупного — 3:1. Требования уровня AAA строже: 7:1 для обычного текста и 4.5:1 для крупного. Коэффициент контрастности варьируется от 1:1 (контраст отсутствует) до 21:1 (черный на белом).
Что считается крупным текстом? Текст размером от 18pt (около 24px) или от 14pt (около 18.5px) при полужирном начертании. Крупный текст легче читать при более низком контрасте, поэтому для него требования мягче: прохождение уровня AA требует соотношения 3:1, а уровня AAA — 4.5:1 (вместо более строгих порогов для обычного текста).
Какие форматы цвета можно вводить? Вы можете ввести значение в формате hex (например, #1a1a1a), rgb() (например, rgb(26, 26, 26)) или hsl(), либо кликнуть по палитре для выбора цвета. Кнопка со стрелками позволяет быстро поменять местами цвета текста и фона.