Как собрать читаемую палитру светлой темы

Задайте сдержанную иерархию поверхностей

Начните с холста и одной-двух поверхностей панелей. Чистый белый может служить панелью, а немного более тёмный нейтральный — фоном страницы, однако каждое дополнительное почти белое значение создаёт различие, которое нужно изучать пользователю и тестировать команде. Назначьте поверхностям роли canvas, panel, raised panel или selected region. Не стройте иерархию только на малых различиях RGB, исчезающих на другом экране или при ярком освещении. Пространство, группировка, заголовки, границы и высота должны подтверждать структуру. Заранее перечислите допустимые токены текста на каждой поверхности.

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

Закрепите читаемость уровней текста

Определяйте основной, вторичный, приглушённый и обратный текст только для документированных задач. Основной передаёт содержание, вторичный поддерживает его, приглушённый подходит для метаданных, но сохраняет достаточный контраст при реальном размере и начертании. Критерий WCAG 2.2 1.4.3 требует не менее 4,5:1 для обычного текста и 3:1 для крупного текста согласно его определению, с указанными исключениями. Надпись не освобождается от требования только потому, что дизайнер назвал её незаметной. Placeholder тоже сообщает информацию и не должен оставаться единственной меткой поля.

:root {
  --surface-canvas: #f8fafc;
  --surface-panel: #ffffff;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --border-default: #cbd5e1;
  --accent: #4338ca;
  --focus-ring: #2563eb;
}

Используйте границы и высоту по назначению

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

• Canvas, panel и raised-поверхности с документированными парами текста.
• Основной, вторичный и приглушённый текст с конкретными ролями.
• Существенные границы и фокус, проверенные относительно соседних цветов.
• Пары accent и on-accent плюс варианты акцента на поверхности.

Считайте акцент набором парных ролей

Акцент нельзя считать одним значением, подходящим везде. Проверяйте фон accent вместе с принадлежащим ему передним планом on-accent, а акцентный текст или значок на светлой поверхности тестируйте отдельно. Насыщенный цвет, пригодный как фон крупной кнопки, может не пройти для мелкого текста на белом. Ссылке нужен различимый признак в контексте, включая hover и visited там, где это важно; одного цвета бывает недостаточно среди окружающего текста. Статусы дополняйте текстом, значком, подписью или узором. Опасное действие различают формулировкой и взаимодействием, а не только красным тоном.

Проектируйте фокус и состояния

Клавиатурный фокус должен быть видимым. Кольцо фокуса контрастирует с соседними цветами во всех состояниях появления, не обрезается overflow и не заменяется едва заметной сменой оттенка. :focus-visible помогает учитывать способ ввода, если это соответствует политике браузеров, но нужен пригодный фолбэк. Hover, active, selected, disabled и validation требуют отдельных решений. Для неактивного содержимого существуют исключения конкретных критериев, однако бессистемное снижение контраста ухудшает читаемость. Не применяйте disabled-стиль к информации, которую пользователь всё ещё должен понимать.

.card {
  color: var(--text-primary);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
}

.control:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

Измеряйте контраст после композитинга

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

• Измеряйте обычный текст по критерию 4,5:1 там, где он применим.
• Проверяйте крупный текст и существенные нетекстовые границы по применимым критериям 3:1.
• Композируйте каждый полупрозрачный передний план с реальным фоном.
• Исследуйте focus, hover, selected, disabled, error и forced-colors.

Проверяйте тему на полных экранах

Проверяйте полные экраны, а не только страницу токенов. Охватите формы, таблицы, навигацию, диалоги, пустые состояния, ошибки, выделение, порядок фокуса, масштабирование и длинные локализованные строки. После автоматической проверки вручную исследуйте изображения, градиенты, прозрачность, значки и семантику компонентов. Попробуйте яркое внешнее освещение, reduced color differentiation, forced-colors и системное увеличение текста, не утверждая, что одна симуляция воспроизводит любой опыт инвалидности. Фиксируйте точную пару и состояние каждой ошибки. Готовая тема сохраняет роли и существенное содержание во всех поддерживаемых контекстах.