Проверка контрастности цветов

Как это работает

Светло-серый текст на белом — самая распространённая проблема доступности в вебе, и её полностью можно избежать. Руководства по доступности определяют контрастность как точное соотношение, поэтому подходит ли сочетание цветов — вопрос арифметики, а не мнения.

Как рассчитывается коэффициент

Относительная яркость каждого цвета вычисляется так, как предписывают руководства, — с гамма-коррекцией по каждому каналу, — а коэффициент берётся между более светлым и более тёмным. Результат совпадает с тем, что покажет аудит доступности, потому что формула та же.

Пороговые значения

Обычному тексту нужно 4,5:1 для AA и 7:1 для AAA. Крупному тексту — примерно 24px, или 18,7px, если он полужирный, — нужно только 3:1 для AA и 4,5:1 для AAA. Элементам интерфейса и значимой графике нужно 3:1. AA — это то, что требует большинство организаций и большинство законодательств.

Почему для крупного текста требования мягче

У более крупных букв каждый штрих состоит из большего числа пикселей, поэтому они остаются читаемыми при меньшей контрастности. Поэтому заголовок может быть светлее серым, чем основной текст.

Чего коэффициент не учитывает

Он ничего не говорит о цветовой слепоте — это отдельная проверка, — и о том, достаточно ли крупен текст и разборчив ли шрифт. Пройденный порог — это нижняя планка, а не доказательство читаемого дизайна.