Проверка контрастности цветов (WCAG)
Проверьте коэффициент контрастности цвета текста и фона по WCAG 2.2 AA и AAA для обычного текста, крупного текста и элементов интерфейса и получите ближайшие проходящие цвета
Загрузка инструмента…
Выберите цвет текста и цвет фона, чтобы сразу получить коэффициент контрастности по WCAG 2.2 и результаты для уровней AA и AAA. Если уровень не достигнут, страница предлагает ближайший проходящий цвет, у которого изменена только светлота. Полезно, чтобы проверить, хорошо ли читается текст на сайте, в приложении или в презентации.
Как пользоваться
- На вкладке «Проверить два цвета» задайте «Цвет текста» и «Цвет фона» с помощью палитры или введя HEX, rgb() или hsl().
- Введите свой текст в поле «Предложение для предварительного просмотра», чтобы увидеть его как обычный, крупный и жирный текст, а также как рамку и значок.
- В разделе «Ближайшие проходящие цвета» нажмите «Применить» рядом с «Изменить цвет текста» или «Изменить фон». Нажмите на значение HEX, чтобы скопировать его.
- На вкладке «Проверить палитру» введите от 2 до 12 цветов, чтобы получить таблицу всех сочетаний и список «Пары, достигающие уровня».
Как это работает
- Коэффициент контрастности = (L1 + 0,05) ÷ (L2 + 0,05), где L1 и L2 — относительные яркости двух цветов. Он лежит в пределах от 1:1 до 21:1 и округляется вниз до двух знаков после запятой.
- Уровни соответствуют критериям WCAG 2.2: 1.4.3 (AA: 4,5:1 для обычного текста, 3:1 для крупного), 1.4.6 (AAA: 7:1 и 4,5:1) и 1.4.11 (3:1 для элементов интерфейса). Крупный текст — это 24px, или жирный 18.66px, или больше.
- Предложенный цвет сохраняет оттенок и насыщенность в OKLCH и меняет только светлоту, пока уровень не будет достигнут. Если никакая светлота не позволяет его достичь, страница сообщает об этом.
- Последние цвета, предложение и список палитры сохраняются в этом браузере.
Частые вопросы
- Что означает коэффициент контрастности 4,5:1?
- Относительная яркость более светлого цвета плюс 0,05 в 4,5 раза больше, чем относительная яркость более тёмного цвета плюс 0,05. Это минимум для текста обычного размера на уровне AA.
- Проходит ли серый текст #777777 на белом фоне?
- Его коэффициент 4,47:1, чуть ниже 4,5:1, поэтому проходит только уровень для крупного текста. На шаг темнее, #767676, даёт 4,54:1 и проходит AA.
- В чём разница между AA и AAA?
- AA требует 4,5:1 для обычного текста, AAA — 7:1. Большинство сайтов ориентируются на AA; AAA подходит для длинных текстов для чтения.
- Нужен ли контраст рамкам кнопок и значкам?
- Да. Согласно WCAG 1.4.11, элементы интерфейса и графика, несущие смысл, должны иметь контраст не менее 3:1 с окружением; это проверяет строка «Элементы интерфейса и графика».