Контраст двух цветов для визуальной оценки

Онлайн-инструмент определяет контраст двух цветов для визуальной оценки их сочетаемости на экранах устройств. Пользователь задаёт два исходных значения: цвет переднего плана, который обычно отвечает за текст или иконку, и цвет заднего плана, формирующий фон. Система мгновенно сопоставляет выбранную пару и вычисляет точную разницу в их светлоте. Это позволяет заменить субъективное восприятие оттенков точным математическим расчётом до начала вёрстки макета или публикации страницы.

Результатом вычисления становится числовой коэффициент контрастности в диапазоне от 1:1 до 21:1. Минимальное значение 1:1 указывает на полное слияние объектов одинаковой яркости, а показатель 21:1 фиксирует предельную разницу между чистым чёрным и чистым белым цветами.

Полученный показатель напрямую применяется для проверки читаемости типографики и различимости графических компонентов интерфейса. Если шрифт или контур кнопки имеют недостаточный контраст по отношению к подложке, контуры букв и границы интерактивных зон начинают сливаться с окружением при ярком внешнем освещении или на дисплеях с низкой цветопередачей. Своевременная проверка цветовой пары помогает подобрать оттенки, при которых заголовки, основной массив текста, поля ввода и управляющие элементы считываются без зрительного напряжения.

Алгоритм расчёта контрастного соотношения и относительной яркости

Математическая оценка контрастности между двумя цветами выполняется в стандартном цветовом пространстве sRGB. Вычисление опирается не на прямое сопоставление исходных кодов цвета, а на сравнение их физического светового потока, приведённого к шкале от 0 для абсолютно чёрного до 1 для эталонного белого. Итоговый показатель определяется через отношение показателей свечения двух выбранных образцов.

Базовая формула расчёта коэффициента контрастности выглядит следующим образом:

Cr = (L1 + 0.05) / (L2 + 0.05)

В этом выражении используются следующие переменные и константы:

• Cr - искомый коэффициент контрастности.
• L1 - относительная яркость более светлого цвета из рассматриваемой пары.
• L2 - относительная яркость более тёмного цвета.
• 0.05 - фиксированное смещение, которое учитывает фоновую засветку экрана от внешнего освещения и исключает математическую ошибку деления на ноль при проверке чистого чёрного цвета, где L2 = 0 .

Поскольку в числитель всегда подставляется большее значение яркости, а в знаменатель - меньшее, перестановка цвета переднего и заднего плана местами не меняет итоговый математический результат.

Нормализация и линеаризация каналов R, G и B

Исходные координаты цвета в пространстве sRGB имеют нелинейную гамма-коррекцию, адаптированную под особенности отображения на дисплеях. Перед вычислением относительной яркости значения цветовых каналов необходимо перевести в линейное пространство. Этот процесс выполняется пошагово для каждого из трёх компонентов - красного ( R ), зелёного ( G ) и синего ( B ):

• На первом этапе восьмибитные значения каналов (от 0 до 255) нормализуются к диапазону от 0 до 1 путём деления каждого числа на 255: CsRGB = C8bit / 255 .
• На втором этапе к каждому нормализованному значению CsRGB применяется условное преобразование для снятия гамма-кривой. В зависимости от редакции спецификации sRGB для проверки используется пороговое значение 0.03928 или уточнённый порог непрерывности функции 0.04045 .
• Если нормализованный показатель канала меньше или равен выбранному порогу ( CsRGB <= 0.04045 или 0.03928 ), линейное значение вычисляется делением на коэффициент 12.92: C = CsRGB / 12.92 .
• Если показатель превышает пороговое значение, применяется степенная кривая 2.4 со смещением: C = ((CsRGB + 0.055) / 1.055) ^ 2.4 .

Формула относительной яркости и веса цветовых каналов

