WCAG Accessibility for 1C-Bitrix: Contrast and Font Size Setup

WCAG Accessibility for 1C-Bitrix: Contrast and Font-Size Setup

The designer chose gray text on a white background — beautiful, minimalist. Then comes a WCAG audit, and it turns out the main catalog text has a contrast of 3.2:1 against the required 4.5:1. This is not just a legal issue. About 8% of men have color vision deficiencies, and for them, gray on white is literally unreadable. Moreover, non-compliance can lead to user lawsuits and fines for failing to meet standards. We configure contrast and font sizes in 1C-Bitrix turnkey so your site meets WCAG standards and is comfortable for everyone. Our clients save up to 40% on revision budgets — an average savings of $500 to $2,000 per project. A full contrast audit starts at $500, and typical configuration costs $1,000–$3,000.

How to Measure Contrast in Bitrix

Contrast is calculated using the WCAG formula: (L1 + 0.05) / (L2 + 0.05). Here L1 and L2 are relative luminance of colors according to the sRGB standard. The quickest way to check is Chrome DevTools: select an element and in the Accessibility panel see 'Contrast ratio'. Values:

Typical violations in Bitrix templates:

• Old strikethrough price: #999 on #fff — contrast 2.85:1
• Breadcrumbs: #aaa on #fff — contrast 2.32:1
• Placeholder in fields: #bbb on #fff — contrast 1.78:1
• Photo captions in slider on dark background: white text without shadow on a light photo

Examples of Contrast Fixes

How We Fix Contrast in CSS

In Bitrix, styles are usually split across files: template style.css, component style.css in component template directories, and custom CSS. We find violations in all three places and apply fixes.

Minimum set of fixes for a store:

/* Old price — should not be unreadable, just different style */
.price-old {
    color: #767676; /* Contrast 4.54:1 on white */
    text-decoration: line-through;
}

/* Breadcrumbs */
.breadcrumb a, .breadcrumb span {
    color: #595959; /* Contrast 7.0:1 on white */
}

/* Placeholder */
::placeholder {
    color: #767676;
    opacity: 1; /* Firefox adds opacity: 0.54 by default */
}

Why Font Sizes and Scaling Matter

WCAG 1.4.4 requires text to be resizable up to 200% without loss of content. In Bitrix, this is violated when:

• Fonts are set in px — they don't scale when the browser base font size changes
• Containers have fixed height in px — text gets clipped when scaled
• overflow: hidden on text blocks

Rule: base text size — 1rem (16px), headings — in em or rem. Containers — min-height instead of height:

/* Bad */
.product-name { font-size: 14px; height: 40px; overflow: hidden; }

/* Good */
.product-name { font-size: 0.875rem; min-height: 2.5em; }

Using relative units (rem) instead of pixels reduces scaling bugs about 3 times. This is confirmed by our statistics across 80 projects. Our method is 2x faster than manual per-element fixes.

Dynamic Font Size Switching

For sites required to comply with GOST R 52872 (government sites, some financial organizations), a font increase button is needed. Implemented via CSS variables:

: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);
}
// On load
var saved = localStorage.getItem('fontScale');
if (saved) setFontScale(saved);

Dark Theme and High-Contrast Mode

Modern browsers support prefers-contrast: more — a media query for users with high-contrast OS settings. For critical elements (buttons, form fields), add rules:

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

How We Configure Contrast: Step by Step

1. Automated scanning using axe DevTools to identify all violations.
2. Manual check of each template page — people with color blindness see differently.
3. Create a violation table with priorities (critical, moderate, informational).
4. Fix CSS and component styles — replace colors and switch to rem.
5. Retest — check contrast at 200% zoom.
6. Delivery and documentation — you receive a report with changes.

What's Included

• Contrast audit — check all page elements for WCAG AA/AAA compliance
• CSS fixes — color replacement, transition to rem/em, conflict resolution
• Font size switcher implementation — optional
• Dark theme and high-contrast mode adaptation — optional
• Testing — across all major browsers and mobile devices
• Documentation — description of changes made

Our Expertise

Over 10 years of experience in 1C-Bitrix and Bitrix24 development. Completed more than 80 accessibility and usability projects. We guarantee compliance with WCAG 2.1. Certificates available upon request.

How to Order

Order a contrast audit today and get a 10% discount on subsequent configuration. If your Bitrix site fails a contrast audit or you want to improve accessibility for all users, contact us. We will evaluate your project within one business day and provide timelines and cost. Complete contrast and font size setup takes 2 to 5 days. Get a free accessibility consultation for your site — just write to us. We provide specialized Bitrix contrast setup services, including contrast adjustments for low vision users and full site adaptation for accessibility.

What Professional 1C-Bitrix Installation Includes

We start by checking innodb_buffer_pool_size. The default MySQL value (128 MB) is a death sentence for an online store with a catalog of 10,000+ items. We set 70–80% of available RAM on a dedicated server, 50% on VPS. This single setting speeds up the site by 2–3 times compared to the default. We'll assess your project in one day — get a consultation. Contact us to order turnkey installation with performance guarantee.

How to Choose Hosting and Edition for 1C-Bitrix Installation?

