Як користуватися
- Введіть колір тексту (переднього плану) та колір тла у форматі HEX, rgb(), hsl() або іншому форматі CSS чи скористайтеся палітрами.
- Перегляньте коефіцієнт контрастності та результат перевірки для кожної вимоги WCAG.
- Якщо вимога не виконується, виберіть цільовий рівень і застосуйте запропонований колір: відтінок залишиться незмінним, зміниться лише світлість.
- Натисніть «Поміняти місцями», щоб перевірити зворотне поєднання, наприклад світлий текст на темній кнопці.
Як це працює
Співвідношення обчислюється за визначенням WCAG 2.2: відносна яскравість кожного кольору розраховується за його каналами sRGB, а співвідношення дорівнює (світліший + 0.05) ÷ (темніший + 0.05). Воно варіюється від 1:1 (однакові кольори) до 21:1 (чорний на білому).
Перевіряються такі вимоги: критерій успіху 1.4.3 (AA) вимагає співвідношення 4.5:1 для звичайного тексту та 3:1 для великого; 1.4.6 (AAA) — 7:1 і 4.5:1; 1.4.11 вимагає 3:1 для елементів інтерфейсу та важливої графіки, як-от рамки полів введення й піктограми. Великий текст — це текст розміром щонайменше 24px звичайного накреслення або приблизно 18.66px жирного. WCAG не дозволяє округлювати значення вгору, тож 4.49:1 не відповідає рівню AA, хоча й майже досягає вимоги; показане тут співвідношення усічене, а не округлене.
Підказка зберігає відтінок і насиченість кольору тексту в OKLCH та шукає найближче значення світлоти — темніше або світліше, — яке відповідає цільовому рівню. Контрастність — лише один із чинників читабельності: також важливі товщина й розмір шрифту та особливості сприйняття кольорів. WCAG 2.2 — це актуальна рекомендація W3C, на яку посилається більшість законів про доступність.
Приклади
Сірий текст, якому трохи бракує контрасту
Сірий текст #777777 на білому тлі має співвідношення 4.48:1. Цього достатньо для великого тексту та компонентів інтерфейсу, але не для звичайного тексту за рівнем AA. Найближчий сірий, що відповідає вимогам, — приблизно #767676 із показником 4.54:1.
Білий текст на фірмовій кнопці
Білий текст на тлі #ff8800 має співвідношення приблизно 2.4:1 — цього недостатньо навіть для рівня 3:1, потрібного для великого тексту. Зазвичай помаранчевий затемнюють або замінюють білий текст на темний; підказка покаже, наскільки темним має бути колір тексту.
Перевірка рамки поля форми
Світло-сіра рамка #cccccc на білому тлі має співвідношення приблизно 1.6:1. За критерієм 1.4.11 рамка, що позначає поле введення, має відповідати вимозі 3:1, тож потрібен колір приблизно #949494 або темніший.
Поширені запитання
Яке співвідношення контрастності потрібне для WCAG AA?
4.5:1 для звичайного основного тексту, 3:1 для великого тексту (24px або 18.66px жирного) та 3:1 для компонентів інтерфейсу й важливої графіки. Для рівня AAA потрібно 7:1 для тексту та 4.5:1 для великого тексту.
Чи має відповідати вимогам текст логотипа або вимкненої кнопки?
Ні. WCAG робить виняток для тексту в логотипах і назвах брендів, суто декоративного тексту та тексту в неактивних (вимкнених) елементах інтерфейсу.
Чому мій результат трохи відрізняється від результату іншого засобу перевірки?
Деякі інструменти округлюють значення до одного десяткового знака або округлюють його вгору. WCAG порівнює точні значення, тому цей інструмент усікає результат до двох десяткових знаків. Невеликі відмінності також можуть виникати через введені кольори з альфа-каналом.
Що таке новий метод вимірювання контрастності APCA?
APCA — це інший метод, запропонований для майбутньої версії WCAG. Він не входить до WCAG 2.2, за якою працює цей інструмент і на яку посилаються чинні правила доступності.
Конфіденційність
Кольори перевіряються у вашому браузері. Дані не завантажуються на сервер і не зберігаються.