Покращення контрастності та шрифтів на 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);

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

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

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

Як ми налаштовуємо контрастність: покроково

1. Автоматизоване сканування за допомогою axe DevTools для виявлення всіх порушень.
2. Ручна перевірка кожної сторінки шаблону — люди з кольоровою сліпотою бачать по-різному.
3. Створення таблиці порушень із пріоритетами (критичні, середні, інформаційні).
4. Правка CSS та компонентних стилів із заміною кольорів та переходом на rem.
5. Повторне тестування — перевіряємо контраст при масштабуванні 200%.
6. Здача та документація — ви отримуєте звіт зі змінами.

Що входить у роботу

• Аудит контрастності — перевірка всіх сторінкових елементів на відповідність WCAG AA/AAA
• Правка CSS — заміна кольорів, перехід на rem/em, усунення конфліктів
• Реалізація перемикача розміру шрифту — за бажанням клієнта
• Адаптація під темну тему та висококонтрастний режим — за бажанням
• Тестування — перевірка у всіх основних браузерах та на мобільних пристроях
• Документація — опис внесених змін

Наші компетенції

Більше 10 років досвіду в розробці на 1С-Бітрікс та Бітрікс24. Виконали понад 80 проектів з налаштування доступності та юзабіліті. Гарантуємо відповідність стандартам WCAG 2.1. Надаємо сертифікати на запит.

Як замовити

Замовте аудит контрастності вже сьогодні та отримайте знижку 10% на подальше налаштування. Вартість робіт для типового магазину на Бітрікс — від 15 000 грн (економія до 40% порівняно з альтернативними рішеннями). Якщо ваш сайт на Бітріксі не проходить аудит контрастності або ви хочете покращити доступність для всіх категорій користувачів — зв'яжіться з нами. Оцінимо проект за 1 робочий день, надамо терміни та вартість. Налаштування контрастності та розмірів шрифтів під ключ — від 2 до 5 днів. Отримайте безкоштовну консультацію з доступності вашого сайту — просто напишіть нам.

Що включає професійне встановлення 1С-Бітрікс

Ми починаємо встановлення 1С-Бітрікс з перевірки innodb_buffer_pool_size. Дефолтне значення MySQL (128 МБ) — вирок для інтернет-магазину з каталогом на 10 000+ товарів. Ми ставимо 70–80% від доступної RAM на виділеному сервері, 50% на VPS. Одна ця налаштування прискорює сайт у 2–3 рази порівняно з дефолтом. Правильна конфігурація сервера заощаджує до 60% вартості хостингу щомісяця. Оцінимо ваш проєкт за один день — отримайте консультацію. Звертайтеся, щоб замовити встановлення під ключ з гарантією продуктивності.

Як вибрати хостинг та редакцію для встановлення 1С-Бітрікс?

BitrixVM — віртуальна машина з попередньо встановленим стеком: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push‑сервер. Для VPS — найкращий старт. Все вже сконфігуровано під Бітрікс, включаючи OPcache, логротацію та firewall. Керування через веб‑панель на порту 8890.

VPS/VDS — золота середина. Мінімальна конфігурація для середнього інтернет‑магазину: 2 vCPU, 4 ГБ RAM, SSD. Оптимальна: 4 vCPU, 8 ГБ RAM. ОС: Ubuntu 22.04 або Debian 12. Якщо не BitrixVM — налаштовуємо стек вручну під задачу. Віртуальний хостинг — тільки для візиток та лендінгів. Вимоги: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 МБ RAM, .htaccess. Хостинг‑партнери 1С-Бітрікс — гарантія сумісності. Виділений сервер — для highload. Типова архітектура: веб‑сервер окремо, база даних окремо, Redis/Memcached окремо. На редакції «Ентерпрайз» — веб‑кластер з балансувальником. Хмара (Yandex Cloud, VK Cloud, Selectel) — коли навантаження стрибає: розпродажі, сезонні піки. Автомасштабування через Managed Kubernetes або просто вертикальне масштабування VM.

Вибір редакції — не менш важливий крок. Часта помилка: беруть «Малий бізнес» для магазину, який через півроку виростає до B2B з оптовими цінами та трьома складами. Перехід на «Бізнес» — доплата різниці, дані не втрачаються, але краще передбачити заздалегідь. Наші фахівці підберуть редакцію під поточні завдання і з запасом на зростання. Наприклад, ліцензія «Бізнес» окупається за рахунок мультискладу та обміну з 1С, а неправильний вибір призводить до додаткових витрат, які можуть у 2–3 рази перевищити вартість ліцензії.

Які налаштування сервера критичні для 1С-Бітрікс?

Веб‑сервер та PHP

