Реклама мешает? Идти Без рекламы Сегодня 

Цветовая доступность для разработчиков Контраст, имитация слепоты, и устранение проблем

Опубликовано 7 мая 2026 года

Доступность цвета для разработчиков: контраст, имитация слепоты и устранение проблем 1

Недостаточный контраст цветов — это баг. Не ошибка дизайна, не удобство интерфейса — это баг, который нарушает работу интерфейса для измеримой части пользователей. Вот как его можно найти, имитировать и исправить, не перестраивая всё.

Что говорит WCAG о контрасте

Руководства по доступности веб-контента (WCAG) определяют минимальные соотношения контраста между текстом и его фоном. Эти соотношения варьируются от 1:1 (одинаковые цвета, невидимые) до 21:1 (чёрный на белом, максимальный).

WCAG 2.1 устанавливает два уровня соответствия:

Уровень WCAG	Коэффициент контрастности	Размер текста	Пример
AA	4.5:1	Обычный текст (< 18pt / < 14pt жирный)	Большая часть основного текста
AA	3:1	Большой текст (≥ 18pt / ≥ 14pt жирный)	Заголовки
AAA	7:1	Обычный текст	Наиболее высокая степень читаемости
AAA	4.5:1	Большой текст	Заголовки (строгий случай)
Любой	3:1	Элементы интерфейса и изображения	Иконки, границы форм

Уровень AA является юридическим стандартом для большинства юрисдикций. Уровень AAA является амбициозным требованием для критически важного текста, такого как основной текст, но редко требуется на всей веб-странице.

Как рассчитывается соотношение контраста

Формула использует относительную яркость каждого цвета:

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Где L1 где — яркость более светлого цвета и L2 где — яркость более темного цвета. Яркость сама по себе рассчитывается путём линейной обработки каждого канала RGB и их взвешивания (красный: 0.2126, зелёный: 0.7152, синий: 0.0722) — потому что человеческий глаз наиболее чувствителен к зелёному.

Вы не обязаны выполнять эти вычисления вручную. Вставьте два шестнадцатеричных значения в Сетку контраста цветов и вы получите соотношение, статус прохождения AA/AAA и сетку, сравнивающую ваш весь палитру одновременно.

Что говорит формула на практике: серый цвет средней яркости #767676 на белом #ffffff достигает почти ровно 4.5:1 — минимального значения AA. Если вы сделаете его светлее — вы не пройдёте. Если сделаете темнее — вы получите запас.

Цветовая слепота: чаще, чем вы думаете

Около 8% мужчин и 0.5% женщин страдают от какого-либо вида нарушения цветового восприятия. Основные типы:

Деутеранопия — снижение чувствительности к зелёному. Самый распространённый вид (~5% мужчин). Красный и зелёный становятся трудно различимыми; оба могут выглядеть коричневатыми или жёлтыми.
Протанопия — снижение чувствительности к красному (~1% мужчин). Красные цвета выглядят тёмными и не насыщенными; путаница между красным и зелёным схожа с деутеранопией, но красные теряют яркость.
Тританопия — снижение чувствительности к синему (очень редко, ~0.003%). Путаница между синим и жёлтым нарушена; синий выглядит зелёным, жёлтый — фиолетовым.

Это не крайние случаи. Если ваш продукт имеет 10 000 пользователей в месяц, статистически 400–500 из них страдают от какого-либо вида нарушения цветового восприятия.

Почему цвета сами по себе недостаточны (WCAG 1.4.1)

Успешный критерий WCAG 1.4.1 — «Использование цвета» — говорит, что цвет не может быть средством передачи информации, указания на действие или различения визуального элемента. для декодирования любого Классический пример неудачи: форма, которая отмечает невалидные поля красным. У человека с протанопией эти поля видятся как тёмный бурый — такой же цвет, как и валидные поля в тусклом свете. Нет других индикаторов.

Решение не в том, чтобы убрать цвет — в том, чтобы добавить второй сигнал. Иконка, изменение границы, метка, сообщение об ошибке в тексте. Цвет становится подкреплением, а не единственным носителем смысла.

Как на самом деле исправить проблемы с контрастом

Интуиция — менять оттенок (сменить синий на другой синий). Это обычно не помогает.

