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

Для уровня AA требуется 4.5:1 для обычного текста и 3:1 для крупного текста (критерий успеха 1.4.3); для уровня AAA требуется 7:1 и 4.5:1 (1.4.6). Элементы интерфейса и значимая графика должны иметь контраст 3:1 относительно соседних цветов (1.4.11). Инструмент сообщает, пройден ли каждый из этих пяти порогов.

По определению WCAG, крупный текст — это текст размером не менее 18 пунктов обычного начертания (примерно 24 CSS пикселя) или не менее 14 пунктов полужирного начертания (примерно 18,66 CSS пикселя). Текст меньшего размера считается обычным, и для него требуется более высокий коэффициент контрастности.

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

Алгоритм доступной перцептивной контрастности (Accessible Perceptual Contrast Algorithm) — это метод измерения контрастности, разработанный для черновых версий WCAG 3. Он моделирует воспринимаемый контраст светлоты, учитывает различия между текстом и фоном и возвращает значение контраста светлоты Lc в диапазоне примерно от -108 до 106. Пока этот метод не входит ни в один опубликованный стандарт WCAG, поэтому для проверки соответствия используйте результаты WCAG 2, а APCA — как дополнительную проверку.

APCA учитывает полярность: положительные значения означают темный текст на светлом фоне, отрицательные — светлый текст на темном фоне. В рекомендациях используется абсолютное значение, поэтому Lc -75 и Lc 75 относятся к одному уровню.

Они основаны на простом режиме APCA bronze: Lc 90 предпочтительно для основного текста, Lc 75 — минимальное значение для основного текста, Lc 60 — для другого содержимого, Lc 45 — для заголовков и крупного текста, Lc 30 — для текста, который читают лишь при необходимости, например заполнителей, а Lc 15 — для нетекстовых элементов. Размер и начертание шрифта тоже важны, поэтому воспринимайте эти уровни как отправную точку, а не окончательный вердикт.

Реализованы константы APCA-W3 версии 0.0.98 G, редакция 4g: простой показатель степени 2,4 для каналов sRGB, мягкое ограничение черного и отсечение низкого контраста. Для черного текста на белом фоне значение составляет примерно Lc 106.0, а для белого текста на черном — примерно Lc -107.9, что соответствует эталонной реализации.

Шестнадцатеричные коды с # или без него, названия цветов CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), цветовые пространства oklch(), например display-p3, и color(), а также cmyk(). Цвета за пределами sRGB сначала преобразуются в sRGB, поскольку обе формулы рассчитаны на экранные цвета sRGB.

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

Для WCAG 2 порядок не имеет значения, поскольку отношение большей яркости к меньшей остается одинаковым в обоих случаях. Для APCA порядок важен, поскольку текст и фон имеют разный вес, поэтому укажите цвет текста в первом поле, а цвет фона — во втором.