nginx як reverse proxy + Apache (mod_php) або nginx + PHP-FPM напряму. Другий варіант економить пам’ять — Apache не потрібен. Але деякі модулі Бітрікс використовують .htaccess, тому для сумісності іноді залишаємо Apache. Конфігурація nginx: fastcgi_read_timeout 300 — для довгих операцій (імпорт з 1С), client_max_body_size 1024m — завантаження великих файлів. Закриваємо доступ до .settings.php, .settings_extra.php, bitrix/.settings.php — там паролі до бази. Rewrite‑правила з urlrewrite.php — Бітрікс сам генерує, але при nginx + PHP-FPM потрібно продублювати. PHP 8.0–8.2 з розширеннями: mbstring, curl, gd, xml, json, opcache, redis/memcached. Ключові налаштування php.ini: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M. Порівняно з Apache + mod_php, зв’язка nginx + PHP-FPM споживає на 30% менше оперативної пам’яті при однаковому навантаженні — це підтверджено на наших проєктах.

База даних та кешування

MySQL/MariaDB. Ключові параметри my.cnf: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — за кількістю ядер CPU. Кодування utf8mb4 обов'язково, інакше емодзі та спецсимволи ламаються. Redis кращий за Memcached для Бітрікс — підтримує persistent connections та більш надійний. Налаштовуємо в .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

Redis прискорює роботу сайту в 1.5 рази порівняно з Memcached завдяки постійним з’єднанням та вбудованому кешуванню сесій.

SSL, пошта та cron

SSL — Let's Encrypt через certbot у 90% випадків. Редирект HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. У Бітрікс перемикаємо на HTTPS у налаштуваннях головного модуля. Пошта: відмовляємося від mail() — підключаємо SMTP (Яндекс.Пошта для домену, Mail.ru для бізнесу). Обов'язково налаштовуємо SPF, DKIM, DMARC. Без SPF листи потрапляють у спам. Тестуємо доставляння через mail‑tester.com — оцінка 9+/10. Cron: агенти Бітрікс переводимо на системний cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. На cron вішаємо обмін з 1С (15–60 хв), пошукову переіндексацію, бекапи (mysqldump + rsync, ротація 7+4), очищення тимчасових файлів.

Безпека та адміністрування

Файлова система: власник www-data, директорії 755, файли 644, upload 775. nginx блокує доступ до файлів конфігурації. Вмикаємо Проактивний захист Бітрікс — WAF, контроль активності (блокування після 5 невдалих спроб), перевірку цілісності ядра. Для адмін‑панелі: двофакторна аутентифікація через Google Authenticator або OTP, обмеження доступу за IP через nginx для параноїків.

Скільки часу займає встановлення 1С-Бітрікс та налаштування?

Перевірка після встановлення (покроковий чек‑лист)

1. Монітор продуктивності (/bitrix/admin/perfmon_panel.php) — цілимося в 30+ балів. Нижче 20 — є серйозні проблеми з конфігурацією.
2. Перевірка системи — автоматична перевірка всіх параметрів. Червоні пункти — виправляємо обов'язково, жовті — за ситуацією.
3. Сканер безпеки — перевірка на типові вразливості.
4. PageSpeed Insights — TTFB < 200мс на VPS, LCP < 2.5с.
5. Тестовий обмін з 1С — якщо планується інтеграція, перевіряємо CommerceML‑обмін до запуску.

Додатково перевіряємо версії ПЗ, налаштування кешування, роботу cron, SSL‑сертифікат, SPF/DKIM/DMARC, права доступу, видалення дефолтних користувачів та сторінок. Для проєктів з 54‑ФЗ переконуємося, що налаштована фіскалізація через ОФД‑провайдера.

Що входить у роботу (deliverables)

• Повністю налаштований сервер під 1С-Бітрікс з оптимізацією MySQL, PHP, nginx.
• Встановлена та активована ліцензія потрібної редакції.
• SSL‑сертифікат, поштові налаштування, cron та бекапи.
• Документація: всі параметри конфігурації, доступи, cron‑завдання.
• Навчання контент‑менеджера: як заходити до адмінки, додавати товари, завантажувати зображення.
• Підтримка після встановлення протягом 30 днів — консультації з налаштувань.

Чому варто довірити встановлення професіоналам?

Неправильне встановлення — втрата часу та грошей. Ми бачили проєкти, де магазин на «Старті» не міг витримати 50 відвідувачів, тому що не було налаштовано innodb_buffer_pool_size. Після перенесення на VPS з правильною конфігурацією сайт «полетів». Неправильна конфігурація призводить до невиправданих витрат — іноді в 2–3 рази дорожче, ніж вартість професійного налаштування. Ви отримуєте готову архітектуру, яка масштабується. Замовте встановлення 1С-Бітрікс під ключ — й отримайте надійну платформу для зростання бізнесу. Зв'яжіться з нами — розрахуємо вартість під ваш проєкт. Досвід понад 7 років, реалізовано 120+ проєктів на Бітрікс, включаючи highload‑магазини з каталогами понад 100 000 товарів. Звертайтеся — ми допоможемо налаштувати Бітрікс під ваш проєкт.