Перевірка контрасту кольорів

Як користуватися перевіркою контрасту

1. Задайте Колір тексту і Колір тла. Скористайтеся зразками кольорів або введіть будь-яке значення CSS у поля: код HEX, як-от #595959, rgb(89 89 89), hsl(0 0% 35%), або назву на кшталт navy.
2. Коефіцієнт контрасту оновлюється під час введення: від 1:1 (немає контрасту) до 21:1 (чорний на білому).
3. Таблиця Результати WCAG 2.2 показує Проходить або Не проходить для Звичайний текст, Великий текст та Елементи інтерфейсу та графіка на рівнях AA і AAA.
4. Погляньте на Попередній перегляд: він показує звичайний текст, великий текст, великий жирний текст, контур кнопки та піктограму у ваших двох кольорах.
5. Якщо якийсь рівень не проходить, виберіть Ціль у розділі Підказки. Інструмент запропонує Найближчий прийнятний колір тексту та Найближчий прийнятний колір тла. Натисніть Застосувати, щоб прийняти один із них. Кнопка Поміняти кольори місцями міняє текст і тло.

Усе обчислюється у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Як обчислюється коефіцієнт контрасту

WCAG 2.x визначає коефіцієнт як (L1 + 0,05) / (L2 + 0,05), де L1 – відносна яскравість світлішого кольору, а L2 – темнішого. Відносна яскравість обчислюється з лінеаризованих каналів sRGB: кожен канал декодується кривою передавання sRGB, потім L = 0,2126 R + 0,7152 G + 0,0722 B. Зелений важить найбільше, бо наші очі найчутливіші саме до нього, тому чистий зелений здається значно яскравішим за чистий синій такої самої «сили».

Коефіцієнт ніколи не округлюється вгору. #777777 на білому дає близько 4,48:1 і не проходить AA для звичайного тексту, хоча виглядає як «4,5». Цей інструмент відкидає зайві знаки й показує значення з двома десятковими, тож те, що ви бачите, – це те, що перевіряє WCAG.

Якщо колір тексту напівпрозорий (наприклад rgb(0 0 0 / 60%)), його спершу змішують із тлом, як намалював би браузер. Прозорість кольору тла ігнорується, бо невідомо, що лежить за сторінкою.

Рівні WCAG коротко

«Великий текст» – це щонайменше 18 пт (24 CSS-пікселі) або 14 пт жирним (приблизно 18,66 px). Для логотипів і суто декоративного тексту вимог немає. Правило 3:1 для компонентів інтерфейсу (критерій успіху 1.4.11) стосується рамок полів і кнопок, індикаторів фокуса, піктограм і ліній діаграм, які користувачам потрібно бачити.

Як працюють підказки

Запропоновані кольори зберігають відтінок і насиченість вашого кольору в просторі OKLCH і змінюють лише світлість, у темніший чи світліший бік, доки не буде досягнуто цільового коефіцієнта. Потім інструмент вибирає той із двох напрямків, що візуально ближчий до вашого вихідного кольору, вимірюючи в OKLab. Результат перевіряється ще раз після округлення до коду HEX, тож він справді проходить. Якщо жодна світлість не досягає цілі (наприклад 7:1 щодо середньо-сірого), інструмент повідомляє про це.

Про APCA

APCA (Accessible Perceptual Contrast Algorithm) – новіша модель контрасту, яку розглядають для майбутнього WCAG 3. Вона враховує товщину шрифту, розмір і полярність (темне на світлому проти світлого на темному). Це ще чернетка, а не юридична чи нормативна вимога, тому цей інструмент показує результати WCAG 2.x, що лишаються орієнтиром для європейського стандарту доступності EN 301 549, Section 508 і більшості законів.