Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.
Что делает этот инструмент
Инструмент проверки контраста цвета оценивает, насколько хорошо текст читается на фоне. Выберите цвет текста и цвет фона, и он покажет коэффициент контрастности от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом), превью в реальном времени и результат по четырём порогам WCAG: AA и AAA для обычного и для крупного текста.
Коэффициент рассчитывается по формуле относительной яркости WCAG 2: каждый цветовой канал линеаризуется и взвешивается (зелёный весит больше всего, синий — меньше всего), затем яркость более светлого цвета делится на яркость более тёмного, причём к обеим прибавляется 0,05. Для уровня AA нужно 4,5:1 для обычного текста и 3:1 для крупного (не меньше 24px или 18,66px полужирным). AAA поднимает эти пороги до 7:1 и 4,5:1. Расчёт выполняется в вашем браузере.
Когда использовать
- Вы выбираете фирменный цвет для кнопок и проверяете, что белые подписи на нём остаются читаемыми.
- Нужно исправить замечания аудита доступности из Lighthouse или axe о тексте с низкой контрастностью.
- Вы подбираете серый для второстепенного текста: достаточно светлый, чтобы выглядеть второстепенным, но проходящий AA.
- Вы проектируете тёмную тему, где акцентные цвета средней яркости часто не проходят проверку на тёмном фоне.
Пример
#ffffff на #3b82f6
3.68:1 - AA large only
#767676 на #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b на #ffffff
14.63:1 - passes all four
Вопросы об этом инструменте
Почему белый текст на ярко-синей кнопке не проходит проверку?
Насыщенные цвета средних тонов имеют довольно высокую относительную яркость, поэтому контраст белого текста на них часто оказывается между 3:1 и 4,5:1. Для крупных полужирных подписей этого достаточно, а для основного текста — нет. Затемняйте фон на шаг-другой, пока коэффициент не достигнет 4,5:1.
На какой уровень ориентироваться — AA или AAA?
Именно на уровень AA ссылается большинство законов и политик о доступности, поэтому считайте его минимумом. AAA — более строгая цель, к которой стоит стремиться для длинных текстов, предназначенных для чтения, но для каждого элемента она не обязательна.
Распространяются ли требования к контрасту на иконки и рамки?
WCAG 2.1 требует не менее 3:1 для значимой графики и компонентов интерфейса, таких как рамки полей ввода, индикаторы фокуса и иконки, несущие информацию. Для них ориентируйтесь на результат AA для крупного текста.
Можно ли проверить цвет, записанный в RGB или HSL?
Поля выбора цвета работают с hex-значениями. Сначала переведите другие нотации с помощью конвертера HEX в RGB и родственных ему инструментов или конвертера цветов, а затем вставьте hex-код.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.