Проверка контрастности цветов
Введите цвет текста и цвет фона, чтобы получить коэффициент контрастности WCAG и результат AA и AAA («проходит» или «не проходит») для обычного и крупного текста, с живым предпросмотром.
Работает в браузере; введённые вами данные не покидают устройство
Коэффициент контрастности –
| Применение | Нужно | Результат |
|---|---|---|
| Обычный текст, AA | 4,5:1 | |
| Обычный текст, AAA | 7:1 | |
| Крупный текст, AA | 3:1 | |
| Крупный текст, AAA | 4,5:1 |
Используется коэффициент контрастности WCAG 2.x, который измеряет только контраст по яркости. Он не оценит сочетания, трудные при дальтонизме, например красного на зелёном, тонкие или мелкие шрифты и текст поверх изображений и градиентов. Понимает HEX (3, 4, 6 или 8 цифр), rgb(), hsl() и названия цветов CSS; другие записи цвета CSS читает ваш браузер, если может.
Как проверить контрастность цветов
- Введите или вставьте цвет текста и цвет фона в виде HEX,
rgb(),hsl()или названия цвета CSS, напримерnavy, либо выберите каждый с помощью палитры. - Посмотрите коэффициент контрастности: от 1:1 при отсутствии контраста до 21:1 для чёрного на белом.
- Сверьтесь с таблицей: обычному тексту нужно 4,5:1 для AA и 7:1 для AAA, а крупному — 3:1 для AA и 4,5:1 для AAA. Предпросмотр показывает, как выглядит текст.
Что означает коэффициент контрастности
Коэффициент контрастности WCAG сравнивает яркость двух цветов. Каждый цвет переводится в относительную яркость от 0 (чёрный) до 1 (белый): берутся значения sRGB с убранной гамма-кривой, а три канала взвешиваются по тому, насколько яркими их видит глаз: больше всего зелёный, затем красный, затем синий. Коэффициент равен яркости более светлого цвета плюс 0,05, делённой на яркость более тёмного плюс 0,05, поэтому он лежит в пределах от 1:1 для одинаковых цветов до 21:1 для чёрного на белом.
WCAG 2 задаёт минимумы в зависимости от размера текста. Обычному тексту нужно 4,5:1 для уровня AA и 7:1 для более строгого уровня AAA. Крупному тексту, который читать легче, нужно 3:1 для AA и 4,5:1 для AAA. Крупным считается текст не менее 24 px или примерно 18,7 px полужирного начертания.
Коэффициент учитывает только яркость. Два цвета могут пройти проверку и всё же плохо различаться людьми с дальтонизмом, а тонким шрифтам и тексту поверх фотографии может потребоваться контраст выше минимального. Считайте это число нижней границей и смотрите на предпросмотр.
Для разработчиков и ИИ-агентов
Нужно проверять контраст в коде, на этапе сборки или из ИИ-агента? Для этого есть API: смотрите руководство по API проверки контрастности цветов.
Советы
- Нужно сначала перевести цвет между HEX, RGB, HSL и CMYK? Воспользуйтесь «Конвертером цветов».
- Подбираете набор сочетающихся цветов? «Генератор цветовых палитр» показывает контраст с белым и чёрным для каждого образца.
- Нужен цвет пикселя на скриншоте? Используйте «Определить цвет на изображении».
Вопросы и ответы
Как рассчитывается коэффициент контрастности?
По формуле WCAG 2.x: относительная яркость каждого цвета вычисляется по его значениям sRGB, а коэффициент равен (более светлый + 0,05), делённому на (более тёмный + 0,05). Он лежит в пределах от 1:1 (нет контраста) до 21:1 (чёрный на белом). Коэффициент показывается с двумя знаками после запятой, а рядом выводится неокруглённое значение.
Какие коэффициенты требуют AA и AAA?
Обычному тексту нужно 4,5:1 для AA и 7:1 для AAA. Крупному тексту, то есть не менее 24 px обычного начертания или примерно 18,7 px полужирного, нужно 3:1 для AA и 4,5:1 для AAA. Коэффициент не округляется вверх до порога: 4,499:1 показывается как 4,49 и не проходит AA для обычного текста.
Почему #777777 на белом не проходит AA?
Его контраст равен 4,48:1, чуть ниже 4,5:1, которые AA требует для обычного текста, поэтому для основного текста он не проходит, но проходит для крупного, которому нужно всего 3:1. Чуть более тёмный серый, например #767676, даёт 4,54:1 и проходит.
Как обрабатываются прозрачные цвета?
Частично прозрачный цвет текста сначала смешивается с фоном так, как это показал бы экран, и измеряется смешанный цвет. Частично прозрачный фон считается лежащим на белом. После смешивания каналы округляются до целых значений.
Означает ли проходящий коэффициент, что текст доступен?
Не сам по себе. Коэффициент измеряет только контраст по яркости. Он ничего не говорит о сочетаниях, трудных при дальтонизме, об очень тонких шрифтах, тексте на фотографиях или градиентах и о том, не передаётся ли смысл только цветом. Считайте его минимумом, а не гарантией.
Что-нибудь отправляется на сервер?
Нет. Цвета читаются и измеряются в вашем браузере, и введённые вами данные не покидают устройство.