Учитывая белый фон и черный или серый текст, есть ли формула для поиска цвета ссылки с хорошим контрастом?

Рекомендации WCAG устанавливают следующие требования к контрасту текста/ссылок/фона:

  • Контраст 4,5:1 между цветом текста, не связанного со ссылкой, и фоном.
  • Контраст 4,5:1 между цветом текста ссылки и фоном.
  • Контраст 3:1 между цветом текста ссылки и цветом окружающего текста, не связанного со ссылкой.

Предполагая, что требование 1 из вышеперечисленного выполнено, при наличии белого фона и заданного цвета текста (не связанного со ссылкой) в диапазоне от черного до темно-серого, существует ли эвристика, формула или алгоритм для поиска цвета ссылки, который удовлетворял бы два других требования? Было бы особенно полезно, если бы алгоритм или формула были указаны с точки зрения цветового тона-яркости-насыщенности. Спасибо.

Ответы (1)

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

Я бы начал с выбора цветов, которые вам нравятся, а затем проверил их в программе проверки, чтобы убедиться, что они удовлетворяют требованиям.

Если вам нужна хорошая отправная точка для выбора цветов, взгляните на цветовой круг.

Цветовое колесо

Цвета на противоположных сторонах колеса имеют большой контраст, а цвета, расположенные рядом друг с другом, имеют небольшой контраст.

Я также рекомендую попробовать инструмент цветовой палитры Adobe. Я использую его почти для каждого проекта, над которым работаю, обычно просто для того, чтобы посмотреть, насколько мне нравятся все мои основные цвета вместе. Вы можете позволить Adobe выбрать цвета для вас с такими настройками, как «триада» или «дополнительно», или вы можете создавать собственные темы.

Спасибо, Эшли. Я знаком с инструментами, но я специально ищу формальную математическую спецификацию (или что-то близкое к ней, в форме эвристики), потому что мне нужно иметь возможность генерировать цвет с адекватным контрастом, учитывая BG и цвет текста. Я подробнее рассмотрю понятие цветов на противоположных сторонах колеса, поскольку это то, что можно довольно легко использовать из значений HSL.