Алгоритмическая эвристика того, подходит ли белый текст для данного фона

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

Итак, учитывая определенный цвет фона, как алгоритм может определить, является ли белый текст плохим выбором для наложения (альтернативой может быть черный)? Например, белый текст на #F44444 отлично читается, но белый текст на #FBBBBB — это проблема!

Я предполагаю, что это будет связано с представлением цвета в такой модели, как HSL? А затем проверить, соответствуют ли насыщенность и/или яркость определенным условиям?

Вы используете HEX-нотацию и белый текст, что говорит о том, что вы не заинтересованы в печати. Кроме того, вы не упоминаете цветной текст. Будете ли вы использовать любое другое значение для текста, кроме белого или черного; темно-серый для некоторых эстетических соображений, скажем?
Да, это правильно, я думаю только в цифровом виде (при условии, что под «печатью» вы подразумеваете тип чернил и бумаги… Я не графический дизайнер, так что, возможно, это какая-то другая терминология, ха-ха). И хотя я имел в виду только белое и черное, я полагаю, что если бы это не добавляло слишком много дополнительной сложности, я мог бы подумать и о различных оттенках серого (хотя я все равно не имел в виду чистый черный — как и большинство «черных» текст, на самом деле он будет очень темно-серым).
Вы смотрели бесплатное программное обеспечение (Creative Commons) «Анализатор цветового контраста», которое можно найти на www.visionaustralia.org/digital-access-cca?
Почти все системы, используемые сегодня для просмотра веб-контента, предполагают кодировку sRGB.

Ответы (2)

Большая часть вашей работы уже сделана за вас, если не вся.

Консорциум World Wide Web (w3) публикует рекомендации по доступности веб-контента. Их рекомендации определяют три разных уровня соответствия цветового контраста в зависимости от размера и релевантности текста. Для этой цели предусмотрен анализатор цветового контраста.

Он рекомендует:
Контрастность (минимум): визуальное представление текста имеет коэффициент контрастности не менее 4,5:1, за исключением крупного текста (18pt.+) не менее 3:1.

коэффициент контрастности (с сайта w3.org/TR/WCAG20/#contrast-ratiodef)

(L1 + 0,05) / (L2 + 0,05), где

  • L1 — относительная яркость более светлого из цветов, а
  • L2 — относительная яркость более темного цвета.

относительная яркость (от w3.org/TR/WCAG20/#relativeluminancedef)

относительная яркость любой точки в цветовом пространстве, нормализованная до 0 для самого темного черного и 1 для самого светлого белого.

Примечание. Для цветового пространства sRGB относительная яркость цвета определяется как
L = 0,2126 * R + 0,7152 * G + 0,0722 * B,

где R, G и B определяются как:

  • если RsRGB <= 0,03928, то R = RsRGB/12,92, иначе R = ((RsRGB+0,055)/1,055) ^ 2,4

  • если GsRGB <= 0,03928, то G = GsRGB/12,92, иначе G = ((GsRGB+0,055)/1,055) ^ 2,4

  • если BsRGB <= 0,03928, то B = BsRGB/12,92, иначе B = ((BsRGB+0,055)/1,055) ^ 2,4

а RsRGB, GsRGB и BsRGB определяются как:

  • RsRGB = R8 бит/255

  • GsRGB = G8 бит/255

  • BsRGB = B8 бит/255

Символ "^" является оператором возведения в степень. (Формула взята из [sRGB] и [IEC-4WD]).

Рекомендации w3 определяют три уровня соответствия их рекомендациям. Приоритет 1, 2 и 3. Их алгоритмы цветового контраста 2.0 используют два из них — Приоритет 2 (AA) и Приоритет 3 (AAA). Необходимость достижения соответствия AAA зависит от вашей целевой аудитории. Подробнее об этом читайте на сайте w3. Для крупного текста (более 18 пунктов) коэффициент контрастности для AA составляет 3:1, а для AAA — 5:1. Для мелкого текста это 5:1 для АА и 7:1 для ААА.

Дополнительную информацию о доступности и соответствии можно найти в
Руководстве по доступности веб-контента 2.0.

Больше информации о контрасте (минимум); в частности, принципы понимания SC 1.4.3 Визуальное представление текста и изображений текста… можно найти:
Понимание SC 1.4.3

Мой подход состоял бы в том, чтобы сначала преобразовать цвет фона в его эквивалент в градациях серого. Если значение яркости (по шкале от 0 до 100%) «слишком близко» к белому, цвет текста должен измениться на черный. «Слишком близко» несколько субъективно, но я бы начал тестировать с яркостью 65%, чтобы вызвать переключение на черный текст. Белый текст должен быть разборчивым на цветном фоне с более темным преобразованным значением яркости. Удачи!

Алгоритмическая эвристика того, подходит ли белый текст для данного фона
СпросиСетьПолитика конфиденциальности1y, 0v