01
Не путать текст и фон
Сначала вводите цвет текста, затем непрозрачный фон. Обмен меняет полярность; после паузы около 350 мс расчёт обновится.
Color & Accessibility
калькулятор контрастности APCAдля текста на экране
Укажите цвет текста и фона, затем посмотрите Lc со знаком и ориентир для выбранного шрифта.
калькулятор контрастности APCA
Контраст яркости APCA
Lc 101.5
Тёмный текст на светлом фоне
Ориентир для размера шрифта
Выбранные условия: 16px · 400 · Основной текст
Минимальный размер для насыщенности: 15px
В пределах ориентира
Для основного текста ориентир не ниже Lc 75; таблица не подтверждает соответствие стандарту.
300: 18.5px400: 15px700: 13px
Как читать уровни Lc
Lc 90: предпочтительно для основного текста
Lc 75: минимум для основного текста
Lc 60: минимум для беглого чтения
Lc 45: минимум для крупного текста
Lc 30: минимум для любого текста, не основного
Lc 15: почти невидимо, отдельные нетекстовые случаи
APCA — развивающийся метод оценки воспринимаемого контраста; результат не подтверждает соответствие WCAG 2.x или WCAG 3.
Официальная библиотека apca-w3 0.1.9; базовый алгоритм 0.0.98G-4g. Для веб-контента на светящихся экранах. © 2019–2022 Andrew Somers / Myndex.
Расчёт идёт в браузере; значения цветов не загружаются.
Условия текста
Результат актуален.
Тёмный текст на белом и светлый на тёмном фоне не дают симметричного восприятия. Калькулятор контрастности APCA разделяет роли двух цветов, чтобы сохранить знак результата.
Проверка контрастности цветов часто показывает только беззнаковое отношение. Здесь контрастность тёмной темы и светлой выражена величиной Lc, а размер и насыщенность шрифта влияют лишь на рекомендацию.
Зачем нужен калькулятор контрастности APCA
Укажите цвет текста и фона, затем посмотрите Lc со знаком и ориентир для выбранного шрифта.
Направление видно по знаку
Калькулятор контрастности APCA показывает положительный Lc для тёмного текста на светлом фоне и отрицательный для обратного сочетания. Перестановка цветов не прячет полярность.
Число связано с параметрами текста
Таблица показывает минимальные ориентировочные размеры при насыщенности 300, 400 и 700. Изменение размера не меняет Lc самой цветовой пары.
Как читать значение без ложного статуса
02
Указать условия чтения
Выберите размер в CSS-пикселях, насыщенность и назначение текста. Эти настройки меняют справочный ориентир, но не величину Lc.
03
Копировать вместе с условиями
При выключенном автоматическом расчёте нажмите Ctrl или Cmd и Enter. После правки прежний результат нельзя скопировать до пересчёта.
Что показывает одна цветовая пара
Контрастность с полярностью
Официальный алгоритм для sRGB сохраняет знак Lc: контраст текста и фона отличается для светлой и тёмной полярности.
Ориентир по шрифту
Справочная таблица даёт минимальные размеры для насыщенности 300, 400 и 700 без обещания соответствия WCAG.
Проверяемое резюме
Можно скопировать оба HEX, Lc, полярность, размер, насыщенность и назначение текста для обсуждения дизайна.
Границы этого расчёта
- Только непрозрачная пара sRGB
- Допустимы HEX из трёх или шести знаков. Прозрачность, градиент и изображение требуют знания итоговых пикселей.
- Без перевода в AA и AAA
- Значение Lc со знаком нельзя однозначно перевести в отношение WCAG 2.x 4,5:1. Для формальной проверки нужен отдельный расчёт.
- Без сканирования страницы
- Другие тексты, иконки, рамки и состояния фокуса остаются вне анализа. Одна пара цветов не подтверждает доступность всего сайта.
- Без автоматической замены цвета
- Инструмент не исправляет фирменные цвета и не обещает подходящую альтернативу, а оценивает выбранное сочетание.
Вопросы про калькулятор контрастности APCA
Крупный текст — это сколько?
Для этого метода нет одного порога «крупного текста»: ориентир зависит от Lc и насыщенности. Выберите реальные параметры и сверяйтесь с минимальным размером.
Чем WCAG 2.1 отличается от APCA?
WCAG 2.1 использует беззнаковое отношение, а APCA — Lc с полярностью. Они не переводятся один в другой как одинаковые показатели.
Тёмная тема сложнее для доступности?
При смене светлой темы на тёмную знак и величина Lc могут измениться. Проверьте оба направления отдельно, сохраняя роли текста и фона.
Как проверить всю страницу?
Этот инструмент не получает URL и не обходит страницу. Для полной проверки нужны другие средства и ручной осмотр состояний интерфейса.
AA или AAA — к чему стремиться?
Нет. Одна пара не описывает все тексты, кнопки и состояния. Значение Lc также не является доказательством соответствия WCAG.
Нашли неверную оценку пары цветов?
Проверьте цвета в калькуляторе контрастности APCA
Введите следующую пару текста и фона в калькулятор контрастности APCA и сохраните Lc вместе с полярностью и параметрами шрифта.
APCA — развивающийся метод оценки воспринимаемого контраста; результат не подтверждает соответствие WCAG 2.x или WCAG 3.