Contrast Checker
WCAG contrast check
WCAG contrast check Запускается локально в вашем браузере
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Средство проверки контрастности измеряет коэффициент контрастности между цветом текста и цветом фона с помощью формулы яркости WCAG и сообщает, какие уровни доступности проходит эта пара. Это проверка, которая определяет, действительно ли основной текст читается: соотношение 4,5 к 1 является минимальным для обычного текста, 3 к 1 для большого текста и границ интерфейса и 7 к 1 для улучшенного соответствия. Судить о контрасте на глаз ненадежно, поскольку глаз гораздо более чувствителен к зеленому, чем к синему, поэтому желтый, который выглядит ярким, и синий, который выглядит темным, могут оцениваться почти одинаково.
Where people use the
- Проверка соответствия основного текста на цветном фоне AA.
- Выбор между черным и белым текстом для цвета кнопки.
- Аудит существующей палитры перед редизайном.
- Документирование решения о доступности в билете.
How to use the
- 1
Установить цвет текста
Введите шестнадцатеричное значение, например 1a1a1a, или воспользуйтесь палитрой цветов. Допускается трехзначное сокращение, например f0a.
- 2
Установите цвет фона
То же самое и с фоном. Предварительный просмотр обновляется при изменении любого из них.
- 3
Прочитайте соотношение
Число варьируется от 1:1 (идентичные цвета) до 21:1 (черное по белому). Выше означает более читабельность.
- 4
Проверьте уровень, который вам нужен
Обычному основному тексту требуется соотношение 4,5 к 1 для АА и 7 к 1 для ААА. Заголовки выделены жирным шрифтом 18 или 14 пунктов, а границы пользовательского интерфейса — 3 к 1.
- 5
Посмотрите на превью, а также на номер
Пара может пройти на бумаге и при этом выглядеть плохо на маленьком размере или на некачественном экране. Если это кажется трудным для чтения, то это трудно читать.
Советы и лучшие практики
- Затемните цвет текста, оставьте более яркий вариант заливки.
- Проверьте наименьший размер текста, который будет фактически использоваться.
- Границы и значки тоже требуют соотношения 3 к 1, а не только текст.
Часто задаваемые вопросы
Какова формула коэффициента контрастности?
После гамма-коррекции каждый цвет преобразуется в относительную яркость с использованием стандартных весов: 0,2126 для красного, 0,7152 для зеленого и 0,0722 для синего. Тогда соотношение представляет собой более светлую яркость плюс 0,05, деленную на более темную плюс 0,05. Результат варьируется от 1:1 до 21:1.
Почему мой фирменный цвет не работает?
Потому что большинство насыщенных цветов средних тонов не могут достигать соотношения 4,5 к 1 по отношению к белому. Обычное решение — затемнить цвет текста, сохраняя при этом более яркий вариант для больших заливок, что большинство систем дизайна и делают с основным цветом.
Достаточно ли передать соотношение, чтобы стать доступным?
Это необходимо, но недостаточно. Очень большой или очень мелкий текст, тонкий шрифт, текст поверх изображений и некоторые формы нарушения цветового зрения — все это влияет на читаемость, выходя за рамки соотношения. Тестируйте с реальными пользователями, где это возможно.
Имеет ли значение направление: светлое на темном или темное на светлом?
Нет. Соотношение симметрично, поэтому соотношение черного на белом и белого на черном составляет 21:1. Что отличается на практике, так это блики и воспринимаемый вес, что является скорее дизайнерским решением, чем соответствием требованиям.
Что считается большим текстом?
В терминах WCAG — 18 пунктов или больше или 14 пунктов или больше, если выделено жирным шрифтом. В CSS-пикселях это примерно 24 пикселя или около 18,66 пикселя при выделении жирным шрифтом.
Где происходит расчет?
Полностью в вашем браузере. Ничего не загружается, поэтому вы можете проверить цвета из руководства бренда, которое еще не опубликовано.