После того как все три канала переведены в линейные величины R , G и B , вычисляется относительная яркость цвета L . Для этого линейные компоненты складываются с учётом индивидуальных весовых коэффициентов:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Сумма весовых коэффициентов всех трёх каналов строго равна единице ( 0.2126 + 0.7152 + 0.0722 = 1.0000 ), однако их вклад в итоговую светлоту распределён крайне неравномерно. Такое соотношение обусловлено фотометрическими характеристиками дневного зрения человека. Сетчатка глаза обладает пиковой чувствительностью в средневолновой части видимого спектра, которая соответствует зелёному и жёлто-зелёному излучению. Поэтому зелёный канал получает максимальный множитель 0.7152 и формирует более 71% воспринимаемой яркости оттенка.

Красный спектр воспринимается заметно слабее и даёт чуть более 21% вклада (коэффициент 0.2126 ). Синий канал находится на границе коротковолнового диапазона, где чувствительность зрительных рецепторов к яркости минимальна. Из-за этого синий цвет имеет наименьший вес - всего 0.0722 (около 7.2% от общей светлоты). На практике это означает, что при одинаковой цифровой интенсивности каналов в пространстве sRGB чистый зелёный цвет воспринимается и оценивается алгоритмом как очень светлый, а чистый синий - как очень тёмный.

В таблице ниже показано, как распределение весовых коэффициентов влияет на расчётную яркость базовых цветов при максимальной интенсивности соответствующего канала:

При подстановке полученных значений L в основную формулу наглядно видно математическое различие между каналами. Например, при сопоставлении чистого синего цвета ( L2 = 0.0722 ) с белым ( L1 = 1.0000 ) расчёт даёт высокое отношение: (1 + 0.05) / (0.0722 + 0.05) = 1.05 / 0.1222 ≈ 8.59 . Если же сопоставить с белым чистый зелёный цвет ( L2 = 0.7152 ), отношение составит всего 1.05 / (0.7152 + 0.05) = 1.05 / 0.7652 ≈ 1.37 , несмотря на то что в обоих случаях задействован один цветовой канал на максимальной отметке 255.

Шкала контрастности и интерпретация полученных значений

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

Граничные отметки шкалы показывают полярные состояния визуального различия:

