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:
| Level | Minimum contrast | Application |
|---|---|---|
| AA | 4.5:1 | Normal text |
| AA large | 3:1 | Large text (18pt / 14pt bold) and UI |
| AAA | 7:1 | Long texts, recommendation |
Typical violations in Bitrix templates:
- Old strikethrough price:
#999on#fff— contrast 2.85:1 - Breadcrumbs:
#aaaon#fff— contrast 2.32:1 - Placeholder in fields:
#bbbon#fff— contrast 1.78:1 - Photo captions in slider on dark background: white text without shadow on a light photo
Examples of Contrast Fixes
| Element | Problem | Before | After | Contrast after |
|---|---|---|---|---|
| Old price | #999 on white | 2.85:1 | #767676 | 4.54:1 |
| Breadcrumbs | #aaa on white | 2.32:1 | #595959 | 7.0:1 |
| Placeholder | #bbb on white | 1.78:1 | #767676 | 4.54:1 |
| Button on background | #ccc on #fff | 1.63:1 | #595959 | 7.0:1 |
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: hiddenon 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)); } Full font switcher code example
JavaScript on button click changes the variable and saves to localStorage:
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); In the Bitrix template, font size buttons are added in header.php. The function works without page reload and without PHP — no conflict with Bitrix cache.
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
- Automated scanning using axe DevTools to identify all violations.
- Manual check of each template page — people with color blindness see differently.
- Create a violation table with priorities (critical, moderate, informational).
- Fix CSS and component styles — replace colors and switch to rem.
- Retest — check contrast at 200% zoom.
- 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.