Изменение оттенка почти не влияет на соотношение контраста. Влияние оказывает яркость. В HSL значение L контролирует яркость. Чтобы исправить неудовлетворительный контраст:

Сделайте передний фон темнее (увеличьте разницу L по сравнению с фоном) — или сделайте фон светлее

Оставьте оттенок и насыщенность — просто изменяйте яркость
Проверьте соотношение снова
Частый виновник: брендовые цвета, выбранные по эстетическим, а не по читаемости причинам. Ключевой тёмный цвет бренда

на белом даёт примерно 2.4:1 — не проходит AA. Сделайте его темнее до #00b4a2 и вы получите 4.7:1 — проходит. То же самое семейство оттенков, почти незаметное изменение идентичности бренда. #007a6e Для текста-заполнителя — часто стилизованного как

или подобных — ситуация хуже. Серый на белом обычно составляет 2.5–3:1. Увеличьте до color: #999 минимума, или пересмотрите использование текста-заполнителя как основной метки (что WCAG также не рекомендует). #767676 Проверочная процедура

Устойчивая процедура доступности включает три слоя:

1. Автоматизированные проверки (быстро, но не полностью)

Проверки и инструменты CI обнаруживают очевидные ошибки.
axe-core интегрируется с Jest, Playwright и Cypress. Lighthouse (встроен в Chrome DevTools) даёт быстрый оценочный балл доступности. Эти инструменты обнаруживают нарушения контраста, отсутствующий текст и неправильное использование ARIA — но они могут оценивать только то, что видно в DOM в момент тестирования. 2. Имитация (быстро, обнаруживает реальные проблемы с размещением) alt Имитируйте, как выглядит ваш интерфейс при различных условиях зрения до запуска. Инструмент

Имитатор цветовой слепоты
позволяет загрузить скриншот и просмотреть его через деутеранопию, протанопию, тританопию и другие режимы. Chrome DevTools также имеет эмулятор нарушений зрения в настройках отображения. Имитация выявляет проблемы, которые автоматические инструменты пропускают: дашборд, где «бар-диаграмма ошибки» неотличима от «бар-диаграммы успеха» потому что оба выглядят коричневыми при деутеранопии. Соотношение контраста каждой диаграммы может проходить AA — но они всё равно визуально идентичны пользователю с цветовой слепотой. 3. Проверка с реальными пользователями (медленно, авторитетно)

Ничто не заменяет обратную связь от людей с реальными нарушениями цветового восприятия. Включайте доступность в ваше исследование пользователей. Организации, такие как Paciello Group, предлагают тестовые услуги; привлечение через сообщества, специализирующиеся на инвалидности, также работает.

Инструменты, которые следует включать в рабочий процесс
— вставьте вашу полную палитру цветов, увидите все комбинации переднего и заднего фона и их статус прохождения WCAG в одном просмотре

— загрузите скриншот, просмотрите его под всеми основными типами нарушений

Сетку контраста цветов axe DevTools
Имитация выявляет проблемы, которые автоматические инструменты пропускают: дашборд, где «бар-диаграмма ошибки» неотличима от «бар-диаграммы успеха» потому что оба выглядят коричневыми при деутеранопии. Соотношение контраста каждой диаграммы может проходить AA — но они всё равно визуально идентичны пользователю с цветовой слепотой. (расширение браузера) — запускается на любой живой странице, выделяет нарушения с ссылками на элементы
Плагины Figma — «Stark» и «A11y – Color Contrast Checker» работают непосредственно в файлах дизайна до того, как что-либо будет построено
Командная строка (CLI) — проверка соотношения контраста в виде скрипта, полезна в предварительных проверках или в CI
color-contrast Проверяйте соотношения контраста на этапе дизайна, а не после QA. 4.5:1 для основного текста, 3:1 для крупного текста и элементов интерфейса. Когда вы исправляете неудовлетворительный цвет, изменяйте яркость — а не оттенок. Проводите имитацию для основной палитры цветов и любых визуализаций данных. И никогда не используйте цвет как единственный индикатор состояния. Доступность — это не список, который выполняется в конце. Недостаточный контраст — это баг, который уходит без ведома, влияет на реальных пользователей и почти всегда исправим за пять минут, если вы знаете, где искать.