Контрастность текста на сайте: как проверить и сколько нужно

Серый текст восьмого кегля на светло-сером фоне — любимый приём «элегантного» дизайна и худший враг читателя. По оценкам ВОЗ, нарушения зрения есть у каждого третьего, а с возрастом контрастная чувствительность падает у всех. Поэтому контраст текста и фона — не вкусовщина, а измеримый параметр со стандартом.

Что измеряется и какие нормы

Контраст считается как соотношение яркостей текста и фона — например, «4.5:1». Белое на чёрном даёт максимальные 21:1. Стандарт WCAG (Web Content Accessibility Guidelines) требует:

• 4.5:1 — для обычного текста (уровень AA, базовая норма);
• 3:1 — для крупного текста: от 24px обычного или от 18.66px жирного;
• 7:1 — для обычного текста на максимальном уровне AAA.

Заметьте, «серый на белом» легко проваливает проверку: популярный #999999 на белом даёт всего 2.85:1 — ниже нормы, хотя выглядит «нормально» на хорошем мониторе. На бюджетном экране под солнцем такой текст просто исчезнет.

Зачем это вашему сайту с точки зрения бизнеса

Во-первых, доступность — это люди с ослабленным зрением, читающие сайт на ходу, при ярком свете, со старенького экрана. Во-вторых, поисковики всё активнее учитывают удобство страницы: контраст входит в проверку доступности, о которой поисковые системы открыто говорят в рекомендациях для разработчиков. В-третьих, низкоконтрастные серые плашки «не читаются» на распечатках и в скриншотах — а это тоже ваш контент.

Как проверить цвета за минуту

Откройте проверку контрастности, вставьте цвет текста и цвет фона (или возьмите их пипеткой) — увидите коэффициент и вердикт по уровням AA/AAA сразу для обычного и крупного текста. Если цвет не проходит, удобнее всего не «затемнять вслепую», а взять более тёмный оттенок того же цвета: в пипетке можно убрать яркость и сразу пересчитать контраст.