Норма — WCAG 2, по ней считается основное число. APCA из проекта WCAG 3 посчитан рядом отдельным разделом: он точнее описывает читаемость мелкого и светлого текста, но нормой пока не стал, и ссылаться в требованиях на него нельзя.
/tool/contrast-checker/ работает считает браузер
Введите цвет текста и цвет фона — инструмент посчитает контраст по WCAG 2, покажет, какие уровни пара проходит, и подберёт ближайший цвет, с которым она начнёт проходить. Рядом — APCA из проекта WCAG 3, вид пары при дальтонизме, сетка всей палитры и разбор вашего CSS. Всё считает браузер: ни цвета, ни файлы никуда не отправляются.
Порядок цветов на число не влияет: контраст симметричен. Ползунок под полем двигает светлоту, не трогая тон и насыщенность, — это самый короткий путь довести пару до нормы, не потеряв цвет.
Инструмент двигает светлоту в HSL и не трогает тон с насыщенностью: цвет остаётся тем же самым, меняется только то, насколько он светлый. Так пара доходит до нормы, а бренд остаётся узнаваемым.
Порог выбирается выше. Сдвиг показан в пунктах светлоты HSL — на столько процентов надо сделать цвет темнее или светлее.
APCA — модель контраста из проекта WCAG 3. В отличие от WCAG 2 она учитывает кегль и насыщенность и по-разному считает тёмное на светлом и светлое на тёмном. Нормой это пока не является: обязательна WCAG 2, она посчитана выше.
Значение Lc
—
| Кегль |
|---|
Пороги в таблице — уровни APCA: Lc 90 для мелкого основного текста, 75 для обычного, 60 для крупного, 45 для заголовков, 30 — предел, ниже которого текст не ставят вовсе. Насыщенность сдвигает порог: 300 добавляет 15 пунктов, 500 снимает 5, 600 — десять, 700 — пятнадцать. Это упрощённая шкала: официальная таблица подбора кегля в APCA пока меняется от версии к версии, а обязательной нормой остаётся WCAG 2.
Контраст по яркости при дальтонизме почти не меняется — меняется цвет. Если пара держалась на разнице «красный против зелёного», а не на разнице светлот, здесь она схлопнется в две одинаковые полосы, и это видно сразу.
Одна пара за раз — это проверка. Дизайнеру нужна сетка: какие цвета палитры можно ставить друг на друга, а какие нельзя ни при каком кегле. Ячейка закрашена настоящей парой, поэтому сетку видно, а не читаешь.
Вставьте цвета — появится сетка всех пар.
| Текст на фоне |
|---|
—Пар на странице сотни, и руками их не перебирают. Здесь два пути, и оба не требуют переписывать цвета вручную: закладка проверяет живую страницу прямо в браузере, а разбор CSS находит нарушения в исходниках.
Закладка обходит все видимые элементы с текстом, берёт у каждого посчитанный браузером цвет и настоящий фон — со всеми полупрозрачными слоями и наследованием, — сравнивает с порогом по кеглю и насыщенности и обводит нарушителей прямо на странице. Работает на любом сайте, в том числе на закрытом за паролём и на локальном, потому что считает у вас, а не у нас.
Перетащите кнопку «Контраст страницы» на панель закладок браузера. Если панели не видно, нажмите Ctrl + Shift + B, на Маке — Cmd + Shift + B.
Откройте свою страницу и нажмите закладку. Появится список пар, которые не проходят AA, а сами нарушители обведутся на странице.
Каждая строка в списке — ссылка сюда с уже подставленной парой: жмёте и сразу подбираете ближайший проходящий цвет.
Нажать закладку можно прямо здесь: она проверит эту самую страницу и покажет, что нашла. На страницах, где запрещены сторонние скрипты строгой политикой безопасности, закладка не запустится — там остаётся разбор CSS ниже.
Разбор идёт по правилам вида «селектор { объявления }»: берутся объявления color и background, переменные var(--…) подставляются. Правило, где задан только цвет текста, проверяется на фоне страницы — на том, что стоит у body или html, а если его нет, на белом.
| Селектор | Текст | Фон | Контраст |
|---|
Отчёт текстом — для письма и задачи в трекере. CSS — чтобы вставить пару в проект переменными. JSON — чтобы прогонять пары в своей проверке при сборке.
——Вставьте цвет текста и цвет фона в любом виде: #RRGGBB, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …) или английское имя. Можно вставить целую строку из кода — «--brand: #1a73e8;» разберётся так же, как голый цвет.
Смотрите не на само число, а на строки порогов: 4,5 — граница обычного текста, 3 — крупного и нетекстовых элементов. Строка «ваш кегль и насыщенность» отвечает на вопрос применительно к тому тексту, который вы задали в образце.
Если пара не проходит, двигайте ползунок светлоты под полем: подпись под ним говорит, при каких значениях пара начинает проходить AA и AAA. Готовый ответ уже посчитан в разделе «Ближайший проходящий цвет» — там же кнопка подставить.
Текст на фотографии проверяйте картинкой: выберите файл в блоке «Образец», и инструмент найдёт самый светлый и самый тёмный участок и посчитает обе пары. Проходить должна худшая.
Тёмную тему включайте галочкой «Считать вторую пару»: инверсия почти никогда не сохраняет контраст, а обе пары должны проходить одновременно.
Всю палитру проверяйте сеткой: вставьте список цветов, и появится матрица всех пар с отметками. Ссылку на сетку можно отправить в чат — состояние лежит в адресе.
Целую страницу проверяйте закладкой из раздела «Целая страница»: она обходит живой документ в вашем браузере. Если нужен разбор исходников — перетащите туда файл стилей.
Контраст = (L светлого + 0,05) ÷ (L тёмного + 0,05)
Норма — WCAG 2, по ней считается основное число. APCA из проекта WCAG 3 посчитан рядом отдельным разделом: он точнее описывает читаемость мелкого и светлого текста, но нормой пока не стал, и ссылаться в требованиях на него нельзя.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
Белый: каждый канал 255, после деления на 255 получается 1, линеаризация единицу не меняет.
Яркость белого: L = 0,2126 + 0,7152 + 0,0722 = 1.
Чёрный: каждый канал 0, значит L = 0.
Светлый цвет ставим сверху: (1 + 0,05) ÷ (0 + 0,05).
1,05 ÷ 0,05 = 21. Контраст 21:1 — максимум, который вообще возможен в sRGB. Проходит все уровни. APCA на этой же паре даёт Lc 106: тоже потолок, но по своей шкале, где предел около 108.
Для обычного текста AA требует 4,5, AAA — 7. Для крупного текста, от 18 pt или от 14 pt полужирного, пороги ниже: 3 и 4,5. Иконки, границы полей и другие нетекстовые элементы, по которым понятен интерфейс, — от 3.
Потому что 4,5 — жёсткая граница, а яркость растёт нелинейно: между соседними значениями серого разница в сотых. #767676 — самый светлый серый, который ещё проходит AA на белом. Подставьте оба и сравните.
Выберите картинку в блоке «Образец». Инструмент уменьшит её, найдёт самый светлый и самый тёмный участок и посчитает контраст текста с обоими. Проходить должна худшая пара; если она не проходит — нужна подложка, затемнение или обводка.
Да. Цвет текста с альфой складывается с цветом фона, цвет фона с альфой — с белым. Это то же, что делает браузер, когда рисует полупрозрачный слой поверх страницы.
APCA — модель контраста, которую готовят для WCAG 3. Она учитывает кегль и насыщенность и по-разному считает тёмный текст на светлом и светлый на тёмном, поэтому лучше описывает читаемость. Но она не принята: в требованиях, договорах и актах приёмки ссылаются на WCAG 2. Здесь APCA идёт справочно, отдельным разделом.
Потому что в формулу контраста входит только яркость. Насыщенный синий и блёклый синий одной светлоты дают почти одинаковое число. Поэтому ползунок и подбор двигают именно светлоту в HSL: тон остаётся прежним, цвет узнаётся, а контраст меняется.
Никуда. Вся арифметика, чтение файла и разбор стилей выполняются в браузере, страница не делает ни одного сетевого запроса после загрузки. Закладка для проверки страницы тоже работает целиком у вас: она не обращается ни к нашему серверу, ни к чужому.
Да. Пара пишется в адрес в виде #767676-on-ffffff, понимается и запись ?fg=…&bg=…. Кнопка «Ссылка на пару» кладёт адрес в буфер. У сетки палитры своя кнопка — она добавляет к адресу весь список цветов.