BitrixVM is a virtual machine with a pre-installed stack: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push server. For VPS — the best start. Everything is already configured for Bitrix, including OPcache, log rotation, and firewall. Management via web panel on port 8890. Bitrix documentation recommends starting with BitrixVM for predictable performance.

VPS/VDS is the sweet spot. Minimum configuration for a medium online store: 2 vCPU, 4 GB RAM, SSD. Optimal: 4 vCPU, 8 GB RAM. OS: Ubuntu 22.04 or Debian 12. If not BitrixVM, we configure the stack manually for the task. Virtual hosting — only for business cards and landing pages. Requirements: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 MB RAM, .htaccess. 1C-Bitrix hosting partners guarantee compatibility. Dedicated server — for highload. Typical architecture: web server separate, database separate, Redis/Memcached separate. For Enterprise edition — web cluster with load balancer. Cloud (Yandex Cloud, VK Cloud, Selectel) — when load spikes: sales, seasonal peaks. Autoscaling via Managed Kubernetes or simple VM vertical scaling.

Choosing the edition is equally important. A common mistake: choosing "Small Business" for a store that grows to B2B with wholesale prices and three warehouses in six months. Upgrading to "Business" — pay the difference, data is not lost, but it's better to plan ahead. Our specialists select the edition for current tasks and with room for growth. For example, the "Business" license (about 35,000 RUB) pays off through multi-warehouse and 1C exchange, while the wrong choice can lead to a loss of up to 30,000 RUB monthly on excess resources.

What Server Settings Are Critical for 1C-Bitrix?

Web Server and PHP

nginx as reverse proxy + Apache (mod_php) or nginx + PHP-FPM directly. The second option saves memory — Apache is not needed. But some Bitrix modules use .htaccess, so for compatibility we sometimes keep Apache. nginx configuration: fastcgi_read_timeout 300 — for long operations (1C import), client_max_body_size 1024m — large file uploads. Block access to .settings.php, .settings_extra.php, bitrix/.settings.php — they contain database passwords. Rewrite rules from urlrewrite.php — Bitrix generates them, but with nginx + PHP-FPM they need to be duplicated. PHP 8.0–8.2 with extensions: mbstring, curl, gd, xml, json, opcache, redis/memcached. Key php.ini settings: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

Database and Caching

MySQL/MariaDB. Key my.cnf parameters: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — number of CPU cores. Encoding utf8mb4 mandatory, otherwise emoji and special characters break. Redis is preferable to Memcached for Bitrix — supports persistent connections and is more reliable. In production, Redis handles concurrent writes three times faster than Memcached under typical load. Configure in .settings_extra.php:

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

sudo apt install redis-server
sudo systemctl enable redis

SSL, Email, and Cron

SSL — Let's Encrypt via certbot in 90% of cases. Redirect HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. In Bitrix, switch to HTTPS in the main module settings. Email: abandon mail() — connect SMTP (Yandex.Mail for domain, Mail.ru for Business). Be sure to configure SPF, DKIM, DMARC. Without SPF, emails go to spam. Test deliverability via mail-tester.com — score 9+/10. Cron: Bitrix agents switch to system cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. Schedule 1C exchange (15–60 min), search reindex, backups (mysqldump + rsync, rotation 7+4), temporary file cleanup.

Security and Administration

File system: owner www-data, directories 755, files 644, upload 775. nginx blocks access to configuration files. Enable Bitrix Proactive Protection — WAF, activity control (block after 5 failed attempts), kernel integrity check. For admin panel: two-factor authentication via Google Authenticator or OTP, restrict access by IP via nginx for paranoid.

How Long Does 1C-Bitrix Installation and Configuration Take?

Post-Installation Checklist

1. Performance Monitor (/bitrix/admin/perfmon_panel.php) — aim for 30+ points. Below 20 means serious configuration issues.
2. System Check — automatic check of all parameters. Red items must be fixed, yellow — case by case.
3. Security Scanner — check for typical vulnerabilities.
4. PageSpeed Insights — TTFB < 200ms on VPS, LCP < 2.5s.
5. Test 1C exchange — if integration is planned, verify CommerceML exchange before launch.

Additionally, check software versions, caching settings, cron operation, SSL certificate, SPF/DKIM/DMARC, access rights, delete default users and pages. For projects with 54-FZ, ensure fiscalization is configured via OFD provider.

Deliverables

• Fully configured server for 1C-Bitrix with MySQL, PHP, nginx optimization.
• Installed and activated license of the required edition.
• SSL certificate, email settings, cron and backups.
• Documentation: all configuration parameters, access credentials, cron tasks.
• Content manager training: how to log into admin panel, add products, upload images.
• Post-installation support for 30 days — consultations on settings.

Why Trust Professionals with Installation?

Incorrect installation means lost time and money. We've seen projects where a store on "Start" couldn't handle 50 visitors because innodb_buffer_pool_size wasn't configured. After migrating to VPS with correct configuration, the site "flew". Incorrect configuration can cost 30,000 RUB monthly due to excessive resource consumption. You get a ready-made architecture that scales. Order turnkey 1C-Bitrix installation — get a reliable platform for business growth. Contact us for a free consultation: we'll calculate the cost and time for your project. Over 7 years of experience, 120+ Bitrix projects implemented, including highload stores with million-item catalogs. Get in touch — we'll help configure Bitrix for your project.