Светло-серый текст на белом фоне выглядит изящно.

Его не видит каждый третий пользователь старше 50 лет. И ещё процентов десять — те, кто читает с яркого солнца, на грязном экране, с уставшими глазами к концу дня.

WCAG 2.1 говорит: контраст текста к фону должен быть не меньше 4,5 к 1 для обычного размера. Это не рекомендация и не «для accessibility-проектов». Это базовая физика — как пол в квартире не должен качаться.

Где это ломается чаще всего

→ Серый текст на белом — placeholder в полях ввода, secondary-описания под заголовками, подписи к иконкам. Дизайнер выбирает цвет «чтобы не давил» — и текст становится невидимым для трети пользователей.

→ Кнопки disabled — оттенок серого вместо чёткой подсказки, что не так. Пользователь думает: продукт сломался.

→ Цветной текст на цветном фоне — голубой на сине-фиолетовом, белый на жёлтом. Красиво на скриншоте, нечитаемо в проде.

→ Тонкие шрифты на маленьком кегле. Inter Light 12 px на сером — это не текст, это орнамент.

Как проверить за 30 секунд

Открой макет в Figma. Поставь плагин Stark или Contrast. Прогони все блоки текста — он покажет, где провал.

Или ещё проще: сделай скриншот и сильно уменьши масштаб. Если текст начал сливаться с фоном — у тебя проблема.

Простое правило

4,5 к 1 — это минимум, не идеал. Для важного текста стремись к 7 к 1. Для критичного — к 10 к 1.

Чистый чёрный #000 на белом #FFF — самый рабочий вариант. Не «слишком жёстко». Не «не модно». Просто читаемо.

Какой текст в твоём текущем проекте сегодня не пройдёт WCAG? 👇