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

Проверьте контраст между цветом текста и цветом фона на соответствие WCAG 2 и APCA. Инструмент вычисляет коэффициент контрастности WCAG 2 на основе относительной яркости, сообщает, пройдены ли уровни AA и AAA для обычного и крупного текста, а также для UI графики, и дополнительно показывает значение контраста светлоты APCA с пояснением, для чего оно подходит. Создано для дизайнеров и разработчиков, которые создают доступные интерфейсы.

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

### Что означают уровни WCAG?

Для уровня 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 пикселя). Текст меньшего размера считается обычным, и для него требуется более высокий коэффициент контрастности.

### Почему коэффициент 4.499:1 не проходит уровень AA?

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

### Что такое APCA?

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

### Почему значение APCA иногда отрицательное?

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

### Как выбираются уровни рекомендаций APCA?

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

### Какая версия APCA реализована?

Реализованы константы 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 порядок важен, поскольку текст и фон имеют разный вес, поэтому укажите цвет текста в первом поле, а цвет фона — во втором.

Ваша реклама здесь?

[Напишите нам по электронной почте](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набор плагинов для работы агентов с WordPress.](https://sleekwp.com/?ref=oneclickpro)