Настройка контрастности и размеров шрифтов 1С-Битрикс

Настройка контрастности и размеров шрифтов 1С-Битрикс

Дизайнер выбрал серый текст на белом фоне — красиво, минималистично. Потом приходит аудит WCAG, и оказывается, что основной текст каталога имеет контраст 3.2:1 при требуемом 4.5:1. Это не только юридическая история — около 8% мужчин имеют нарушения цветового зрения, и для них серый на белом буквально нечитаем.

Как измерить контраст в Битриксе

Контраст считается по формуле из WCAG: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — относительная яркость цветов по стандарту sRGB. Самый быстрый способ проверить — DevTools Chrome: выбрать элемент, в панели Accessibility увидеть «Contrast ratio». Значения:

• 4.5:1 — минимум для обычного текста (AA)
• 3:1 — минимум для крупного текста (18pt / 14pt bold) и UI-компонентов (AA)
• 7:1 — AAA, рекомендуется для длинных текстов

Типичные нарушения в шаблонах Битрикса:

• Цена «старая» зачёркнутая: #999 на #fff — контраст 2.85:1
• Хлебные крошки: #aaa на #fff — контраст 2.32:1
• Placeholder в полях: #bbb на #fff — контраст 1.78:1
• Подписи к фото в слайдере на тёмном фоне: белый текст без тени на светлой фотографии

Исправление контраста в CSS

В Битриксе стили обычно разбиты по файлам: style.css шаблона, компонентные style.css в директориях шаблонов компонентов, и кастомный CSS. Искать нарушения нужно во всех трёх местах.

Минимальный набор правок для магазина:

/* Старая цена — не должна быть нечитаемой, просто другого стиля */
.price-old {
    color: #767676; /* Контраст 4.54:1 на белом */
    text-decoration: line-through;
}

/* Хлебные крошки */
.breadcrumb a, .breadcrumb span {
    color: #595959; /* Контраст 7.0:1 на белом */
}

/* Placeholder */
::placeholder {
    color: #767676;
    opacity: 1; /* Firefox добавляет opacity: 0.54 по умолчанию */
}

Размеры шрифтов и масштабирование

WCAG 1.4.4 требует, чтобы текст увеличивался до 200% без потери контента. В Битриксе это нарушается когда:

• Шрифты заданы в px — они не масштабируются при изменении базового размера браузера
• Контейнеры с фиксированной высотой в px обрезают текст при масштабировании
• overflow: hidden на текстовых блоках

Правило: базовый размер текста — 1rem (16px), заголовки — в em или rem. Контейнеры — min-height вместо height:

/* Плохо */
.product-name { font-size: 14px; height: 40px; overflow: hidden; }

/* Хорошо */
.product-name { font-size: 0.875rem; min-height: 2.5em; }

Динамическое переключение размера шрифта

Для сайтов, обязанных соответствовать ГОСТ Р 52872 (сайты органов власти, некоторые финансовые организации), нужна кнопка увеличения шрифта. Реализуется через CSS-переменные:

:root { --font-scale: 1; }
body { font-size: calc(1rem * var(--font-scale)); }

JavaScript по клику на кнопку изменяет переменную и сохраняет в localStorage:

function setFontScale(scale) {
    document.documentElement.style.setProperty('--font-scale', scale);
    localStorage.setItem('fontScale', scale);
}
// При загрузке
var saved = localStorage.getItem('fontScale');
if (saved) setFontScale(saved);

В шаблоне Битрикса кнопки размера шрифта добавляются в header.php. Функция работает без перезагрузки страницы и без PHP — не конфликтует с кешом Битрикса.

Тёмная тема и высококонтрастный режим

Современные браузеры поддерживают prefers-contrast: more — медиазапрос для пользователей с высококонтрастными настройками ОС. Для критически важных элементов (кнопки, поля форм) стоит добавить правила:

@media (prefers-contrast: more) {
    .btn-primary { border: 2px solid currentColor; }
    input, select { border-width: 2px; }
}