Як користуватися: Перевірка контрастності
- 1
Введіть два кольори
Введіть колір тексту й колір тла у форматі HEX, rgb(), hsl() або oklch() або відкрийте круглий зразок, щоб вибрати колір.
- 2
Прочитайте результат
Коефіцієнт і п’ять рядків «Пройдено» або «Не пройдено» показують рівні AA та AAA для звичайного й великого тексту, а також правило 3:1 для іконок і рамок.
- 3
Застосуйте виправлення
Якщо якийсь рівень не пройдено, візьміть найближчий темніший чи світліший колір тексту або тла, який проходить перевірку, і скопіюйте нове значення.
Ліміти та Pro
Безкоштовно й без обмежень: будь-яка кількість перевірок, 5 критеріїв WCAG 2.2 для кожної пари, 2 пропоновані виправлення для кожного рівня, який не пройдено, і сітка до 7 кольорів.
Про інструмент: Перевірка контрастності
Цей засіб перевірки контрасту вимірює, наскільки два кольори відрізняються за яскравістю, за формулою відносної яскравості з WCAG 2.2. Така сама формула лежить в основі перевірок доступності в браузерах і плагінів для дизайну. Результат — коефіцієнт від 1:1 (однакові кольори) до 21:1 (чорний на білому). Критерій успіху 1.4.3 вимагає 4,5:1 для основного тексту й 3:1 для великого тексту на рівні AA; критерій 1.4.6 підвищує вимоги до 7:1 і 4,5:1 для рівня AAA; критерій 1.4.11 вимагає 3:1 для значущих нетекстових елементів, як-от рамки фокуса, контури полів уведення й лінії діаграм.
Живий зразок показує в ваших кольорах текст обох розмірів, кнопку з контуром та іконку, тож можна оцінити не лише число, а й читабельність. Коефіцієнти відкидаються до двох знаків після коми, а не округлюються, бо пара з 4,496:1 не відповідає вимозі 4,5:1. Якщо рівень не пройдено, засіб шукає світлість одного з кольорів в OKLCH, зберігаючи відтінок і насиченість, і пропонує найближче значення, що проходить перевірку, окремо для тексту й для тла.
Засіб працює з однотонними кольорами. Він не оцінює текст на фото чи градієнтах, прозорість, відтворення товщини шрифту на конкретному екрані та новіший метод APCA, запропонований для WCAG 3. Тож вважайте успішний результат мінімумом і перевіряйте також на реальних екранах.
Приватність
Обидва кольори залишаються в цій вкладці: коефіцієнт, перевірки «Пройдено» й «Не пройдено» та пропоновані виправлення обчислюються у вашому браузері, а значення кольорів не надсилаються на сервер і не зберігаються.