Проверка контраста цветов

Проверка соответствия WCAG 2.1 для доступности

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Зачем проверять контраст?

Около 8 % мужчин и 0,5 % женщин имеют ту или иную форму нарушений цветовосприятия. Низкий контраст затрудняет чтение — особенно при мелком шрифте, плохих экранах и для пользователей с нарушением зрения. Стандарты WCAG задают минимальные значения, обязательные во многих странах (ЕС EN 301 549, США ADA).

Пороги WCAG 2.1

Уровень AA требует 4,5:1 для обычного текста (меньше 24 px или 18,66 px жирный) и 3:1 для крупного текста. AAA — 7:1 для обычного и 4,5:1 для крупного. UI-компонентам и графике нужно минимум 3:1. Эти значения основаны на относительной светимости по формуле WCAG.