Контрастность текста

d

Как появилось понятие контрастности: от печатного станка до пикселя

Контрастность текста не всегда была формализованной метрикой. В эпоху наборного шрифта (XV—XIX века) контрастность определялась исключительно визуально: плотность чернил, толщина бумаги и наклон пера. Переворот случился в 1920-х, когда Ян Чихольд в своей «Новой типографике» впервые связал читаемость с определённым отношением толщины штриха к высоте буквы. Этот принцип перекочевал в веб в конце 1990-х, когда мониторы выдавали максимум 256 цветов.

Сегодня, в 2026, контрастность — это не просто «буквы видны», а способность сохранять различие между символами при прямой солнечной засветке, на устаревших экранах и у людей с дислексией или дальтонизмом. Без понимания этой эволюции любой совет по контрастности будет поверхностным.

Три эпохи расчёта контрастности: от формул до алгоритмов машинного зрения

Самая известная формула — WCAG 2.0 (2008) — до сих пор считается отраслевым стандартом. Но история показывает, что коэффициент 4.5:1 для нормального текста и 3:1 для крупного (шрифт от 18 pt) родился не из научных экспериментов, а из компромисса между читаемостью на дешёвых ЖК-матрицах и энергопотреблением подсветки. В 2022 году WCAG 2.2 добавил требования к контрасту для фокус-индикаторов и неактивных элементов.

  1. Шаг 1 — Определите базовый уровень контраста по WCAG 2.1 AA: текст без специальных требований должен иметь коэффициент не менее 4.5:1. Для сайтов с акцентом на адаптивный дизайн используйте значение 7:1 (уровень AAA).
  2. Шаг 2 — Работайте в цветовой палитре, где все комбинации фона и букв автоматически проверяются инструментом Stark для Figma или Colour Contrast Analyser. Не доверяйте собственному глазу на новых дисплеях — разница между 4.2:1 и 4.5:1 видна только при наложении маски.
  3. Шаг 3 — Измеряйте контраст не только для чистого цвета, но и для состояний (hover, focus, disabled). В 2026 году WCAG 3.0 (в статусе Draft) вводит показатель APCA (Advanced Perceptual Contrast Algorithm), который моделирует восприятие в условиях различной освещённости — от залитого солнцем кафе до ночного режима.
  4. Шаг 4 — Учитывайте «эффект синего канала»: тени и полупрозрачные элементы (например, подложки для текста на изображениях) должны иметь контраст самого тёмного/светлого пикселя, а не среднее значение. Используйте наложение rect с opacity 0.6 и blur 2px — это повышает микроконтраст границ шрифта.
  5. Шаг 5 — Для длинных текстов (статьи, лендинги) применяйте не жёсткие цвета, а градиенты с минимальной разницей яркости: например, #121214 на #F5F5F0 даёт коэффициент 9.3:1. Это выше требований AAA, но команда Microsoft в 2024 году обнаружила, что такой запас снижает утомляемость глаз на 17% при чтении более 30 минут.
  6. Шаг 6 — Протестируйте контраст в монохромном режиме и с фильтром deuteranopia. Самый частый провал — пара «белый текст на жёлтом фоне»: для людей с трихроматией разница есть, но по формуле WCAG она даёт только 1.2:1. Используйте цвета с отличным значением по каналу L (Lightness).
  7. Шаг 7 — Внедрите динамическую контрастность через calc и CSS-переменные: для режимов тёмной темы, высокой контрастности ОС (Windows HCM) и энергосберегающих настроек. Бизнес-выгода: снижение количества жалоб от пользователей с диабетической ретинопатией на 70%.

Типичные ловушки истории: почему «4.5:1» не работает на электронных чернилах

Коэффициент контрастности WCAG основан на модели sRGB с гаммой 2.2, которая соответствует типичным ЖК- или OLED-дисплеям. Но электронные чернила (E Ink) имеют гамму ~1.8 и отражающую поверхность — чёрный цвет там не даже тёмно-серый (контрастность 10:1 против 1,000:1 у обычных матриц). Для дизайна приложений под PocketBook или Boox придётся адаптировать коэффициент: минимальный C контраст должен быть не менее 5.5:1, иначе буквы «сливаются» при наклоне экрана более 30 градусов.

Тренд 2026: контекстная контрастность и адаптивные шрифтовые технологии

Самое свежее направление — APCA (Advanced Perceptual Contrast Algorithm), который пришёл на смену WCAG 2.x. Вместо жёсткого порога 4.5:1 он оценивает воспринимаемую разницу в условиях разного фонового освещения и кривизны шрифта. Например, для жирного шрифта Helvetica Neue с толщиной 700 Lc (Lightness Contrast) = 90, что эквивалентно старому коэффициенту 7:1. Но для тонкого веса 100 тот же Lc = 90 даёт нечитаемый текст — требуется Lc 105 и выше. Внедрение APCA обязательно для всех проектов, ориентированных на мобильные устройства и уличные киоски: это повышает время считывания информации на 22% по данным Nielsen Norman Group за Q1 2026.

Практический чек-лист: как протестировать контраст за 10 минут

Возьмите главную страницу или лендинг. Откройте DevTools → вкладка Rendering → Emulate CSS media feature prefers-contrast: more. Если появились оранжевые рамки — у вас не менее 5 элементов с провальным контрастом (чаще всего это днища аккордеонов и подписи в плейсхолдерах). Исправьте: задайте минимальную прозрачность теней не менее 40% и увеличьте межстрочный интервал до 1.6 для шрифта 14px и меньше.

Внедрив хотя бы 5 из 7 описанных шагов, вы создадите дизайн, который остаётся читаемым ещё 10 лет — независимо от того, выйдет ли завтра WCAG 3.0 или появится новый тип дисплея с лазерной подсветкой. История веб-типографики показывает, что стандарты запаздывают на 5-7 лет от реальных проблем; вы можете их опередить, заложив контраст с запасом на будущее.

Добавлено: 23.04.2026