1:1 to 21:1 · AA · AAA
Проверка контраста
У чёрного на белом коэффициент контрастности WCAG равен 21:1 — это максимум, а у белого на #0060fd — 5.13:1. Введите цвет текста и фон, чтобы проверить свою пару.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Коэффициент и пять проверок обновляются по мере ввода. Коэффициент обрезается до двух знаков, а не округляется вверх, поэтому 4.499 показывается как 4.49:1 и не проходит проверку 4.5:1.
Scanned by 
NortonTM Safe Web
Коротко
- Цена
- Без оплаты
- Аккаунт
- Не нужен
- Загрузка
- Не применимо — вы вводите цвета, ничего никуда не отправляется
- Формула
- (яркость светлого + 0.05) ÷ (яркость тёмного + 0.05)
- Пороги
- AA: 4.5:1 для обычного и 3:1 для крупного текста; AAA: 7:1 для обычного и 4.5:1 для крупного текста; 3:1 для частей интерфейса
- Стандарт
- Определения относительной яркости и коэффициента контрастности из WCAG 2.2
Коэффициенты контрастности известных пар
Эти строки получены тем же кодом, что и проверка. Галочка означает, что пара соответствует требованию; крестик — что не соответствует.
| Цвет текста | Фон | Коэффициент | AA обычный | AA крупный | AAA обычный | AAA крупный | Части интерфейса |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Проверка | Минимальный коэффициент |
|---|---|
| AA, обычный текст | 4.5:1 |
| AA, крупный текст | 3:1 |
| AAA, обычный текст | 7:1 |
| AAA, крупный текст | 4.5:1 |
| AA, части интерфейса и графика | 3:1 |
Как проверить пару цветов
Введите оба цвета
Введите цвет текста и цвет фона в любой записи CSS или воспользуйтесь палитрами. Кнопка обмена меняет их местами, что удобно для светлого текста на тёмном фоне.
Прочитайте коэффициент
Коэффициент лежит в диапазоне от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Образец под полями показывает пару при 16 px и 24 px, чтобы вы могли оценить результат на глаз.
Посмотрите пять проверок
Каждая плитка показывает «Пройдено» или «Не пройдено» для одного требования WCAG: AA и AAA для обычного текста, AA и AAA для крупного текста и AA для частей интерфейса. Если обычный текст не проходит AA, страница предлагает ближайший цвет текста, который проходит.
Как рассчитывается коэффициент контрастности
WCAG измеряет контраст через относительную яркость — яркость цвета от 0 (чёрный) до 1 (белый). Каждый канал красного, зелёного и синего делится на 255; значение до 0.04045 делится на 12.92, а большее значение возводится в степень: (значение + 0.055) делится на 1.055, затем в степень 2.4. Яркость тогда равна 0.2126, умноженному на красный, плюс 0.7152, умноженному на зелёный, плюс 0.0722, умноженному на синий, что отражает силу реакции глаза на каждый канал. Коэффициент контрастности — это яркость более светлого цвета плюс 0.05, делённая на яркость более тёмного плюс 0.05.
WCAG 2 на уровне AA требует не менее 4.5:1 для обычного текста и 3:1 для крупного, а на уровне AAA — 7:1 и 4.5:1. Крупный текст — это не менее 18 пунктов, то есть 24 пикселя CSS, или не менее 14 пунктов полужирным, около 18.66 пикселя. Критерий успеха 1.4.11 требует 3:1 для частей интерфейса и графики, которые читателю необходимо видеть, например границы поля или линии диаграммы. Коэффициент сравнивается с каждым порогом без округления. Если у цвета есть прозрачность, перед измерением прозрачный фон накладывается на белый, а прозрачный цвет текста — на фон. Эта страница реализует только WCAG 2.x; она не рассчитывает APCA, который обсуждается для одной из следующих версий рекомендаций.
Вопросы о контрасте
Какой коэффициент контрастности WCAG требует для текста?
На уровне AA обычному тексту нужно не менее 4.5:1, а крупному — не менее 3:1. На уровне AAA значения — 7:1 для обычного текста и 4.5:1 для крупного. Коэффициент измеряется между цветом текста и цветом непосредственно за ним.
Что считается крупным текстом?
WCAG определяет крупный текст как текст не менее 18 пунктов, то есть 24 пикселей CSS, или не менее 14 пунктов полужирным, то есть около 18.66 пикселя CSS. Всё, что меньше, считается обычным текстом и требует более высокого коэффициента.
Какой самый светлый серый проходит AA на белом?
#767676 на белом даёт коэффициент 4.54:1 и проходит проверку 4.5:1 для обычного текста. Следующий более светлый серый, #777777, даёт 4.47:1 и не проходит. Для 7:1 (AAA) самый светлый серый — #595959, он даёт 7.00:1.
Почему 4.49 не проходит, хотя похоже на 4.5?
Проверки сравнивают точный коэффициент с порогом. Коэффициент 4.499 ниже 4.5, поэтому он не проходит, а страница печатает его как 4.49:1, не округляя вверх. Реальный пример — чистый красный на белом: 3.99:1 не проходит проверку 4.5:1 для обычного текста, хотя и близок к ней.
Какой контраст нужен значкам, границам и полям формы?
Критерий успеха 1.4.11 «Контраст нетекстового содержимого», добавленный в WCAG 2.1, требует не менее 3:1 между частями интерфейса или графикой, которые читателю необходимо видеть, например границей поля, рамкой фокуса или линией диаграммы, и соседними цветами. Отключённые элементы и чисто декоративная графика исключены.
Делает ли подходящий коэффициент страницу доступной?
Нет. Контраст — лишь одно требование из многих. Не менее важны размер и насыщенность шрифта, межстрочный интервал, передача смысла одним только цветом, видимость фокуса, текст поверх изображений и градиентов, а также то, как страницу видят люди с разным цветовым зрением. Используйте этот результат как один из источников данных и проверяйте страницу на реальном содержимом.