DevToolPal
UK

Перевірка колірного контрасту (WCAG)

Перевірте коефіцієнт контрасту WCAG 2.x для кольору тексту й тла: результат AA та AAA для звичайного й великого тексту та інтерфейсу, живий перегляд і найближчий придатний колір.

Працює локально, нічого не завантажується на сервер

Кольори

Колір тексту
Колір тла

Напівпрозорі кольори спершу змішуються: текст поверх тла, тло поверх білого.

Перегляд

Великий текст

Основний текст має легко читатися всіма, зокрема людьми зі слабким зором або на тьмяному екрані.

Кнопка

Коефіцієнт контрасту

—

Найближчі придатні кольори

Що робить інструмент

Перевірка контрасту показує, чи добре читається колір тексту на кольорі тла згідно з настановами WCAG 2.x (Web Content Accessibility Guidelines). Введіть для тексту й тла будь-який CSS-колір — HEX, rgb(), hsl(), назву кольору чи напівпрозорий колір — і отримайте коефіцієнт контрасту, результат за кожним критерієм AA та AAA і живий перегляд. Якщо пара не проходить, інструмент запропонує найближчі придатні кольори тексту й тла того самого тону. Усе працює у вашому браузері.

Як користуватися

  1. Введіть або виберіть Колір тексту та Колір тла. Поміняти міняє їх місцями.
  2. Перегляньте Коефіцієнт контрасту й список результатів для звичайного тексту, великого тексту та елементів інтерфейсу.
  3. Якщо рівень не пройдено, зазирніть у Найближчі придатні кольори: кожна пропозиція має новий колір, його коефіцієнт, кнопку копіювання й Застосувати.
  4. Увімкніть APCA, щоб побачити ще й контраст світлоти (Lc) із чернетки WCAG 3.

Напівпрозорі кольори змішуються перед перевіркою: текст поверх тла, тло поверх білого.

Приклад

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Як рахується коефіцієнт

Відносна яскравість кожного кольору обчислюється за каналами sRGB (після лінеаризації з вагами 21 % червоного, 72 % зеленого й 7 % синього). Коефіцієнт дорівнює (світліший + 0,05) / (темніший + 0,05) і змінюється від 1:1 для однакових кольорів до 21:1 для чорного на білому. Важить лише світлота, а не тон: чистий червоний на чистому зеленому виглядає яскраво, але дає лише близько 1,3:1.

Пропозиції змінюють тільки світлоту кольору (у HSL) і обирають напрям — темніше чи світліше, — де зміна менша. Іноді жоден відтінок не підходить: на середньому сірому тлі жоден колір тексту не досягає 7:1.

Часті запитання

› Який контраст потрібен?

Рівень AA у WCAG 2.x вимагає щонайменше 4,5:1 для звичайного тексту та 3:1 для великого тексту й елементів інтерфейсу — рамок полів, іконок, контурів фокуса. Рівень AAA вимагає 7:1 для звичайного й 4,5:1 для великого тексту. Більшість законів і правил посилаються на рівень AA.

› Що вважається великим текстом?

Текст від 24px (18pt) звичайного накреслення або від 18,66px (14pt) жирного. Усе менше — звичайний текст, і йому потрібен вищий коефіцієнт.

› Чому 4,49:1 не проходить?

Пороги WCAG точні: коефіцієнт 4,499 не досягає 4,5. Тому інструмент відкидає знаки під час показу, а не округлює вгору, і вирішує за точним значенням.

› Що таке APCA?

APCA (Accessible Perceptual Contrast Algorithm) — метод розрахунку контрасту, запропонований для чернетки WCAG 3. Він дає значення контрасту світлоти Lc, яке залежить від того, який колір є текстом, і краще пасує темній темі. Це ще не нормативний стандарт, тому тут він показаний лише як додатковий орієнтир.