Калькулятор контраста

Коэффициент контрастности измеряет, насколько читаем текст на фоне по шкале яркости от 1:1 (идентичные цвета) до 21:1 (черный на белом). WCAG 2.x использует относительную яркость, вычисляемую на основе шестнадцатеричных значений sRGB, а не только оттенок или насыщенность. Два синих цвета одинаковой светлоты могут вести себя по-разному, если один из них ближе к средне-серому, поэтому зрительные пары цветов не проходят проверку доступности.

Уровень AA требует не менее 4,5:1 для обычного основного текста и 3:1 для крупного текста (18 пт, обычный или 14 пт, жирный и крупнее). Уровень AAA поднимает планку до 7:1 для обычного текста и 4,5:1 для крупного текста. . Нетекстовые компоненты пользовательского интерфейса и графические объекты должны иметь соотношение 3:1 к соседним цветам в соответствии с критерием успеха WCAG 2.1 1.4.11 — этот калькулятор ориентирован на текстовые пары, но применяется та же математика соотношения.

Введите шестнадцатеричные значения переднего плана (текста) и фона. Порядок не меняет соотношение — #333 на #FFF математически равен #FFF на #333, хотя для типографики можно использовать только одну пару. Неверный шестнадцатеричный код возвращает тире до тех пор, пока оба поля не будут проанализированы.

Проработанный пример с полями по умолчанию: передний план #333333, фон #FFFFFF. Темно-серый цвет на белом дает соотношение примерно 12,63:1 — значительно выше АА и ААА для обычного текста. В сводке указано: «Проходит обычный текст WCAG AA». Все строки AA big и AAA имеют надпись «Пройдено». Для серого цвета, такого как #767676 на белом, соотношение падает примерно до 4,54:1 — едва превышая нормальный уровень АА.

В палитрах брендов часто используются акцентные цвета, которые не сочетаются с белым — исправьте их более темными оттенками для текстовых ролей, сохраняя при этом более яркие акценты для крупных заголовков или значков размером более 18 пт. . Не полагайтесь только на толщину шрифта, чтобы спасти низкую контрастность; Жирный шрифт помогает квалифицировать пороговые значения для «крупного текста», но тонкие маленькие прописные по-прежнему считаются обычным текстом.

Распространенные ошибки включают проверку шестнадцатеричных образцов, в то время как в реальном пользовательском интерфейсе используются полупрозрачные наложения (альфа снижает эффективный контраст), игнорирование цветов кольца фокусировки и тестирование только чистого черного цвета #000 вместо смягченных серых тонов основной копии. . Другая ошибка заключается в том, что зеленый/красный цвета статуса читаются по умолчанию — многие из них не работают на белом или темно-сером фоне.

Этот инструмент представляет собой математическую проверку, а не аудит соблюдения законодательства. Реальные обзоры специальных возможностей охватывают порядок фокуса, пути клавиатуры, движение и нецветные индикаторы состояния. Всегда тестируйте с пользователями и вспомогательными технологиями при выпуске рабочего пользовательского интерфейса.

Ограничения: только шестнадцатеричные пары sRGB — без альфа-композиции, градиентов или текста поверх фотографии, если только вы не выбрали плоский цвет. Субпиксельное сглаживание и цветные тени текста могут немного изменить воспринимаемый контраст по сравнению с расчетным соотношением.