Проверка контраста цветов
Проверьте любое сочетание цветов по стандарту WCAG 2.1. Посмотрите, как ваши цвета выглядят для людей с нарушением цветового зрения — сразу, бесплатно, прямо в браузере.
Нормальное цветовое зрение
Как это сочетание выглядит при нарушении цветового зрения
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
Как связаны контраст цветов и доступность
Требования WCAG к контрасту
Руководство по доступности веб-контента (WCAG) задаёт минимальные коэффициенты контраста, чтобы текст оставался читаемым для людей со слабым зрением или дальтонизмом:
- 4.5:1 WCAG AA — обычный текст (меньше 18pt)
- 3.0:1 WCAG AA — крупный текст (от 18pt или 14pt полужирный)
- 7.0:1 WCAG AAA — обычный текст (повышенный уровень)
- 4.5:1 WCAG AAA — крупный текст (повышенный уровень)
Зачем нужна симуляция дальтонизма
Примерно у 8% мужчин и 0,5% женщин есть та или иная форма нарушения цветового зрения. Даже если ваше сочетание проходит по коэффициентам контраста WCAG для нормального зрения, оно может не сработать для людей с протанопией или дейтеранопией, которые видят красное и зелёное совершенно иначе. Всегда проверяйте макеты с симуляцией дальтонизма.
Яркость — канал, который сохраняется всегда
У цвета есть две составляющие, на которые может опереться дизайнер: оттенок и светлота. Надёжна для всей аудитории лишь одна из них.
Различение оттенка варьирует чрезвычайно сильно. Примерно у каждого двенадцатого мужчины есть красно-зелёное нарушение, и для него различие оттенка, кажущееся вам очевидным, может не нести никакой информации. Различение светлоты куда однороднее. Человек с нарушением цветового зрения, человек со сниженной остротой, человек с выцветшим экраном телефона на ярком солнце и человек с совершенно обычным зрением — все воспринимают большое различие светлоты как большое различие.
Именно поэтому коэффициент контраста — несущая метрика доступности. Он измеряет соотношение светлоты двух цветов, полностью игнорируя оттенок, и это как раз то, что нужно: он показывает, что остаётся, когда канал оттенка ненадёжен.
Коэффициент простирается от 1:1, где у двух цветов одинаковая относительная яркость и граница между ними невидима для всех, до 21:1 для чистого чёрного на чистом белом. Расчёт точно определён в WCAG: перевести каждый канал sRGB в линейный свет, взвесить каналы по их вкладу в воспринимаемую яркость, затем сравнить более светлый результат с более тёмным.
Пороги и то, что за ними стоит
4,5:1 — обычный текст (WCAG AA). Основа для основного текста. Число выведено из потери контрастной чувствительности, соответствующей остроте около 20/40, которая часто встречается у пожилых, корригируется, но нередко остаётся некорригированной.
3:1 — крупный текст (WCAG AA). Применяется от 18 пунктов обычного или 14 пунктов полужирного. У крупных знаков штрихи толще, поэтому они остаются читаемыми при меньшем контрасте.
3:1 — нетекстовый контраст (WCAG AA). Охватывает элементы интерфейса и значимую графику: границы полей, состояния переключателей, индикаторы фокуса, значки, передающие информацию, и существенные части графика. Этот критерий пропускают чаще всего, и обычно именно на нём визуально изящный малоконтрастный интерфейс проваливает аудит.
7:1 и 4,5:1 — обычный и крупный текст (WCAG AAA). Более строгий уровень, рассчитанный примерно на остроту 20/80. Его стоит применять для длинного чтения, даже когда он не обязателен.
Контраст необходим, но недостаточен
Самая частая ошибка в работе с доступными палитрами — считать пройденный коэффициент контраста концом работы. Ответить нужно на два независимых вопроса:
- Читается ли каждый цвет на своём фоне? Это контраст, и данная проверка на него отвечает.
- Различимы ли между собой цвета, означающие разное? Это разделение оттенков, и коэффициент контраста о нём ничего не говорит.
График с красным и зелёным рядами может с запасом пройти контраст — оба тёмные на белом фоне — и при этом быть совершенно нечитаемым для дейтеранопа, потому что два ряда неразличимы между собой. Прогоняйте такие палитры ещё и через симулятор цветового зрения.
И всякий раз, когда цвет несёт смысл, добавляйте второй признак. Критерий WCAG об использовании цвета этого требует, а приём G111 описывает стандартный подход: сочетать цвет с узором, формой, положением или явной подписью. На практике это означает подписывать ряды графика напрямую вместо цветовой легенды, ставить значок рядом с красным сообщением об ошибке, подчёркивать ссылки в тексте и различать состояния успеха и ошибки формой.
Как работать с проверкой
Введите цвет переднего плана и цвет фона, и инструмент сообщит коэффициент и пройденные пороги. Несколько привычек делают его полезнее:
- Проверяйте настоящую пару. Полупрозрачные слои, градиенты и фоновые изображения означают, что фактический фон — не тот цвет, что записан в стилях. Берите пробу с того, что действительно отрисовано.
- Проверяйте обе темы. Яркость не инвертируется аккуратно; тёмной палитре нужен свой проход.
- В градиенте проверяйте худший случай, а не среднее.
- Включайте состояния отключения и подсказки. Их всё равно читают.
- Проверяйте индикаторы фокуса на каждой поверхности, где они появляются. Кольцо фокуса, дающее 3:1 на белом, может исчезнуть на карточке.
Для более широкой картины проектирование с учётом цветовой слепоты разбирает построение палитр, а как сделать графики доступными подробно занимается визуализацией данных.
Есть вопросы?
Частые вопросы
Всё, что нужно знать о тестах на дальтонизм: как они устроены и что делать с результатом.
Что на самом деле означают 4,5:1 и 3:1?
Это коэффициенты яркостного контраста между передним планом и фоном по шкале от 1:1 (одинаковые) до 21:1 (чёрное на белом). WCAG 2.2 требует не менее 4,5:1 для обычного текста и допускает 3:1 для крупного — от 18 пунктов или от 14 пунктов полужирного, — потому что у крупных знаков штрихи толще и они переносят меньший контраст. Нетекстовые элементы, несущие смысл, — значки, границы полей, индикаторы фокуса — тоже требуют 3:1.
Почему контраст особенно важен при цветовой слепоте?
Потому что яркостный контраст — тот канал, который сохраняется, когда различение оттенка отказывает. Если два элемента различаются только оттенком и почти не различаются светлотой, у человека, сжимающего это различие оттенка, не остаётся ничего. Достаточный яркостный контраст сохраняет различие видимым независимо от того, как обрабатывается цвет. Это самое устойчивое свойство доступности, которое можно придать паре цветов.
Мои цвета проходят 4,5:1, но дизайн всё равно не работает. Как так?
Пройти контраст относительно фона необходимо, но недостаточно. Красная и зелёная линии на графике могут по отдельности иметь отличный контраст с белым и при этом быть неразличимыми между собой. Контраст измеряется от переднего плана к фону; различимость — это вопрос переднего плана относительно переднего плана. Проверяйте оба, и давайте каждому цветовому различию нецветовой признак.
Меняется ли коэффициент в тёмной теме?
Формула — нет, а ваши результаты — да. Контраст вычисляется из относительной яркости, поэтому инверсия палитры даёт другие коэффициенты, а не зеркальные. Пара, проходящая на белом, может не пройти на почти чёрном, особенно насыщенные синие и фиолетовые, чья яркость и так низка. Проверяйте обе темы.
Стоит ли стремиться к уровню AAA?
Это более строгий уровень — 7:1 для обычного текста и 4,5:1 для крупного — и он действительно читается легче, особенно при слабом зрении и плохом освещении. Большинство организаций берут AA за основу соответствия и относятся к AAA как к цели для основного текста и длинного чтения. AAA редко бывает требованием закона.
Какие элементы освобождены от требований?
WCAG освобождает чисто декоративное содержимое, текст в составе неактивного элемента управления, текст логотипа и текст, входящий в изображение со значимым иным визуальным содержанием. Исключений меньше, чем принято думать: текст-подсказка в полях, элементы управления, выглядящие отключёнными, но активные, и малоконтрастный вспомогательный текст часто и ошибочно считают освобождёнными.
Остались вопросы? Напишите нам →