Контраст и читаемость

01 Что такое контраст #

Контраст — это разница между цветом текста и цветом фона. Если она маленькая, глаз не может различить буквы. Даже красивый шрифт и правильная иерархия не спасут, если текст сливается с фоном.

Хорошее соотношение контраста — минимум 4.5:1 для основного текста и 3:1 для крупных заголовков. Это стандарт WCAG, который используют все крупные сайты.

Если сомневаешься — сделай скриншот макета, переведи в чёрно-белый. Если текст всё ещё читается — контраст в порядке.

02 Как проверить #

• WebAIM Contrast Checker — вводишь цвета, получаешь оценку.
• Проверка в сером: конвертируй дизайн в ч/б — если текст виден, всё ок.
• Проверка на телефоне: посмотри на макет с телефона в солнечный день.
• Проверка на слабом экране: уменьши яркость монитора до 30%.