Проверка контрастности цветов

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

1. 1. Введите два цвета. Наберите каждый в HEX (#777777), rgb(), hsl() или как название CSS либо выберите в палитре. Поменять местами меняет их местами — удобно для проверки светлого текста на тёмном и тёмного на светлом.
2. 2. Прочитайте коэффициент и таблицу. Коэффициент идёт от 1:1 (одинаковые цвета) до 21:1 (чёрное на белом). Таблица сравнивает его с каждым требованием WCAG и пишет «проходит» или «не проходит» словами, а не только цветом.
3. 3. Определите размер. Для крупного текста требования мягче. В предпросмотре показаны обычный текст, крупный текст, крупный полужирный текст и элемент с рамкой, чтобы вы могли оценить свой случай.
4. 4. Исправьте неподходящую пару. Выберите уровень, к которому стремитесь, и используйте предложенный цвет текста или фона. Инструмент сохраняет оттенок и меняет только светлоту, делая наименьший шаг, при котором требование выполняется.

Что требует WCAG 2.2

Рекомендации по доступности веб-контента (WCAG) 2.2 задают минимальные коэффициенты контраста в трёх критериях успеха. Коэффициент равен (L₁ + 0,05) ÷ (L₂ + 0,05), где L₁ — относительная яркость более светлого цвета, а L₂ — более тёмного.

Крупный текст — это текст не менее 18 pt, или 14 pt полужирным: 24 px и около 18,7 px на экране при 96 dpi. Логотипы, чисто декоративный текст и неактивные элементы управления не подпадают под 1.4.3. Правило 3:1 из 1.4.11 относится к частям элемента управления, нужным для его обнаружения (рамка кнопки, контур флажка), к его состояниям, например фокусу, и к графике, которая нужна для понимания содержания, например линиям на диаграмме.

Как вычисляется коэффициент

Каждый канал sRGB приводится к диапазону 0–1 и линеаризуется: c ÷ 12,92, если c ≤ 0,04045, иначе ((c + 0,055) ÷ 1,055)^2,4. Относительная яркость равна 0,2126 R + 0,7152 G + 0,0722 B. Зелёный весит больше всего, потому что глаз к нему наиболее чувствителен.

WCAG не округляет: коэффициент 4,4999 не проходит порог 4,5. Поэтому инструмент показывает коэффициент, округлённый вниз до двух знаков, — так почти прошедшая пара никогда не выглядит как прошедшая.

Проверка слайдов, плакатов и рисунков

• Слайды и плакаты — не веб-страницы, но коэффициенты WCAG признаны и для них. Основной текст слайда обычно крупный (24 px — это 18 pt); подписи, сноски и подписи осей — нет, их проверяйте как обычный текст.
• Для проекции ставьте цель выше минимума. Проектор в освещённой комнате снижает контраст для всех. Для текста на слайде, который будут показывать в светлом помещении, выберите AAA (7:1).
• Текст поверх фотографии или градиента не имеет одного фона. Проверьте самые светлые и самые тёмные участки за текстом или поместите текст на сплошную панель.
• Диаграммы и рисунки подпадают под 1.4.11: линии, столбцы и маркеры должны иметь 3:1 относительно фона. Цвет сам по себе не должен нести смысл — см. Симулятор дальтонизма.
• Полупрозрачные цвета перед измерением сводятся к сплошным: сначала фон накладывается на белый, затем текст на фон. Если за страницей есть что-то ещё, введите такой цвет напрямую.

Заметка об APCA

Accessible Perceptual Contrast Algorithm (APCA) — кандидатный метод в рабочем проекте WCAG 3; он учитывает размер, толщину и полярность текста. Это проект, а не требование, и ни один закон или стандарт сейчас его не требует. Коэффициенты WCAG 2.x, которые считает этот инструмент, остаются основой для заявлений о соответствии.

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

Какой коэффициент контраста считается хорошим?

4,5:1 или выше для обычного текста соответствует WCAG AA, 7:1 — AAA. Для крупного текста нужно 3:1 для AA и 4,5:1 для AAA. Чёрное на белом — максимум, 21:1. Всё, что ниже 3:1, трудно читать многим людям даже при хорошем зрении.

Что считается крупным текстом в WCAG?

Текст не менее 18 pt (24 px) обычного начертания или не менее 14 pt (около 18,7 px) полужирного. Размер считается так, как он отображается, поэтому шрифт слайда, который на раздаточном материале кажется мелким, при проекции может быть крупным.

Требование контраста относится к значкам и линиям диаграмм?

Да, через критерий успеха 1.4.11 «Нетекстовый контраст»: компоненты интерфейса и графика, необходимые для понимания содержания, должны иметь не менее 3:1 относительно соседних цветов. Декоративная графика и неактивные компоненты не подпадают под требование.

Почему мой цвет показывает 4,49, когда коэффициент почти 4,5?

Потому что WCAG сравнивает точный коэффициент и не засчитывает округление. Пара с коэффициентом 4,4999:1 не проходит требование 4,5:1, поэтому инструмент показывает значение, округлённое вниз до двух знаков, а не 4,50.

Как работают предлагаемые цвета?

Инструмент сохраняет оттенок и насыщенность вашего цвета и сдвигает его светлоту в HSL вверх или вниз небольшими шагами, возвращая ближайшее значение, которое достигает целевого коэффициента, в виде 8-битного HEX-кода. Если ни одна светлота не даёт нужного результата — например 7:1 против среднего серого, — инструмент сообщит об этом и предложит изменить другой цвет.

APCA лучше коэффициента WCAG?

APCA точнее моделирует восприятие, особенно для тёмных тем и тонкого текста, но это часть проекта (WCAG 3), а не принятое требование. Законы о доступности и стандарты закупок, которые ссылаются на WCAG 2.x, используют коэффициент, вычисляемый здесь.