Перевірка контрасту кольорів
Перевіряйте коефіцієнт контрасту між двома кольорами щодо рівнів доступності WCAG AA та AAA.
Пов'язані інструменти
Як користуватися Перевірка контрасту
- 01
Оберіть колір тексту та колір фону.
- 02
Прочитайте коефіцієнт контрасту та позначки проходження чи непроходження WCAG.
- 03
Коригуйте кольори, доки вони не пройдуть потрібний вам рівень.
Що робить перевірка контрастності
Це перевірка контрастності кольорів за WCAG, яка показує точне співвідношення контрастності між кольором тексту і кольором тла і те, чи відповідає воно рівням доступності AA і AAA. Обирайте кольори зразком або за шістнадцятковим кодом і дивіться живий попередній перегляд.
Налаштовуйте два кольори, доки позначки не пройдуть потрібний вам рівень, а результат оновлюється миттєво під час роботи.
Чому контрастність важлива
Текст, надто близький за світлістю до свого тла, важко або неможливо читати, особливо людям зі слабким зором чи порушеннями сприйняття кольору або будь-кому з телефоном під яскравим сонцем. Достатня контрастність зберігає ваш вміст розбірливим для всіх.
Порогові значення WCAG AA і AAA
Стандарт задають Настанови з доступності вебвмісту (WCAG). Рівень AA, на який орієнтується більшість сайтів і на який посилаються багато законів про доступність, вимагає співвідношення 4,5:1 для звичайного тексту і 3:1 для великого. Рівень AAA суворіший: 7:1 і 4,5:1.
Великий текст має нижчий поріг, бо більші літери залишаються розбірливими за меншої контрастності. Великим він вважається приблизно від 24 px (18 pt) або від 18,66 px (14 pt), якщо жирний.
Як обчислюється співвідношення
Співвідношення обчислюється з відносної яскравості двох кольорів за офіційною формулою WCAG і дає значення від 1:1 (немає контрасту, кольори однакові) до 21:1 (чорне на білому).
Працює у вашому браузері
Усе обчислюється у вашому браузері, тож це миттєво і приватно. Нічого з обраного вами нікуди не завантажується.
Поширені запитання
Який коефіцієнт контрасту мені потрібен?
WCAG AA вимагає 4.5:1 для звичайного тексту та 3:1 для великого тексту (18pt чи 14pt напівжирний). AAA вимагає 7:1 і 4.5:1 відповідно.
Що вважається великим текстом?
Текст розміром щонайменше 24px (18pt) або 18.66px (14pt) напівжирний. Великому тексту дозволено нижчий коефіцієнт контрасту.
Як обчислюється коефіцієнт?
За відносною яскравістю кожного кольору за офіційною формулою WCAG, що дає значення від 1:1 (без контрасту) до 21:1 (чорне на білому).