Проверка пар цветов на доступность

Выберите цвет текста и цвет фона — и этот инструмент проверит, соответствует ли пара требованиям к контрасту Web Content Accessibility Guidelines (WCAG) — стандарту, который используют аудиты доступности, Lighthouse и большинство законодательных требований к цифровой доступности (ADA, EN 301 549, Section 508).

Что такое цветовой контраст WCAG?

WCAG 2.x определяет две формулы. Во-первых, относительная яркость — насколько ярким кажется цвет, с учетом того, как человеческий глаз воспринимает красный, зеленый и синий (L = 0.2126×R + 0.7152×G + 0.0722×B, с использованием линеаризованных каналов sRGB). Во-вторых, коэффициент контраста между двумя цветами — (L1 + 0.05) / (L2 + 0.05), где более светлая яркость делится на более темную, — который варьируется от 1:1 (одинаковые цвета) до 21:1 (чисто черный на чисто белом).

WCAG устанавливает минимальные коэффициенты, чтобы текст был читаем для людей с ослабленным зрением или нарушениями цветовосприятия:

• AA, обычный текст: 4.5:1
• AA, крупный текст (≥18pt или ≥14pt полужирный): 3:1
• AAA, обычный текст: 7:1
• AAA, крупный текст: 4.5:1

AA — это планка, на которую ориентируется большинство сайтов: именно его требуют аудиты доступности и большинство правовых стандартов. AAA строже и в основном актуален для государственных продуктов или продуктов с высокими требованиями к доступности.

Как пользоваться

1. Выберите цвет текста — введите значение hex или воспользуйтесь пипеткой.
2. Выберите цвет фона.
3. Таблица результатов мгновенно обновляется: точный коэффициент контраста и значок «прошло/не прошло» для всех четырех порогов (AA/AAA × обычный/крупный).
4. Если пара не проходит AA для обычного текста, инструмент также вычисляет рекомендуемый доступный цвет текста — ближайшую корректировку яркости вашего исходного цвета (темнее или светлее, в зависимости от того, какое изменение визуально меньше), которая достигает 4.5:1, сохраняя тот же оттенок и насыщенность.

Часто задаваемые вопросы

Почему одна и та же пара иногда проходит для крупного текста, но не проходит для обычного? Крупный и жирный текст легче читается при более низком контрасте, поэтому WCAG смягчает коэффициент до 3:1 (AA) или 4.5:1 (AAA) для текста не меньше 18pt или 14pt полужирного.

Влияет ли на это дальтонизм? Коэффициент контраста — это расчет яркости, а не разницы цветов, поэтому он довольно устойчив к распространенным формам нарушения цветовосприятия — но он не заменяет проверку того, что информация не передается только оттенком (например, для «красный = ошибка» нужен еще и значок или текстовая подпись).

Почему рекомендуемый цвет текста — не тот оттенок, который я ввел? Это тот же оттенок и та же насыщенность — меняется только яркость, в ту сторону (к черному или к белому), которая достигает 4.5:1 с наименьшим отклонением от вашего исходного цвета.

А если мне нужно соответствие AAA? Проверьте строки AAA в таблице результатов. Функция рекомендуемого цвета сейчас нацелена на AA для обычного текста (4.5:1) — порог, который используют большинство аудитов; цвет, соответствующий AA, не всегда соответствует AAA.

Передаются ли мои данные о цвете куда-либо? Нет — все вычисления выполняются полностью в вашем браузере. Ничего не загружается и не сохраняется.