Перевірка контрастності кольорів
Перевірте, чи текст справді буде читабельним, за стандартом доступності.
- Працює у вашому браузері — ваш текст нікуди не надсилається
- Без реєстрації та квот, безкоштовно користуйтеся скільки завгодно
Як це працює
Світло-сірий текст на білому — найпоширеніша проблема доступності у вебі, і її цілком можна уникнути. Настанови з доступності визначають контрастність як точне співвідношення, тож проходження пари — питання арифметики, а не думки.
Як обчислюється співвідношення
Відносна яскравість кожного кольору обчислюється так, як визначають настанови, — з гамма-корекцією для кожного каналу, — і співвідношення береться між світлішим і темнішим. Результат збігається з тим, що повідомить аудит доступності, бо формула та сама.
Порогові значення
Звичайному тексту потрібно 4,5:1 для AA і 7:1 для AAA. Великому тексту — приблизно 24px, або 18,7px, якщо напівжирний, — потрібно лише 3:1 для AA і 4,5:1 для AAA. Компонентам інтерфейсу та змістовній графіці потрібно 3:1. AA — це те, що вимагає більшість організацій і більшість законодавства.
Чому для великого тексту вимоги менші
Більші літери мають більше пікселів у кожному штриху, тому залишаються розбірливими за нижчої контрастності. Саме тому заголовок може використовувати світліший сірий, ніж основний текст.
Чого співвідношення не охоплює
Воно нічого не говорить про дальтонізм, який є окремою перевіркою, і нічого про те, чи достатньо великий текст і чи розбірливий шрифт. Успішне співвідношення — це нижня межа, а не доказ читабельного дизайну.
Перевірка контрастності кольорів — запитання
Яке співвідношення контрастності мені потрібне?
4,5:1 для звичайного тексту за рівнем AA, 3:1 для великого тексту. AAA підвищує їх до 7:1 і 4,5:1.
Що вважається великим текстом?
Приблизно 24px і більше або 18,7px і більше, якщо напівжирний.
Чи означає успішна перевірка, що мій дизайн доступний?
Ні. Контрастність — одна з багатьох вимог; вона нічого не говорить про дальтонізм, розмір тексту чи розбірливість.