Если цвета доступны, будет ли доступен градиент между этими цветами?

Question

Я работаю на сайтах, где доступность абсолютно необходима, мы стремимся, по крайней мере, к стандарту AA. Обычно мы используем такие ресурсы, как https://contrast-ratio.com и https://contrastchecker.com, чтобы проверить цвет фона на фоне черного или белого текста.

В этом случае давайте возьмем белый (# fff) текст размером 18px. Цвет один: # 546FAF имеет соотношение 4,92. Цвет два: # B349B1 имеет отношение 4,66

Если бы я сделал линейный градиент между этими двумя цветами в качестве фона, был бы текст #fff на 18px разумным для обеспечения доступности ? Я пробовал подбирать цвета рядом с текстом, который выглядит близко, но надеюсь, что во время этого градиента это простой ответ, он никогда не будет go ниже коэффициента 4,5.

Спасибо!

Answer 1

Да, вы будете в безопасности, если оба ваших цвета пройдут тесты коэффициента контрастности, но при этом предполагается, что белый цвет на более темном градиентном фоне (как вы указали), для темных цветов на градиентном фоне верно обратное.

Градиенты двух равных (или почти равных) значений яркости при объединении имеют тенденцию к получению слегка меньшего значения яркости в середине.

Контраст между двумя цветами основан на яркости с использованием следующая формула: -

(L1 + 0.05) / (L2 + 0.05)

, где L1 - относительная яркость светлее цветов,

и L2 - относительная яркость темных цветов.

Таким образом, поскольку градиенты имеют тенденцию становиться темнее в середине на двух одинаковых значениях яркости, вы можете видеть, что коэффициент контрастности будет увеличиваться в середине (L2 уменьшается как оно становится ближе к черному, L1 не изменится). По этой причине весь спектр цветов будет выше порогового значения с наибольшим контрастом, стремящимся к центру.

Однако если вы используете темный цвет в качестве цвета переднего плана, то когда градиент темнеет в середине, коэффициент контрастности уменьшится (L2 не изменится, L1 уменьшится).

Answer 2

Ваш текст тоже полужирный? В таком случае требование минимальной цветовой контрастности будет изменено на 3: 1, поскольку текст будет большим текстом (18px + жирный).

Согласно Webaim, «Большой текст определяется как 14 точек (обычно 18,66 пикселей) и жирным шрифтом или больше, или 18 пунктов (обычно 24 пикселей) или больше».

Я знаю, что вы осведомлен о контролере контраста, но я хочу напомнить, что инструмент может фактически сказать вам, доступен ли контраст на этом градиентном фоне, если вы протестируете свой контент на этом градиенте, используя понимание доступности для веб от Microsoft. Функция Fastpass сообщит вам об этом в считанные секунды.

Наконец, цель руководства - сделать его доступным для всех, поэтому, несмотря на то, что, несмотря на цифры и пороговые значения, трудно читать, настройте его на более высокий коэффициент контрастности, чтобы он был легко читаемым. Например, большинство дизайнов на сайте csszengarden.com доступны в соответствии с этими автоматизированными инструментами, но на практике это не совсем доступно.