Настройка контрастности и размеров шрифтов 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);

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

Современные браузеры поддерживают 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% на последующую настройку. Если ваш сайт на Битриксе не проходит аудит контрастности или вы хотите улучшить доступность для всех категорий пользователей — свяжитесь с нами. Оценим проект за 1 рабочий день, дадим сроки и стоимость. Настройка контрастности и размеров шрифтов под ключ — от 2 до 5 дней. Получите бесплатную консультацию по доступности вашего сайта — просто напишите нам.

Что включает профессиональная установка 1С-Битрикс

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

Как выбрать хостинг и редакцию для установки 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 с оптовыми ценами и тремя складами. Переход на «Бизнес» — доплата разницы, данные не теряются, но лучше предусмотреть заранее. Наши специалисты подберут редакцию под текущие задачи и с запасом на рост. Например, лицензия «Бизнес» (около 35 000 ₽) окупается за счёт мультисклада и обмена с 1С, а неправильный выбор приводит к потере до 30 000 ₽ ежемесячно на избыточных ресурсах.

Какие настройки сервера критичны для 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.

База данных и кэширование

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']]]]

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 с правильной конфигурацией сайт «полетел». Неправильная конфигурация может обходиться в 30 000 ₽ ежемесячно из‑за избыточного потребления ресурсов. Вы получаете готовую архитектуру, которая масштабируется. Закажите установку 1С-Битрикс под ключ — и получите надёжную платформу для роста бизнеса. Свяжитесь с нами — рассчитаем стоимость под ваш проект. Опыт более 7 лет, реализовано 120+ проектов на Битрикс, включая highload‑магазины с миллионными каталогами. Обращайтесь — мы поможем настроить Битрикс под ваш проект.