Как сохранить фирменный цвет и читаемый текст виджета

Раздели узнаваемость и чтение

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

Критерий W3C Contrast (Minimum) устанавливает для обычного текста порог 4,5:1, для крупного — 3:1, с описанными исключениями. Крупный текст определяется размером и насыщенностью: обычно от 18 pt либо от 14 pt при жирном начертании. Брендовый стиль сам по себе не освобождает обычный текст предложения от проверки.

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

Измерь фактическую пару, включая фон

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

В WCAG отношение строится из относительной яркости более светлого и более тёмного цветов. Для непрозрачной однотонной sRGB-пары расчёт воспроизводим. Используй инструмент с понятной методикой и сохраняй исходные значения. При сравнении с порогом не округляй число вверх до прохождения.

• Какой элемент и какое состояние проверены.
• Цвет текста и итоговый фон под ним.
• Размер и насыщенность текста, основание выбранного порога.
• Полное значение отношения и результат сравнения.
• Что осталось вне этой проверки: изображение, другое состояние, значок или фокус.

Посмотри на три рассчитанные условные пары

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

Меняй роль, фон или тон, сохраняя смысл

Если пара не проходит выбранный порог, сначала попробуй изменить роль цвета: оставить фирменный оттенок в полосе, обводке или декоративном элементе, а текст сделать тёмным на светлом фоне. Другой вариант — согласовать более тёмный или светлый тон. Изменение размера текста тоже требует реальной проверки; нельзя объявить мелкую надпись крупной только ради более мягкого порога.

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

Ошибка должна объясняться текстом и связью с полем. Красный цвет сам по себе не сообщает, что исправить. Здесь это проектное требование к понятности: коэффициент текста не заменяет смысл сообщения.

Пройди проверку палитры по фактическому блоку

Проверь собранный вариант после изменения

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