Adjusting font contrast and size in 1C-Bitrix

Contrast and Font Size Setup in 1C-Bitrix

Designer chose gray text on white background — beautiful, minimalist. Then WCAG audit comes, and it turns out main catalog text has 3.2:1 contrast with required 4.5:1. This is not just legal — about 8% of men have color vision deficiency, and for them gray on white is literally unreadable.

How to Measure Contrast in Bitrix

Contrast calculated by WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are relative color brightness by sRGB standard. Quickest way to check — Chrome DevTools: select element, in Accessibility panel see "Contrast ratio." Values:

• 4.5:1 — minimum for normal text (AA)
• 3:1 — minimum for large text (18pt / 14pt bold) and UI components (AA)
• 7:1 — AAA, recommended for long text

Typical violations in Bitrix templates:

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

Fixing Contrast in CSS

In Bitrix, styles usually split across files: template style.css, component style.css in component template directories, custom CSS. Search violations in all three places.

Minimum fixes for store:

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

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

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

Font Sizes and Scaling

WCAG 1.4.4 requires text to scale up to 200% without content loss. In Bitrix, violated when:

• Fonts set in px — don't scale when changing browser base size
• Containers with fixed height in px cut text on scaling
• 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; }

Dynamic Font Size Switching

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

:root { --font-scale: 1; }
body { font-size: calc(1rem * var(--font-scale)); }

JavaScript changes variable on button click 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 Bitrix template, font size buttons added to header.php. Function works without page reload and without PHP — no Bitrix cache conflict.

Dark Theme and High Contrast Mode

Modern browsers support prefers-contrast: more — 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; }
}