Настроювання контрастності та розмірів шрифтів 1С-Бітрікс

Налаштування контрастності та розмірів шрифтів в 1С-Bitrix

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

Як виміряти контраст в Bitrix

Контраст рахується за формулою з 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, рекомендується для довгих текстів

Типові порушення в шаблонах Bitrix:

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

Виправлення контрастності в CSS

В Bitrix стилі зазвичай розбиті по файлах: 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% без втрати контенту. В Bitrix це порушується коли:

• Шрифти задані в 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);

В шаблоні Bitrix кнопки розміру шрифту додаються в header.php. Функція працює без перезавантаження сторінки та без PHP — не конфліктує з кешем Bitrix.

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

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

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