Какие требования WCAG предъявляют к цветовому контрасту?
Accessibility, a11y
WCAG задаёт минимальную контрастность текста и фона, чтобы его могли читать люди со слабым зрением.
Уровни
- AA (обычная цель): 4.5:1 для обычного текста и 3:1 для крупного (от 24 px или 18.66 px жирного).
- AAA: 7:1 для обычного и 4.5:1 для крупного.
- Для значимых элементов интерфейса (границы полей, иконки, фокус) нужно 3:1 к соседним цветам.
Не только цвет
Информацию нельзя передавать одним цветом: ошибка в поле — это красная рамка плюс текст и иконка. Иначе её не заметят люди с нарушением цветового зрения.
Как проверять
Инструменты контраста в DevTools, расширения вроде axe и Lighthouse, а также ручная проверка в разных темах оформления.
/* серый текст на белом: #767676 даёт 4.54:1, лучше не светлее */
.hint { color: #767676; background: #fff; }Коротко для собеседования
Минимум для AA: 4.5:1 для текста и 3:1 для крупного текста и элементов интерфейса. Смысл не должен передаваться только цветом.