Цвет и контраст: чтобы текст читался

Урок 2.5 · Интерфейсы и сайты с нуля · Модуль 2. Как это выглядит: семь простых настроек · По подписке

Цель урока: Понять, что такое контраст, и научиться выбирать цвета, при которых текст видно.

Нужно знать заранее: Урок 2.4

Объяснение

Зачем это нужно: Красивый цвет не помогает, если текст не читается. Контраст — это разница между цветом текста и фоном. Когда она маленькая, человек щурится, а на солнце не видит ничего. Это не вкус, а измеримая вещь.

Как это работает: Контраст считают по формуле WCAG. Для обычного текста рекомендуют отношение не меньше 4.5:1, для крупного (от 24px или 19px жирного) — 3:1. Чем больше отношение, тем лучше видно. Практическое правило: тёмный текст на светлом фоне или светлый на тёмном. Серый текст на белом — частая ошибка: он кажется «стильным», но плохо читается. Цветов не должно быть слишком много. Один акцентный цвет + нейтральные оттенки — уже достаточно.

Пример с разбором: Плохо: color: #94a3b8; background: #ffffff; — светло-серый на белом, контраст около 2.5:1. Хорошо: color: #334155; background: #f8fafc; — тёмно-серый на светлом, контраст больше 7:1. Плохо: color: white; background: #fef9c3; — белый на светло-жёлтом почти не виден. Хорошо: color: #0f172a; background: #fef9c3; — тёмный на светло-жёлтом читается.

Уроки модуля 2

• 2.1 Цвет, размер и скругление (бесплатно)
• 2.2 Отступы: снаружи и внутри (по подписке)
• 2.3 Рамка, тень и шрифт (по подписке)
• 2.4 Семь настроек вместе: карточка (по подписке)
• 2.5 Цвет и контраст: чтобы текст читался — вы здесь (по подписке)
• 2.6 Шрифт: размер, насыщенность и интервал (по подписке)
• 2.7 Состояния кнопки: hover, focus, active (по подписке)
• 2.8 Разбор карточки: что поправить в оформлении (по подписке)