Проверка контрастности WCAG: практическое руководство
Опубликовано 2026-07-15
Коэффициент контрастности — это не просто галочка для соответствия требованиям, это разница между текстом, который люди могут прочитать, и текстом, который не могут. Вот как он рассчитывается и что на самом деле означают пороги.
Почему важна контрастность
Текст, недостаточно контрастирующий с фоном, трудно читать всем, а для людей со слабым зрением или дальтонизмом он может быть вообще нечитаемым. Руководство по обеспечению доступности веб-контента (WCAG) устанавливает минимальные коэффициенты контрастности именно для того, чтобы текст оставался разборчивым для максимально широкого диапазона зрительных способностей, и соответствие им — это одновременно реальное улучшение удобства использования и, во многих юрисдикциях, юридическое требование для публичных веб-сайтов.
Как на самом деле рассчитывается коэффициент контрастности
Коэффициент контрастности — это сравнение относительной яркости (воспринимаемой яркости) цвета текста и цвета фона, выражаемое как отношение от 1:1 (идентично, вообще без контраста) до 21:1 (чистый чёрный на чистом белом, максимально возможный контраст). Это не простое сравнение яркости — яркость рассчитывается по формуле, которая по-разному взвешивает красный, зелёный и синий, поскольку человеческий глаз воспринимает зелёный как более яркий, чем красный или синий при той же интенсивности, и применяется гамма-коррекция, учитывающая, как мониторы фактически отображают цвет. Вам не нужно считать это вручную, но понимание того, что речь идёт о воспринимаемой яркости (а не просто о сырых значениях RGB), помогает объяснить некоторые действительно контринтуитивные результаты, например, почему некоторые цвета среднего тона, выглядящие вполне различимыми, всё же могут не проходить проверку.
Реальные пороги
WCAG 2.1 определяет два уровня соответствия. AA — стандарт, к которому стремится большинство организаций, требует коэффициента контрастности не менее 4,5:1 для обычного текста и 3:1 для крупного текста (определяемого как 18pt обычным начертанием или 14pt полужирным и крупнее). AAA, более строгий уровень, требует 7:1 для обычного текста и 4,5:1 для крупного текста. Большинство юридических требований по доступности (например, ADA в США, интерпретируемый через WCAG, или стандарт EN 301 549 в ЕС) ссылаются на AA как на базовый уровень, AAA обычно рассматривается как желательная, а не строго обязательная цель.
Распространённые ошибки контрастности
Светло-серый текст на белом фоне — безусловно самая распространённая ошибка: в макете дизайна он часто выглядит «чистым» и «современным», но серьёзно не проходит проверку AA и действительно трудночитаем для многих пользователей. Текст-заполнитель внутри полей форм часто имеет слишком низкий контраст, а поскольку он исчезает, как только вы начинаете печатать, дизайнеры часто не замечают, что это проблема. Текст, наложенный на фотографии или градиенты, рискован, поскольку коэффициент контрастности может проходить проверку в одной области изображения и не проходить в другой — добавление сплошной цветной подложки или тени текста за текстом является распространённым решением. Фирменные цвета, особенно пастельные или палитры со средней насыщенностью, часто не проходят требования по контрастности при использовании в качестве цвета текста и нуждаются в более тёмном или светлом варианте, зарезервированном специально для текста.
Как проверить собственные цвета
Выберите цвет переднего плана (текста) и цвет фона, затем проверьте полученное соотношение по обоим порогам, AA и AAA, для используемого размера текста. Если сочетание не проходит проверку, наиболее надёжным решением обычно является затемнение цвета текста (для светлых фонов) или его осветление (для тёмных фонов) до тех пор, пока он не пройдёт порог, а не изменение фона, поскольку цвет фона часто более тесно связан с фирменным стилем, чем цвет текста.