Серый текст на белом — плохая идея (Азбука контраста)

«Как же чисто и минималистично», — говорит дизайнер, глядя на светло‑серый текст на белом фоне на 4K‑экране в темной комнате. «Я ничего не вижу», — говорит пользователь, сидящий в автобусе, когда солнце отражается на экране. Контраст — это не «красота». Это функциональность.

Правила WCAG 2.2: AA vs AAA

Web Content Accessibility Guidelines (WCAG) задают конкретные математические коэффициенты.

AA (минимум): Контраст обычного текста минимум 4.5:1. Для крупного текста — 3:1.
AAA (идеал): Обычный текст 7:1. Это золотой стандарт, который мы рекомендуем для финансов и медицины.

Дальтонизм: 8% мужчин

Каждый двенадцатый мужчина — дальтоник.

Самый распространенный тип — красно‑зеленый (deuteranopia). Если ошибка красная, а успех зеленый и вы не используете иконки, 8% пользователей не поймут, что произошло. Решение: Всегда используйте «двойной код». Цвет + иконка (галочка или восклицательный знак). Цвет + текст («Ошибка!»).

Инструменты для дизайнеров:

Не угадывайте — измеряйте. Используйте Stark (плагин Figma) или Contrast (приложение macOS), чтобы проверять контраст в реальном времени. Если брендовый цвет слишком светлый, для текста берите более темный вариант.

FAQ: Контраст

Черный на белом всегда лучший? +

Не всегда. Чистый черный (#000000) на белом (#FFFFFF) утомляет глаза (слишком жестко). Мы рекомендуем темно‑серый (#1A1A1A) на мягком белом (#F5F5F5).

Это влияет на SEO? +

Да. Google «видит», когда текст слишком похож на фон, и может считать его «скрытым текстом» (cloaking), что приводит к санкциям.