Как пользоваться: APCA калькулятор контраста
- Введите цвета текста и фона (в любом CSS-формате).
- Посмотрите значение Lc — чем выше, тем лучше читаемость. Отрицательные значения означают светлый текст на тёмном фоне.
- Проверьте таблицу применения, чтобы понять, подходит ли пара для основного текста, заголовков или только для нетекстовых элементов.
- Сравните результат с коэффициентом WCAG 2, который показан рядом. Сегодня именно он является юридическим и аудиторским стандартом.
Что такое APCA?
APCA (Accessible Perceptual Contrast Algorithm) разработан Эндрю Сомерсом для W3C. Это метод оценки контраста, предложенный для будущих рекомендаций WCAG 3. Вместо коэффициента вроде 4.5:1 он выдаёт значение светлотного контраста Lc примерно от 0 до 106 (положительное для тёмного текста на светлом фоне и отрицательное для светлого текста на тёмном). Метод моделирует то, как зрение человека на самом деле воспринимает контраст, в том числе влияние размера и толщины шрифта.
Почему APCA, а не коэффициент WCAG 2?
- Учёт полярности: WCAG 2 одинаково оценивает белый текст на чёрном и чёрный на белом, а наши глаза воспринимают их по-разному. APCA оценивает эти варианты по-разному.
- Лучше для тёмной темы: формула WCAG 2 завышает контраст для тёмных пар цветов, поэтому некоторые «проходящие» комбинации в тёмной теме на деле трудно читать. APCA выявляет такие случаи.
- Меньше ложных провалов: некоторые читаемые пары средних тонов, например белый текст на оранжевых кнопках, не проходят WCAG 2, тогда как APCA оценивает их более реалистично.
Как читать значение Lc
| Lc | Подходит для |
|---|---|
| 90+ | Предпочтительно для основного текста и длительного чтения |
| 75 | Минимум для основного текста (~18px обычный) |
| 60 | Прочий текстовый контент (~24px обычный или 16px жирный) |
| 45 | Крупные заголовки и крупные подписи интерфейса |
| 30 | Подсказки в полях, неактивные состояния, крупные иконки |
| 15 | Минимум для нетекстовых элементов, например разделителей |
Это упрощённые рекомендации уровня «bronze»; полный подход APCA использует таблицы поиска для каждого размера и толщины шрифта.
Стоит ли использовать APCA сегодня?
WCAG 3 пока остаётся рабочим черновиком, и окончательная версия APCA может измениться. Законы и аудиты в сфере доступности (в том числе Европейский акт о доступности, который ссылается на WCAG 2.1 через EN 301 549) по-прежнему используют коэффициент WCAG 2. Практичный подход: соответствовать WCAG 2 AA для соблюдения требований, а APCA использовать как дополнительную оценку, особенно для тёмных тем и крупного экранного текста. Подробно проверить WCAG 2 можно с помощью проверки контрастности.
Также ищут как: wcag 3, калькулятор контраста wcag 3, lc контраст, перцептивный контраст, проверка контраста текста, контраст текста wcag.
Инструменты, которые хорошо сочетаются с APCA калькулятор контраста
- Симулятор дальтонизма — Загрузите скриншот или дизайн и посмотрите его сразу через восемь типов нарушения цветовосприятия.
- Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
- Конвертер цвета OKLCH — Изучайте перцептивно равномерное цветовое пространство OKLCH с ползунками в реальном времени, проверяйте, входит ли цвет в sRGB, и копируйте соответствующие запасные значения HEX, RGB и HSL.
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.