Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.
Що робить цей інструмент
Перевірка контрасту кольору показує, наскільки читабельний текст на певному фоні. Виберіть колір тексту й колір фону — і побачите коефіцієнт контрастності від 1:1 (однакові кольори) до 21:1 (чорне на білому), попередній перегляд наживо, а також те, чи проходить пара чотири пороги WCAG: AA і AAA для звичайного та для великого тексту.
Коефіцієнт обчислюється за формулою відносної яскравості WCAG 2: кожен колірний канал лінеаризується і зважується (зелений важить найбільше, синій — найменше), а яскравість світлішого кольору ділиться на яскравість темнішого, причому до обох додається 0,05. AA вимагає 4,5:1 для звичайного тексту і 3:1 для великого (щонайменше 24px або 18,66px жирним). AAA підвищує ці пороги до 7:1 і 4,5:1. Обчислення виконується у вашому браузері.
Коли використовувати
- Вибір фірмового кольору для кнопок і перевірка, чи лишаються білі написи на ньому читабельними.
- Виправлення проваленого аудиту доступності в Lighthouse чи axe, який повідомляє про низькоконтрастний текст.
- Підбір сірого для другорядного тексту, який досить світлий, щоб виглядати другорядним, але проходить AA.
- Розробка темної теми, де акценти середніх тонів часто не проходять перевірку на темному фоні.
Приклад
#ffffff на #3b82f6
3.68:1 - AA large only
#767676 на #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b на #ffffff
14.63:1 - passes all four
Запитання про цей інструмент
Чому білий текст на яскраво-синій кнопці не проходить перевірку?
Насичені кольори середніх тонів мають досить високу яскравість, тож білий текст на них часто дає коефіцієнт між 3:1 і 4,5:1. Цього досить для великих жирних написів, але не для основного тексту. Затемніть фон на крок-два, доки коефіцієнт не сягне 4,5:1.
На який рівень орієнтуватися — AA чи AAA?
Саме на AA посилається більшість законів і політик щодо доступності, тож вважайте його мінімумом. AAA — суворіша мета, якої варто досягати для довгого тексту для читання, але для кожного елемента вона не обов’язкова.
Чи стосуються вимоги до контрасту також іконок і рамок?
WCAG 2.1 вимагає щонайменше 3:1 для змістовної графіки та компонентів інтерфейсу, як-от рамок полів введення, кілець фокуса й іконок, що несуть інформацію. Орієнтуйтеся для них на результат AA для великого тексту.
Чи можна перевірити колір, записаний як RGB чи HSL?
Засоби вибору кольору працюють із hex-значеннями. Спершу переведіть інші нотації за допомогою інструментів на кшталт конвертера HEX у RGB або конвертера кольорів, а потім вставте hex-код.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.