Перевірка контрастності кольорів WCAG — безкоштовно
Перевіряйте, чи два кольори відповідають стандартам контрастності WCAG AA та AAA для доступності. Живий перегляд при різних розмірах тексту з автоматичними рекомендаціями при низькому контрасті.
Великий заголовок
Основний текст середнього розміру (18px) для читання.
Основний текст звичайного розміру (16px) для абзаців.
Дрібний основний текст (14px) для підписів і метаданих.
Коефіцієнт контрасту
Вимагає 4.5:1 · Ваш показник 14,63:1
Вимагає 3.0:1 · Ваш показник 14,63:1
Вимагає 7.0:1 · Ваш показник 14,63:1
Вимагає 4.5:1 · Ваш показник 14,63:1
Вимагає 3.0:1 · Ваш показник 14,63:1
Швидкі пресети
На основі рекомендацій WCAG 2.1 з контрастності. Великий текст = 18pt (24px) звичайний або 14pt (18.66px) жирний. HEX-коди синхронізуються в обох напрямках: введіть HEX або виберіть колір — обидва поля залишаються синхронізованими.
Типові застосування
- Аудит веб-сторінок для відповідності WCAGПеревірте, що кольори тексту вашого сайту відповідають стандартам контрастності WCAG AA або AAA для доступності.
- Перевірте комбінації кольорів брендуПротестуйте комбінації кольорової палітри бренду, щоб переконатися, що вони працюють для доступного дизайну UI.
- Протестуйте палітри кольорів темного режимуСвітлий текст на темному тлі все одно може не мати контрасту - перевірте тут комбінації палітри темного режиму.
- Комбінації кольорів для матеріалів друкуПлакати, вивіски та матеріали друку також потребують читаного контрасту - особливо для старших читачів.
- Проектування доступних кольорів кнопокПереконайтеся, що CTA, кнопки дій та посилання відповідають WCAG відносно їхнього фону.
Як це працює
Перевірка контрасту працює повністю у вашому браузері за алгоритмом відносної яскравості WCAG 2.1 — без бібліотек і сервера, лише власноруч написана математика, що точно відповідає специфікації. Кожен результат оновлюється в реальному часі, коли ви вводите чи вибираєте колір.
- 1Введення й нормалізація hexПриймаються 3-значні (#abc) і 6-значні (#aabbcc) значення hex, які нормалізуються до повних трійок RGB. Некоректне введення одразу відхиляється, а не мовчки замінюється чорним, тож з’являється червона рамка, а не оманливий успішний результат.
- 2Обчислення яскравості за WCAGКожен колір перетворюється на відносну яскравість за формулою WCAG 2.1: значення каналів sRGB лінеаризуються кусковою гамма-корекцією (ділення на 12.92 нижче 0.03928, піднесення до степеня 2.4 вище), а потім зважуються як 0.2126R + 0.7152G + 0.0722B.
- 3Коефіцієнт контрасту та перевірки відповідностіКоефіцієнт контрасту обчислюється як (світліший + 0.05) / (темніший + 0.05) і перевіряється щодо всіх п’яти порогів WCAG: AA для звичайного тексту (4.5:1), AA для великого тексту (3:1), AAA для звичайного тексту (7:1), AAA для великого тексту (4.5:1) та елементи інтерфейсу (3:1). Результати оновлюються з кожним натисканням.
- 4Пропозиції виправлень зі збереженням відтінкуКоли пара не проходить WCAG AA, інструмент шукає в просторі світлоти HSL — крокуючи від початкової світлоти в обидва боки — найближчий варіант кожного кольору, що проходить 4.5:1 зі збереженням того самого відтінку й насиченості. Також доступний EyeDropper API (Chromium), щоб узяти будь-який колір прямо з екрана.
Схожі інструменти
Симулятор кольорової сліпоти
Дивіться, як ваш дизайн виглядає для людей із порушеннями кольорового зору. Симулює протанопію, дейтеранопію, тританопію, акроматопсію та слабші аномалії.
Яка роздільна здатність мого екрана
Подивіться роздільну здатність екрана в CSS і реальних пікселях, розмір вікна, співвідношення пікселів, глибину кольору, HDR, підтримку дотиків і частоту оновлення, а також скопіюйте все це.
Тест на биті пікселі
Перевірте екран на наявність битих або застряглих пікселів за допомогою повноекранних чорного, білого, червоного, зеленого, синього та сірого кольорів, а також додаткового інструменту для виправлення застряглих пікселів.