• Значение 1:1 фиксирует полное совпадение относительной яркости двух цветов и отсутствие яркостного контраста. Такая ситуация возникает при выборе двух идентичных оттенков (например, #808080 и #808080 ) либо при сочетании разных по тону цветов, чья расчётная яркость L совпадает до сотых или тысячных долей. Объект переднего плана при таком показателе сливается с подложкой по светлоте.
• Значение 21:1 соответствует максимально возможному контрасту на цифровых экранах, который достигается исключительно в паре чистого белого ( #FFFFFF , где L = 1.0000 ) и чистого чёрного ( #000000 , где L = 0.0000 ). Подстановка этих величин даёт отношение 1.05 / 0.05 = 21 . Любое отклонение хотя бы одного канала на единицу снижает этот показатель.

Разница между цветовым тоном, насыщенностью и светлотой

При визуальном подборе палитры часто возникает расхождение между субъективным восприятием яркости цвета и его расчётным контрастным соотношением. Причина кроется в разнице между тремя базовыми характеристиками цвета: цветовым тоном (hue), насыщенностью (saturation) и светлотой (lightness), от которой напрямую зависит относительная яркость.

Цветовой тон определяет положение оттенка в спектре (красный, синий, жёлтый, пурпурный), а насыщенность отвечает за интенсивность и чистоту пигмента по сравнению с нейтральным серым. Человеческий глаз легко отличает насыщенный красный от насыщенного зелёного за счёт хроматической разницы - противоположности их тонов. Однако расчёт контрастности оценивает только ахроматическую составляющую, то есть разницу в количестве излучаемого света (относительную яркость L ).

Из-за этого два предельно ярких и противоположных по тону цвета могут давать низкий коэффициент контрастности. Показательный пример - сочетание чистого красного ( #FF0000 , L = 0.2126 ) и чистого зелёного ( #00FF00 , L = 0.7152 ). Несмотря на максимальную насыщенность обоих цветов и их резкое тоновое отличие, расчёт их соотношения даёт скромный результат: (0.7152 + 0.05) / (0.2126 + 0.05) = 0.7652 / 0.2626 ≈ 2.91:1 . Ещё сильнее этот эффект проявляется при подборе оттенков со схожей светлотой: например, оранжево-красный #FF3300 ( L ≈ 0.236 ) и средне-зелёный #008800 ( L ≈ 0.175 ) визуально кажутся совершенно разными, но их яркостный контраст составляет всего 1.27:1 . На стыке таких оттенков возникает оптическая вибрация, мешающая считывать контуры букв и мелких деталей.

Интерпретация числового соотношения при визуальной оценке

Шкала контрастности нелинейна по отношению к визуальному восприятию: разница между коэффициентами 1.5:1 и 3:1 ощущается глазом колоссально, тогда как переход от 15:1 к 18:1 практически незаметен без прямого сравнения. Для практической оценки выбранной цветовой пары весь диапазон значений можно разделить на несколько функциональных зон.

В таблице приведена классификация участков шкалы с примерами цветовых пар и характеристикой их визуального восприятия:

При анализе полученного числа важно учитывать площадь и толщину элементов, к которым применяется цветовая пара. Чем тоньше линии шрифта или графического объекта, тем меньшее количество пикселей формирует границу между двумя цветами. На тонких линиях работает сглаживание (anti-aliasing), при котором по краям букв появляются промежуточные полутона, снижающие реальный локальный перепад яркости. Поэтому для мелких и тонких объектов требуется смещать выбор цветов в сторону верхних значений шкалы, а для массивных плашек и крупных начертаний достаточно средних показателей.

Нормативы WCAG и пороговые коэффициенты для текста

Зависимость визуальной чёткости от размера и толщины штриха закреплена в международных правилах доступности веб-контента WCAG 2.0, WCAG 2.1, WCAG 2.2 и гармонизированном с ними национальном стандарте ГОСТ Р 52872-2019. Эти документы переводят субъективную оценку читаемости в строгие числовые нормативы. Полученный при расчёте коэффициент сопоставляется с фиксированными пороговыми значениями, которые зависят от типографических параметров шрифта и требуемого уровня доступности ресурса.

Уровни соответствия AA и AAA

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

• Уровень AA (критерий успеха 1.4.3 - минимальный контраст). Базовый стандарт для большинства коммерческих сайтов, корпоративных порталов, интернет-магазинов и веб-приложений. Пороговые значения этого уровня рассчитаны так, чтобы компенсировать снижение контрастной чувствительности при остроте зрения около 20/40 (что характерно для возрастных изменений зрения без использования специализированных экранных луп).
• Уровень AAA (критерий успеха 1.4.6 - усиленный контраст). Повышенный стандарт, применяемый к государственным порталам, медицинским, образовательным и финансовым сервисам, а также к ресурсам для слабовидящих людей и пожилой аудитории. Нормативы уровня AAA ориентированы на пользователей с остротой зрения около 20/80 и обеспечивают чтение длинных текстовых материалов без зрительного утомления.

Сводные пороговые значения коэффициента контрастности для обоих уровней и различных категорий шрифта представлены в таблице:

Техническое определение крупного текста

Стандарты WCAG и ГОСТ Р 52872-2019 устанавливают сниженные требования к контрасту для крупных шрифтов, поскольку широкие штрихи и большая площадь символов создают более выраженный перепад яркости на сетчатке глаза. Однако в веб-разработке размеры шрифтов задаются в пикселях или относительных единицах ( rem , em ), тогда как в базовой документации нормативы исходно привязаны к типографским пунктам ( pt ).

В стандарте CSS соотношение между единицами фиксировано: 1pt равен 1/72 дюйма, а 1px равен 1/96 дюйма (коэффициент пересчёта составляет 1.333 ). На основе этой пропорции определяются точные границы для классификации текста при проверке цветовой пары:

• Обычное начертание (regular, font-weight: 400 ). Текст считается крупным при размере от 18pt , что в экранной вёрстке строго соответствует 24px (или 1.5rem при базовом размере корневого шрифта 16px ). Любой шрифт размером 23px и меньше проверяется по нормативам обычного текста (от 4.5:1 для AA и от 7:1 для AAA).
• Полужирное начертание (bold, font-weight: 700 и выше). За счёт увеличенной толщины линий порог снижается до 14pt . В пересчёте на экранные единицы это составляет 18.66px (около 1.2em или 1.166rem ). На практике при целочисленных значениях CSS к крупному полужирному тексту относят заголовки и подзаголовки размером от 19px .

При использовании тонких и сверхтонких начертаний (light или thin, font-weight: 100-300 ) формальное достижение размера в 24px может не обеспечить фактической читаемости при коэффициенте 3:1 . Из-за малой толщины глифа такие шрифты при визуальной оценке проверяют по порогам обычного текста (от 4.5:1 ).

Исключения из требований к контрастности текста

Критерии успеха 1.4.3 и 1.4.6 не требуют соблюдения порогов 3:1 , 4.5:1 или 7:1 абсолютно для всех буквенных символов на странице. Стандарты выделяют три категории текстовых объектов, для которых минимальный коэффициент контрастности не нормируется:

• Случайный и декоративный текст. Сюда относятся надписи, которые не несут смысловой нагрузки, не используются для навигации и могут быть полностью удалены без потери понимания контента. Примерами служат фоновые паттерны из букв, водяные знаки или случайно попавшие в кадр вывески, дорожные знаки и обложки книг на фотографиях.
• Логотипы и элементы брендинга. Текст, являющийся неотъемлемой частью логотипа, товарного знака или официального названия компании либо продукта, освобождён от требований по контрасту. Это позволяет брендам использовать фирменные цветовые сочетания без искажения айдентики, однако исключение не распространяется на обычные рекламные слоганы или меню сайта, окрашенные в корпоративные цвета.
• Неактивные элементы пользовательского интерфейса. Текст внутри отключённых компонентов (например, неактивная кнопка отправки формы, заблокированный пункт выпадающего меню или недоступная вкладка фильтра), с которыми пользователь не может взаимодействовать в текущий момент, не обязан проходить проверку на контраст. Пониженная контрастность в таких случаях сама по себе служит визуальным индикатором недоступности действия.

Оценка контраста UI-компонентов и нетекстовых элементов

Визуальная доступность интерфейса не ограничивается читаемостью текстовых блоков. Начиная с редакции WCAG 2.1, в стандарт введён критерий успеха 1.4.11 (нетекстовый контраст, уровень соответствия AA), который распространяет требования к различимости на интерактивные элементы управления и смысловую графику. Для успешного прохождения проверки коэффициент контрастности между визуально значимой областью компонента и непосредственно примыкающим к ней смежным цветом должен составлять не менее 3:1 .

Понятие смежного цвета имеет ключевое значение при выборе пары оттенков для расчёта. Если элемент интерфейса имеет собственную заливку и находится на подложке карточки, которая в свою очередь расположена на основном фоне страницы, сравнение проводится именно между граничащими друг с другом пикселями. Когда у кнопки нет видимой рамки, проверяется контраст её фоновой заливки относительно внешней подложки; если же область клика обозначена только контуром при прозрачном фоне, оценивается соотношение цвета этой линии и фона под ней.

Практические сценарии проверки контролов и иконок

Расчёт контрастного соотношения по порогу 3:1 применяется ко всем графическим объектам и деталям интерфейса, которые необходимы пользователю для распознавания элемента управления, понимания его назначения или считывания его текущего статуса. Ниже разобраны основные категории таких объектов и правила выбора цветовых пар для их оценки:

• Иконки и глифы без текстовых подписей. Если кнопка закрытия модального окна, значок поиска, пиктограмма корзины или индикатор предупреждения используются самостоятельно, цвет самой векторной фигуры должен иметь контраст минимум 3:1 по отношению к фону, на котором она отрисована. Когда рядом с иконкой присутствует читаемая текстовая подпись (например, слово «Удалить» возле значка мусорной корзины), сама графика считается декоративной и может не соответствовать нормативу, так как смысл действия уже передан текстом.
• Границы текстовых полей ввода (инпутов) и выпадающих списков. Чтобы пользователь мог визуально определить область, доступную для ввода данных или клика, контур инпута обязан контрастировать с внешним фоном страницы не менее чем на 3:1 . Альтернативный вариант - отсутствие рамки при условии, что внутренняя заливка самого поля отличается от окружающего фона на те же 3:1 . Если же граница нанесена только снизу (текстовое поле в виде одиночной линии), именно эта линия проверяется в паре с фоном контейнера.
• Чекбоксы и радиокнопки. В невыбранном состоянии оценивается контраст рамки пустого квадрата или круга относительно фона формы. В отмеченном состоянии проверке подлежат сразу две пары: внешний блок чекбокса к фону страницы (или внутренний символ к фону, если заливка отсутствует) и сама галочка либо точка внутри элемента к цвету заливки этого чекбокса. Различие в 3:1 позволяет однозначно отличить выбранную опцию от пустой без опоры на цветовой тон.
• Переключатели (тогглы) и ползунки (слайдеры). Для тоггла критически важна различимость подвижного бегунка внутри трека (дорожки), а также самих границ дорожки относительно подложки. Если при включении тоггла меняется цвет его трека, и оба оттенка (включённый и выключенный) используются как единственный признак смены статуса без смещения ползунка, контраст между этими двумя цветами также проверяется по порогу 3:1 . Однако в стандартных переключателях, где ползунок физически меняет положение (слева - выключено, справа - включено), сравнивать цвета трека в разных фазах между собой не требуется: достаточно, чтобы сам бегунок и контур дорожки сохраняли контраст 3:1 к своим текущим соседям.

Анализ контрастности в интерактивных состояниях элементов

Компоненты пользовательского интерфейса динамичны и меняют свой внешний вид в ответ на действия курсора, клавиатуры или сенсорного ввода. Критерий 1.4.11 требует сохранения коэффициента контрастности не ниже 3:1 в каждом активном рабочем состоянии элемента (за исключением заблокированных контролов). При проверке палитры UI-кита или таблицы стилей расчёт выполняется отдельно для каждой фазы взаимодействия.

В следующей таблице приведены правила выбора первой и второй цветовой переменной для проверки контролов в зависимости от их текущего состояния:

Особенности проверки индикаторов фокуса (Focus-обводки)

При навигации с помощью клавиши Tab фокусное кольцо является единственным ориентиром, показывающим текущее положение пользователя на странице. Если обводка фокуса ( outline ) рисуется на некотором расстоянии от кнопки за счёт положительного смещения ( outline-offset ), между ней и самим компонентом образуется прослойка основного фона страницы. В такой ситуации достаточно проверить только одну пару цветов: цвет линии фокуса и цвет этого фона - результат должен быть не менее 3:1 .

Сложнее обстоит дело, когда индикатор фокуса примыкает к границе окрашенной кнопки вплотную без зазора. Если тёмно-синяя обводка добавляется вокруг синей кнопки, лежащей на белом фоне, линия фокуса будет иметь высокий контраст с белой подложкой, но визуально сольётся с самой кнопкой, просто сделав её визуально чуть шире на пару пикселей. Чтобы фокусное кольцо считывалось как отдельный сигнал, на практике рекомендуется либо обеспечивать контраст 3:1 одновременно и к внешнему фону, и к заливке самого контрола, либо использовать двухцветный (двойной) контур - например, сочетание белой внутренней и тёмной внешней рамки, которое гарантирует контраст на любом фоне.

Специфика оценки при наведении и нажатии

Распространённая ошибка при проектировании состояний :hover и :active - механическое осветление или добавление полупрозрачности ( opacity ) к исходному цвету. Например, кнопка с контуром среднего серого оттенка на белом фоне в состоянии покоя может иметь коэффициент 3.2:1 и проходить проверку. Если при наведении курсора дизайнер делает рамку светлее, чтобы показать реакцию интерфейса, коэффициент падает до 2.1:1 , и граница компонента практически исчезает для слабовидящего пользователя. При проверке таких состояний важно убедиться, что изменённый цвет сохраняет порог 3:1 по отношению к окружающему фону, даже если между самим исходным состоянием и состоянием :hover контраст меньше трёх.

Исключение для отключённых контролов (Disabled)

Как и в случае с текстовыми надписями, неактивные компоненты интерфейса полностью освобождены от соблюдения критерия 1.4.11. Заблокированные поля ввода, неактивные чекбоксы, потускневшие стрелки пагинации (например, кнопка «Назад» на первой странице списка) или иконки недоступных инструментов не требуют контраста 3:1 . Намеренное снижение контрастности (обычно в диапазон от 1.5:1 до 2.5:1 ) помогает пользователю сразу понять, что элемент не реагирует на клики. При этом важно не путать отключённые контролы с пустыми незаполненными полями или невыбранными вкладками: если элемент доступен для переключения или ввода данных прямо сейчас, он считается активным и обязан выдерживать минимум 3:1 .

Практический подбор цветовых пар для светлой и тёмной темы

При проектировании масштабируемых палитр, дизайн-систем и наборов CSS-переменных (дизайн-токенов) проверка контрастного соотношения применяется к семантическим парам «поверхность - контент». Недостаточно один раз проверить базовый цвет текста на основном фоне страницы. Современные интерфейсы строятся слоями: основной фон экрана, карточка поверх фона, вложенный блок или модальное окно поверх карточки. Если токен вторичного текста проходит порог 4.5:1 на чистом белом фоне #FFFFFF , на серой подложке карточки #F1F5F9 этот же оттенок текста теряет часть контраста и может опуститься ниже допустимой границы.

При создании тёмной темы оформления прямая инверсия светлой палитры не работает из-за нелинейного расчёта относительной яркости. В светлой теме иерархия глубины часто передаётся за счёт теней, тогда как в тёмной теме приподнятые над основным фоном поверхности (карточки, выпадающие списки, диалоговые окна) принято делать светлее базового фона. По мере осветления подложки от условного #121212 до #262626 контраст светлых текстовых токенов на этих поверхностях снижается, поэтому каждую комбинацию проверяют по самой светлой поверхности тёмного режима и по самой тёмной поверхности светлого режима.

Типичные проблемные сочетания в интерфейсах

При проверке существующих таблиц стилей и макетов снижение читаемости чаще всего возникает в четырёх группах элементов:

• Серый текст и заполнители полей ввода (плейсхолдеры). Дизайнеры часто ослабляют контраст подписей, дат публикации, хлебных крошек и подсказок внутри полей ввода, чтобы визуально отделить их от основного контента. Однако плейсхолдеры и второстепенные подписи не относятся к заблокированным элементам и подчиняются стандартному требованию 4.5:1 . Для чисто белого фона #FFFFFF пограничным нейтрально-серым оттенком является #767676 (коэффициент 4.54:1 ). Любой более светлый серый, например популярный в вёрстке #999999 ( 2.85:1 ), не проходит минимальный порог. На тёмном фоне #121212 аналогичной границей выступает оттенок #7E7E7E ( 4.56:1 ), тогда как более тёмные серые тона вроде #555555 дают всего 2.39:1 и сливаются с подложкой.
• Текстовые ссылки внутри абзаца без подчёркивания. Если ссылка в текстовом блоке выделена только цветом (без нижнего подчёркивания text-decoration: underline или жирного начертания), возникает двойное требование к контрасту. Во-первых, цвет ссылки должен иметь соотношение не менее 4.5:1 к фону страницы. Во-вторых, сама ссылка должна отличаться от окружающего основного текста с коэффициентом минимум 3:1 . Выполнить оба условия одновременно на белом фоне крайне сложно: классический чёрный текст #000000 и стандартный синий цвет ссылки #0055CC дают отличный контраст к белому фону, но между собой имеют соотношение около 2.8:1 . Поэтому сохранение подчёркивания остаётся самым надёжным способом выделить ссылку без сложных компромиссов в палитре.
• Белый текст на цветных акцентных кнопках. Насыщенные жёлтые, оранжевые, салатовые и бирюзовые оттенки воспринимаются глазом как очень яркие. Поскольку относительная яркость таких цветов (особенно содержащих высокую долю зелёного и красного каналов) велика, в паре с белым текстом #FFFFFF разница в светлоте оказывается минимальной. Например, белый текст на оранжевой кнопке #FF8C00 даёт коэффициент 2.32:1 , на салатовой #22C55E - 2.28:1 , а на голубой #38BDF8 - 2.18:1 . Для таких акцентных плашек требуется либо замена текста на тёмный (например, #0F172A , что на #FF8C00 сразу поднимает контраст до 7.6:1 ), либо существенное затемнение самой кнопки до глубоких терракотовых, изумрудных или тёмно-синих тонов.

Эффект ореола при максимальном контрасте в тёмной теме

Стремление к максимальному коэффициенту 21:1 путём размещения чисто белого текста #FFFFFF на абсолютно чёрном фоне #000000 в тёмной теме приводит к обратному результату - снижению комфорта чтения. Такое сочетание вызывает оптическое явление, известное как эффект ореола (гало) или иррадиация: при взгляде на яркие белые штрихи букв в окружении глубокой темноты свет рассеивается, края символов кажутся размытыми и «светящимися», а тонкие засечки шрифта визуально утолщаются и слипаются. Особенно сильно это проявляется при длительном чтении в слабоосвещённом помещении и у людей с астигматизмом.

Чтобы сохранить высокую читаемость, выполнить нормативы 4.5:1 и 7:1 и при этом избавиться от эффекта свечения букв, крайние точки шкалы смягчают. Чисто чёрный фон заменяют на тёмно-серый или глубокий сланцевый, а чисто белый цвет шрифта - на приглушённый светло-серый или молочный. Снижение контраста с экстремальных 21:1 до диапазона 11:1 - 16:1 для основного текста снимает зрительное напряжение и с запасом перекрывает самый строгий уровень AAA.

Примеры сбалансированных цветовых пар и дизайн-токенов

В таблице ниже приведены проверенные сочетания HEX-кодов для светлой и тёмной тем оформления, которые можно использовать в качестве базовых CSS-переменных без риска потери читаемости или возникновения эффекта ореола:

При переносе таких пар в код таблицы стилей рекомендуется фиксировать проверенные значения в корневом селекторе :root и переопределять их для тёмного режима через медиазапрос prefers-color-scheme: dark или атрибут темы. Такой подход гарантирует, что каждый текстовый блок, иконка или кнопка автоматически получит заранее выверенную пару с предсказуемым коэффициентом контрастности.

Роль яркостного контраста при нарушениях цветовосприятия

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

Техническая надёжность оценки контрастного соотношения заключается в том, что расчёт опирается исключительно на относительную яркость двух цветов, то есть на физическую разницу в их светлоте. При вычислении коэффициента цветовой тон и насыщенность отсекаются, а сравнивается только то, насколько один оттенок светлее или темнее другого. Достаточный численный показатель гарантирует, что текст и графические объекты останутся чётко различимыми даже при полной потере восприятия отдельных участков спектра или при переводе экрана в режим оттенков серого.

Влияние различных типов дихромазии и монохромазии на чтение

При нарушениях цветовосприятия отдельные типы светочувствительных рецепторов сетчатки работают со смещением чувствительности или полностью отсутствуют. В результате два разных для стандартного зрения оттенка сливаются в один, если между ними нет достаточного перепада по светлоте. Оценка яркостного контраста предотвращает потерю информации при следующих состояниях зрения:

• Протанопия - отсутствие восприятия красной части спектра. Насыщенный красный цвет воспринимается значительно более тёмным, почти коричневым или тёмно-серым, из-за чего красный текст об ошибке на тёмно-сером или чёрном фоне полностью теряет читаемость, а в паре с тёмно-зелёным или коричневым сливается в однородное пятно.
• Дейтеранопия - невосприимчивость к зелёной области спектра. Пользователь не различает зелёные и красные тона одинаковой светлоты, воспринимая их в единой жёлто-бурой гамме. Без достаточного перепада по относительной яркости статусные плашки, графики и кнопки в красно-зелёной кодировке становятся неразличимыми.
• Тританопия - выпадение сине-фиолетового участка спектра. Синие оттенки смещаются в сторону зеленоватых, а жёлтые и оранжевые кажутся розоватыми или светло-серыми. Критической ошибкой при тританопии становится размещение жёлтого текста или иконок на белом фоне, а также синих элементов на тёмно-зелёной подложке при близкой светлоте.
• Монохромазия (ахроматопсия) - полное отсутствие цветового зрения, при котором весь интерфейс воспринимается исключительно в градациях серого. В этом случае относительная яркость остаётся единственным физическим параметром, позволяющим отделить символ от подложки.
• Снижение контрастной чувствительности - общее падение прозрачности оптических сред глаза или возрастные изменения зрения, при которых полутоновые переходы размываются, а бледный текст на пастельном фоне перестаёт считываться даже при сохранном восприятии самих цветов.

Сравнение хроматического и яркостного разделения цветовых пар

Главная ошибка при визуальном подборе палитры - подмена яркостного контраста хроматическим. Два цвета из противоположных секторов цветового круга могут казаться контрастными человеку с обычным зрением за счёт конфликта тонов, но при этом иметь практически одинаковую относительную яркость. При проверке такой пары расчёт покажет коэффициент, близкий к единице, что сигнализирует о нечитаемости при нарушениях цветовосприятия.

В таблице ниже показано, как пары с сильным различием по тону, но разным запасом по светлоте ведут себя при потере восприятия отдельных каналов спектра и в монохромном режиме.

Практические правила проектирования универсальных цветовых сочетаний

Полученный при проверке двух цветов числовой коэффициент можно использовать как фильтр безопасности, который страхует интерфейс от визуального слияния элементов. Чтобы текст, данные в таблицах и статусные индикаторы одинаково точно считывались всеми группами пользователей, при подборе палитры опираются на три технических принципа:

• Отказ от кодирования смысла исключительно цветом. Если поле ввода с ошибкой выделяется красной рамкой, а успешное заполнение - зелёной, оба оттенка должны иметь контраст не менее 3:1 относительно окружающего фона, а само состояние должно дублироваться текстом или иконкой.
• Разведение смежных элементов на графиках и диаграммах по светлоте. Когда на круговой или столбчатой диаграмме соседствуют синий, красный и зелёный сегменты, их нельзя подбирать на одном уровне яркости. Чередование тёмных и светлых тонов с пороговым перепадом от 3:1 между соседними секторами позволяет различать данные даже на монохромном экране или при чёрно-белой печати.
• Приоритет уровня 7:1 для длинных текстовых блоков и мелких подписей. Для пользователей с возрастным снижением зрения или катарактой минимального порога 4.5:1 может быть недостаточно при чтении шрифтов малого кегля, поэтому для основного контента целесообразно закладывать повышенный запас по относительной яркости.