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

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

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

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

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

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

• Цена «старая» зачёркнутая: #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; } 

Использование относительных единиц (rem) вместо пикселей снижает количество багов при масштабировании примерно в 3 раза — это подтверждает наша статистика по 80 проектам.

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

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

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

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

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