Contrast Checker обчислює коефіцієнт контрастності WCAG 2.1 між двома кольорами й оцінює їх за порогами AA/AAA для звичайного та великого тексту. Живий перегляд показує текст, відрендерений у обраних кольорах, а кнопка "обрати фон сторінки" зчитує колір з поточної сторінки.
Доступність стає все більш обов'язковою — відповідність WCAG є юридичною вимогою в багатьох юрисдикціях, а там, де це не так, низький контраст все одно відштовхує користувачів. Contrast Checker миттєво повідомляє, чи відповідають будь-які два кольори стандартам WCAG. Оберіть колір переднього плану й фону через колірний пікер або вставте hex-значення; інструмент обчислює коефіцієнт контрастності за офіційною формулою яскравості WCAG і оцінює його за чотирма порогами: AA звичайний (≥4.5:1), AA великий (≥3:1), AAA звичайний (≥7:1) і AAA великий (≥4.5:1). Кожен поріг показує чіткий значок "Пройдено/Не пройдено". Живий перегляд відображає великий і звичайний текст в обраних кольорах, тож ви бачите реальний візуальний ефект. Зручна кнопка зчитує фон body поточної сторінки — корисно для перевірки, чи проходить поєднання кольорів на реальному сайті. Усе працює локально у вашому браузері, без завантаження даних.
Використовує офіційну формулу яскравості WCAG для обчислення коефіцієнта контрастності. Результат точний і збігається з будь-яким відповідним перевірником доступності.
Пройдено/не пройдено для AA звичайний (≥4.5:1), AA великий (≥3:1), AAA звичайний (≥7:1), AAA великий (≥4.5:1) — усе показано у вигляді сітки.
Відображає реальний великий і звичайний текст в обраних вами кольорах, тож ви бачите візуальний ефект поряд із числовим коефіцієнтом.
Одним кліком зчитує обчислений колір фону body поточної сторінки — корисно для тестування реальних поєднань.
Введіть hex-значення або скористайтеся вбудованим колірним пікером. Значення синхронізуються в обох напрямках під час редагування.
Одним кліком міняє місцями передній план і фон — корисно для перевірки інвертованих тем чи станів наведення.
Перед фіналізацією колірної палітри перевірте кожен колір тексту на його фоні, щоб забезпечити відповідність WCAG AA — це уникне переробок пізніше.
Скористайтеся функцією "обрати фон сторінки" на живому сайті, потім вставте фактичний колір тексту — знайдіть порушення доступності за кілька хвилин без відкриття Lighthouse.
Коли бренд обирає колір, який може не пройти перевірку доступності, скористайтеся інструментом, щоб знайти найближчий відповідний варіант (темніший/світліший відтінок).
Перевірте, чи кольори станів наведення/активності/недоступності досі відповідають вимогам контрастності, а не лише стан за замовчуванням.
Темні теми часто не проходять перевірку контрастності для сірого тексту на сірому фоні. Перевірте найтемніші відтінки сірого на найтемнішому фоні, щоб виявити такі випадки.
Натисніть іконку Contrast у доку DevSuite Pro. Відкриється панель з полями для кольору переднього плану та фону.
Скористайтеся колірним пікером або вставте hex-значення для кожного. Живий перегляд оновлюється при зміні кольорів.
Велике число (наприклад, 4.8:1) — це коефіцієнт контрастності. Чим вище, тим краще. 3 — абсолютний мінімум; 4.5 — ціль для звичайного тексту.
Значки "пройдено/не пройдено" для AA і AAA, звичайного та великого розміру тексту, одразу показують, для чого підходить ваше поєднання.
Якщо перевірка не пройдена, підкоригуйте кольори. Затемніть передній план або освітліть фон (чи навпаки), поки цільовий рівень не покаже "Пройдено".
Встановіть DevSuite Pro безкоштовно та отримайте понад 64 інструментів розробника
