Безкоштовна перевірка контрастності кольорів WCAG: перевірте текст і кольори фону на відповідність стандартам AA та AAA у вашому браузері. Введіть шістнадцяткові або rgb значення, перегляньте коефіцієнт контрастності та миттєво пройдіть/не пройдіть. Немає входу, немає завантаження.
Він обчислює коефіцієнт контрастності WCAG 2.x між кольором переднього плану (текст) і кольором фону за допомогою відносної яскравості sRGB. Ви отримуєте числове співвідношення (наприклад, 4,52:1) плюс «склав/не склав» для порогових значень WCAG AA та AAA для нормального тексту та великого тексту. Це помічник із забезпечення якості дизайну, а не повний автоматизований аудит доступності всього вашого сайту.
Шістнадцятковий (#RGB, #RRGGBB, #RRGGBBAA), rgb() і rgba(). Вставте значення палітри брендів із токенів Figma, змінних CSS або документів дизайну. Короткий шістнадцятковий формат, наприклад #fff, розширюється до #ffffff перед обчисленням яскравості.
AA – це загальна базова лінія для законодавства та продукту: 4,5:1 для звичайного тексту, 3:1 для великого тексту. AAA є суворішим: 7:1 нормальний, 4,5:1 великий. Багато маркетингових сайтів націлені на AA для основного тексту та AAA лише на головні заголовки чи інтерфейс користувача з високим ризиком. Цей інструмент показує і те, і інше, щоб ви могли вибрати надійну ціль із дизайном.
Великий текст має звичайну товщину принаймні 18 пунктів (24 CSS пікселів) або принаймні 14 пунктів жирним шрифтом (приблизно 18,66 CSS пікселів). Кнопки, підписи та дрібний шрифт часто не відповідають стандарту AA, навіть якщо заголовки відповідають вимогам — перевіряйте кожен розмір, який ви надсилаєте, а не лише зразок H1.
Ні. Розбір і математика яскравості повністю виконуються у вашому браузері. Неопубліковані експерименти з палітрою та клієнтські кольори NDA залишаються на вашому пристрої. Очистіть поля на спільних машинах після завершення.
Значення rgba та #RRGGBBAA аналізуються, але контраст оцінюється на непрозорих каналах sRGB — засіб перевірки не накладає альфа-текст на фотографічний фон. Для тексту на зображеннях спробуйте ефективний колір за копією або спершу використовуйте суцільне накладання, а потім перевірте ще раз.
так Безкоштовно, без входу для основного співвідношення та шляху проходження/непроходження.