Перевірка контрасту кольорів (WCAG 2.2 AA і AAA)
Перевірка контрасту
Формат hex, наприклад #2f47d9 або #fff.
Звичайний текст: додайте товар у кошик і оплатіть за три кроки.
Великий текст: €129
Рамка й іконка кнопки
Коефіцієнт контрасту
4.54 : 1
| Вимога | Мінімум | Результат |
|---|---|---|
| Звичайний текст, рівень AAWCAG 1.4.3 | 4.5 : 1 | — |
| Великий текст, рівень AAWCAG 1.4.3 | 3 : 1 | — |
| Звичайний текст, рівень AAAWCAG 1.4.6 | 7 : 1 | — |
| Великий текст, рівень AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Іконки, рамки полів та інші елементи інтерфейсуWCAG 1.4.11 | 3 : 1 | — |
Великий текст — це щонайменше 24 px або 18.66 px жирним. Перевірка працює у вашому браузері; кольори нікуди не надсилаються.
Введіть колір тексту і колір фону: інструмент покаже коефіцієнт контрасту за формулою WCAG 2.x, чи проходить пара рівні AA і AAA для звичайного і великого тексту та для елементів інтерфейсу, а також найближчий колір тексту, який досягає 4,5:1.
Що означають результати
| Вимога | Мінімум | Критерій WCAG |
|---|---|---|
| Звичайний текст, рівень AA | 4,5 : 1 | 1.4.3 Контраст (мінімальний) |
| Великий текст, рівень AA | 3 : 1 | 1.4.3 Контраст (мінімальний) |
| Звичайний текст, рівень AAA | 7 : 1 | 1.4.6 Контраст (підвищений) |
| Великий текст, рівень AAA | 4,5 : 1 | 1.4.6 Контраст (підвищений) |
| Іконки, рамки, елементи інтерфейсу | 3 : 1 | 1.4.11 Контраст нетекстових елементів |
Рівень AA — це рівень, на який спираються EN 301 549, Європейський акт про доступність, німецький BFSG і практика США за ADA. AAA суворіший, і ці закони його не вимагають.
Чому контраст важливий для інтернет-магазину
Сірі ціни на білому, білий текст на блідому банері, світлі підказки у формі оформлення замовлення: люди зі слабким зором, старші покупці та будь-хто з телефоном на сонці читають їх повільно або не читають зовсім. Низький контраст — найчастіша проблема, яку автоматична перевірка знаходить на сайтах магазинів. Виправляйте її в налаштуваннях кольорів теми або в її CSS-змінних, а не елемент за елементом.
Як розраховується коефіцієнт
Коефіцієнт порівнює відносну яскравість світлішого і темнішого кольору: (L1 + 0.05) / (L2 + 0.05). Він змінюється від 1:1 (той самий колір) до 21:1 (чорне на білому). Прозорість, тіні та фонові зображення змінюють реальний контраст; текст на зображенні перевіряйте з найтемнішою і найсвітлішою частиною зображення під ним.
Перевірте весь сайт
Цей інструмент перевіряє одну пару кольорів. Pandus знаходить на сторінці кожен текст із низьким контрастом — із кольорами, коефіцієнтом і скриншотом — і щотижня перевіряє кожну сторінку вашого сайту. Див. також правило низький контраст тексту.