Проверка контраста цветов
Выберите два цвета и увидите коэффициент контраста с живым предпросмотром.
Коэффициент контраста
—
Съешь ещё этих мягких французских булок да выпей чаю
Инструмент дизайна
Проверка контраста цветов
Проверяйте текст и фон по стандартам доступности WCAG AA и AAA.
Все инструменты
Похожие инструменты
Ещё инструменты для дизайна и разработки.
Как пользоваться проверкой контраста
Откройте палитру Цвет текста и выберите цвет, которым будут набраны ваши слова, затем откройте палитру Цвет фона и задайте цвет позади них. Коэффициент контраста обновляется в тот же момент, как вы меняете любое из значений, а отметки прохождения WCAG AA и AAA показывают, какие уровни доступности выполнены. Живой предпросмотр ниже отображает пример текста в ваших точных цветах, поэтому вы судите о реальном ощущении сочетания, а не только о числе. Если пара не проходит, сдвиньте один цвет светлее или темнее и наблюдайте, как коэффициент растёт, пока проверка не станет пройденной.
Что означает коэффициент контраста
Коэффициент контраста сравнивает воспринимаемую яркость двух цветов и записывается одним числом к единице — от 1:1 для двух одинаковых цветов до 21:1 для чистого чёрного на чистом белом. Руководство по доступности веб-контента (WCAG) использует этот коэффициент, чтобы решить, достаточно ли легко читается текст. Чем больше число, тем сильнее различаются по яркости передний план и фон, поэтому буквы чётко выделяются. Коэффициент зависит только от яркости, а не от оттенка — вот почему два ярких, но одинаково светлых цвета могут выглядеть приятно и всё же не проходить проверку.
Пороги контраста WCAG
WCAG задаёт два уровня соответствия и два размера текста, что даёт четыре минимальных коэффициента. Используйте таблицу как быструю справку при проверке пары цветов.
| Уровень и размер текста | Минимальный коэффициент | Типичное применение |
|---|---|---|
| AA, обычный текст | 4.5:1 | Основной текст, подписи, ссылки |
| AA, крупный текст | 3:1 | Заголовки, крупные кнопки |
| AAA, обычный текст | 7:1 | Строгие сайты с высокой читаемостью |
| AAA, крупный текст | 4.5:1 | Крупные заголовки на уровне AAA |
| Элементы UI и графика | 3:1 | Иконки, рамки, контуры полей |
Крупный текст — это примерно 18pt (24px) обычного начертания или 14pt (18.7px) жирного; всё мельче считается обычным текстом и должно отвечать более высокому коэффициенту.
Разобранный пример
Допустим, в дизайне используется серый текст #777777 на белом фоне #FFFFFF. Проверка показывает около 4.48:1, что чуть-чуть не дотягивает до 4.5:1, нужных для обычного текста AA. Если затемнить серый совсем немного, до #767676, коэффициент поднимается до 4.54:1, и пара уже проходит AA. Это крошечное изменение показывает, почему важно точное число: цвет, который на глаз кажется «достаточно тёмным», может не пройти буквально на волосок, и только точный коэффициент скажет, находитесь ли вы надёжно выше порога.
Чем полезен этот инструмент
Низкий контраст — одна из самых частых и при этом легко устранимых проблем доступности в вебе. Текст, сливающийся с фоном, трудно читать людям со слабым зрением или нарушением цветовосприятия и утомительно всем, кто читает с телефона на ярком солнце. Эта проверка убирает догадки: вместо того чтобы щуриться на макет, вы получаете точный коэффициент и понятную отметку «пройдено/не пройдено» для каждого уровня WCAG, так что дизайнеры, разработчики и авторы текстов решают вопросы цвета за секунды и выпускают интерфейсы, которыми реально может пользоваться больше людей.
Точность и конфиденциальность
Коэффициент вычисляется по официальной формуле относительной яркости WCAG — той же математике, на которую опираются скринридеры и инструменты аудита, поэтому результат совпадает с тем, что покажет формальная проверка доступности. Всё работает локально в вашем браузере. Выбранные цвета никогда не загружаются, не записываются в журнал и не хранятся на сервере, а значит вы можете безопасно тестировать невыпущенные фирменные палитры и закрытые проекты, и ничего не покинет ваше устройство.
Часто задаваемые вопросы
К какому коэффициенту контраста стремиться?
Для соответствия уровню WCAG AA нужно не менее 4.5:1 для обычного текста и 3:1 для крупного. Для более строгого уровня AAA цельтесь в 7:1 для обычного текста и 4.5:1 для крупного. Если сомневаетесь, берите запас выше минимума, потому что блики, дешёвые экраны и мелкий шрифт снижают реальный контраст.
Что считается крупным текстом?
WCAG считает крупным текст примерно от 18pt (около 24px) обычного начертания или от 14pt (около 18.7px) жирного. Крупному тексту разрешён более низкий коэффициент, потому что большие буквы читаются легче даже при меньшей разнице цветов. Всё, что мельче этих размеров, считается обычным текстом и должно отвечать более высокому порогу.
Почему контраст важен для доступности?
У многих людей слабое зрение, нарушение цветовосприятия или они просто читают с плохих экранов при ярком свете. Достаточный контраст сохраняет текст читаемым для них и снижает нагрузку на глаза у всех. Законы и стандарты доступности во многих странах ссылаются на WCAG, поэтому соблюдение этих коэффициентов часто является не пожеланием, а юридическим и профессиональным требованием.
Как вычисляется коэффициент контраста?
Каждый цвет переводится в значение относительной яркости по официальной формуле WCAG, которая взвешивает каналы красного, зелёного и синего так, как яркость воспринимает человеческий глаз. Затем берётся отношение (L1 + 0.05) / (L2 + 0.05), где L1 — более светлый цвет, а L2 — более тёмный. Результаты лежат в диапазоне от 1:1 для одинаковых цветов до 21:1 для чёрного на белом.
Меняет ли результат порядок двух цветов?
Нет. Контраст — это отношение между более светлым и более тёмным цветом, поэтому при перестановке цвета текста и фона число остаётся тем же. Меняется лишь восприятие на практике: тёмный текст на светлом фоне и светлый текст на тёмном могут оба проходить, но ощущаться по-разному, поэтому всегда смотрите и на живой предпросмотр, а не только на число.