Інструмент використовує офіційну формулу відносної яскравості WCAG, тому його числа збігаються з результатами WebAIM та більшості аудитів доступності. Все працює у браузері - кольори не надсилаються на сервер, обмежень немає.
Перевірка контрасту кольорів
Працює повністю у вашому браузері - без завантаження на сервер і без реєстрації.
Коефіцієнт контрасту
Пройденопотрібно 4.5:1
Пройденопотрібно 3:1
Не пройденопотрібно 7:1
Пройденопотрібно 4.5:1
Великий = 18pt (24px) або 14pt (18,66px) жирний.
Що таке перевірка контрасту кольорів?
Перевірка контрасту кольорів вимірює співвідношення контрасту між кольором тексту й тла та показує, чи відповідає воно стандартам доступності WCAG. Результат - коефіцієнт від 1:1 до 21:1, а також оцінка pass або fail для рівнів AA і AAA при звичайному й великому розмірі тексту.
Як користуватися
- 1Введіть кольори. Вкажіть hex-код, значення rgb() або CSS-назву кольору для тексту й тла - або оберіть їх за допомогою палітри.
- 2Зчитайте коефіцієнт. Співвідношення контрасту оновлюється наживо разом із попереднім переглядом тексту на обраному тлі.
- 3Перевірте значки. Кожен значок показує pass або fail для WCAG AA і AAA при звичайному й великому розмірі тексту.
Кому це знадобиться
- Дизайнери, що перевіряють фірмові кольори ще до передачі в розробку.
- Фронтенд-розробники, які звіряють кольори кнопок, посилань і підписів з WCAG AA.
- Аудитори доступності, що документують порушення контрасту з точними коефіцієнтами.
- Команди контенту й email-маркетингу, які стежать за читабельністю тексту на кольоровому тлі.
Часті запитання
Перевірка контрасту кольорів безкоштовна?
Так - вона повністю безкоштовна, без реєстрації й без обмежень. Усе працює у вашому браузері.
Який коефіцієнт контрасту потрібен для WCAG AA?
WCAG 2.1 рівень AA вимагає коефіцієнта не менше 4,5:1 для звичайного тексту й 3:1 для великого. Рівень AAA підвищує планку до 7:1 для звичайного й 4,5:1 для великого тексту.
Що вважається великим текстом?
Великий текст - це щонайменше 18pt (близько 24px) звичайного накреслення або 14pt (близько 18,66px) жирного. Для такого тексту допустимий нижчий коефіцієнт контрасту, бо більші символи читаються легше.
Як розраховується коефіцієнт контрасту?
За формулою (L1 + 0,05) / (L2 + 0,05), де L1 і L2 - відносна яскравість світлішого й темнішого кольору. Яскравість обчислюється з каналів sRGB за визначенням WCAG 2.x.
Чи підтримуються hex, RGB і CSS-назви кольорів?
Так. Можна вводити 3-, 4-, 6- або 8-значний hex, значення rgb() та rgba(), або будь-яку CSS-назву кольору, наприклад teal. Також можна обрати колір через вбудовану палітру.
Чому однаковий коефіцієнт іноді проходить перевірку, а іноді ні?
Необхідний коефіцієнт залежить від розміру тексту й цільового рівня. Коефіцієнт 3,5:1 не пройде AA для звичайного тексту, але пройде AA для великого - тому завжди перевіряйте відповідно до реального розміру й рівня, який використовуєте.