Перевірка контрасту – Contrast Checker

Ця Перевірка контрасту перевіряє колірний контраст WCAG та APCA для відповідності ADA — тест на доступність кольору для будь-якого…

✅ Що ви отримаєте від цієї перевірки контрасту: - співвідношення контрасту WCAG 2.2 та APCA Lc, - елементи з проблемами, виділені на сторінці, - CSS-правила, які створили кольори, відстежені через карти джерел (якщо доступні), - вбудований інструмент вибору кольору з аналізатором контрасту та запропонованими альтернативами, - живий попередній перегляд виправлень, - експорт виправлень у CSS (з коментарями для локалізації джерел). 🔍 Створено як веб-сайт для перевірки кольорового контрасту, який проходить через псевдостани, shadow DOM, iframe з однаковим походженням та текст над зображеннями і градієнтами — не лише плоскі фони. ⚠️ Потрібно дозволення на налагодження. Покриття цієї перевірки контрасту можливе лише через протокол Chrome DevTools, який потребує дозволу 'debugger'. Після підключення Chrome показує інформаційну панель на всіх вкладках і не приховує її при відключенні. ⚡ Високоефективний робочий процес: • Бачте всі елементи з проблемами доступності кольору, виділені на одному погляді. • Попередній перегляд змін миттєво, з перерахованими співвідношеннями контрасту та вердиктами. • Застосовуйте власний CSS на вкладці Stylesheet; проблеми, що підлягають виправленню, позначені у списку. • Щоб перевірити контраст кольору вручну, використовуйте вбудований інструмент вибору кольору: лівий клік для встановлення переднього плану, правий клік для фону, і співвідношення оновлюється миттєво. • Використовуйте вкладку Exclusions, щоб приховати все, крім елементів, які ви виправляєте. 📐 Критерії, що стоять за вердиктами. Ця перевірка співвідношення контрасту тестує доступність кольору відповідно до вимог WCAG та APCA. APCA Lc оцінюється за порогами Bridge-PCA, які є суворішими, ніж відповідні співвідношення WCAG — тому проходження Bridge-PCA завжди означає проходження WCAG. 🔬 Що таке APCA? APCA (Алгоритм доступного сприйнятливого контрасту) — це модель, яка відстежує, як люди читають текст на екрані. Дві пари кольорів з однаковим співвідношенням WCAG можуть виглядати помітно по-різному, і їх APCA Lc (контраст яскравості) це відображає: пара може пройти WCAG, але бути важкою для читання. Цей веб-сайт для перевірки доступності кольору обчислює обидва числа. 🚧 Обмеження: 1. Як і кожен інший веб-сайт для перевірки доступності, цей надає оцінки з найкращими зусиллями, а не сертифікат відповідності. 2. Покриття лише текстове; перевірка нетекстових елементів (WCAG 1.4.11) запланована на майбутнє. 3. Cross-origin iframe не обробляються. 4. Складні фони та анімації вибираються за обмеженою кількістю просторових та тимчасових точок; співвідношення найгіршого зразка повідомляється, але може бути оптимістичним; зразок також може бути введений в оману артефактами рендерингу. 5. Дуже динамічні сайти можуть створювати помилкові проблеми. 6. Ця перевірка контрасту кольору не виконує автоматичне OCR на зображеннях; тестуйте зображення з значущим текстом за допомогою вбудованого інструмента вибору кольору. 🔒 Конфіденційність та дозволи. ▸ Виконується локально; жодні дані веб-сторінки ніколи не залишають вашого комп'ютера. ▸ Тільки 'activeTab': скрипт аналізу вставляється, коли ви натискаєте на іконку панелі інструментів. ▸ Потрібно дозволення 'debugger', щоб зайти в Shadow DOM та iframe, відстежити джерела CSS та вибрати складні фони. 🧮 Деталі точності. Напівпрозорий текст та непрозорість предків обробляються правильно: передній план компонується над своїм реальним фоном перед вимірюванням яскравості, тому повідомлене співвідношення відповідає тому, що насправді бачать користувачі. Широкогамутні кольорові функції — oklch, lab, lch, color(display-p3) — також підтримуються, обмежені до sRGB, коли виходять за межі гамми. 🎨 Текст над зображеннями та градієнтами. На відміну від більшості подібних інструментів, цей не відмовляється від нетекстурованих фонів або не довіряє тому, що повідомляє 'getComputedStyle' / 'CSS.getBackgroundColors'. Він проходить через порядок малювання браузера, щоб скомпонувати реальний фон — непрозорість, режими змішування, лінійні градієнти, фільтр фону — і коли цього недостатньо, цей інструмент перевірки контрасту кольору вибирає відрендерені пікселі у місці розташування тексту. ❓ Питання та відповіді 📌 Чому одна й та ж пара кольорів іноді отримує різні вердикти за WCAG та APCA? ↳ WCAG вимірює яскравість; APCA вимірює сприйнятливий контраст. Пара, яка проходить 4.5:1, все ще може не досягти порогу Bridge-PCA Lc — суворішої моделі. 📌 Чи замінює APCA WCAG? ↳ Ні — APCA не є заміною, а корисною другою думкою. Ця перевірка контрасту повідомляє обидва. 📌 Чи можу я сканувати локальний файл або свій сервер розробки за допомогою цього інструмента доступності? ↳ Так. Увімкніть "Дозволити доступ до URL-адрес файлів" у налаштуваннях розширення. Відкрийте URL-адресу file:// або localhost і натисніть на іконку панелі інструментів. Тільки chrome://, Chrome Web Store та інші обмежені схеми пропускаються. 📌 Чи сертифікує цей інструмент відповідність ADA? ↳ Ні. Він перевіряє лише контраст кольору — один аспект доступності. Відповідність ADA є юридичним визначенням, що охоплює багато стандартів і критеріїв (семантика, доступ з клавіатури, альтернативний текст, субтитри та інше) і має оцінюватися кваліфікованим фахівцем.