Покращення контрастності та шрифтів на 1С-Бітрікс для WCAG

Покращення контрастності та шрифтів на 1С-Бітрікс для WCAG

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

Як виміряти контраст у Бітріксі?

Контраст обчислюється за формулою WCAG: (L1 + 0.05) / (L2 + 0.05), де L1 і L2 — відносна яскравість кольорів за стандартом sRGB. Наш метод прискорює аудит у 3 рази порівняно з ручною перевіркою, використовуючи axe DevTools. Найшвидший спосіб перевірити — DevTools Chrome: вибрати елемент, у панелі Accessibility побачити «Contrast ratio». Значення:

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

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

Чи обов'язкова кнопка збільшення шрифту?

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

Приклади виправлення контрасту

Як ми виправляємо контраст у 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+ проектах.

Динамічне перемикання розміру шрифту

Реалізується через 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; } }