Рассчитать ближайший цвет-слепой цвет?
Как я могу рассчитать цвет, наиболее подходящий для слепых, из цветового кода HEX, такого как # 0a87af, или из трех значений RGB (0-255).
Я ищу эффективный способ рассчитать или сделать это, чтобы я мог реализовать его на PHP или Python, и алгоритм может быть использован для лучшей доступности веб-сайта для людей, страдающих дальтонизмом.
Решение
Как упоминали другие в своих комментариях / ответах, контраст между двумя цветами будет иметь важное значение.
W3 уже создал метод, определяющий минимальный контраст между цветами, чтобы пройти различные уровни доступности.
Они предоставляют описание Вот и формула для его расчета находится на той же странице, внизу, Вот :
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
Для этой, по-видимому, простой формулы вам необходимо рассчитать относительную яркость, указанную L1 а также L2 обоих цветов, используя другую формулу, которую вы найдете Вот :
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
и RsRGB, GsRGB и BsRGB определяются как:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Минимальный коэффициент контрастности между текстом и фоном должен составлять 4,5: 1 для уровня AA и 7: 1 для уровня AAA. Это все еще оставляет место для создания хороших дизайнов.
Есть пример Реализация в JS Леа Веру.
Это не даст вам самый близкий цвет, как вы просили, потому что на уникальном фоне будет более одного переднего цвета, дающего одинаковый результат контрастности, но это стандартный способ вычисления контрастов.
Другие решения
Один цвет не является проблемой для дальтоников (если вы не хотите передать очень специфическое значение этого цветового тона); разница между цветами есть.
Учитывая два или более цветов, вы можете преобразовать их в HLS, используя colorsys и проверьте, достаточна ли разница в легкости. Если разница слишком мала, увеличьте ее следующим образом:
import colorsys
import re
def rgb2hex(r, g, b):
return '#%02x%02x%02x' % (r, g, b)def hex2rgb(hex_str):
m = re.match(
r'^\#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$', hex_str)
assert m
return (int(m.group(1), 16), int(m.group(2), 16), int(m.group(3), 16))def distinguish_hex(hex1, hex2, mindiff=50):
"""Make sure two colors (specified as hex codes) are sufficiently different.
Returns the two colors (possibly changed). mindiff is the minimal
difference in lightness.
"""
rgb1 = hex2rgb(hex1)
rgb2 = hex2rgb(hex2)
hls1 = colorsys.rgb_to_hls(*rgb1)
hls2 = colorsys.rgb_to_hls(*rgb2)
l1 = hls1[1]
l2 = hls2[1]
if abs(l1 - l2) >= mindiff: # ok already
return (hex1, hex2)
restdiff = abs(l1 - l2) - mindiff
if l1 >= l2:
l1 = min(255, l1 + restdiff / 2)
l2 = max(0, l1 - mindiff)
l1 = min(255, l2 + mindiff)
else:
l2 = min(255, l2 + restdiff / 2)
l1 = max(0, l2 - mindiff)
l2 = min(255, l1 + mindiff)
hsl1 = (hls1[0], l1, hls1[2])
hsl2 = (hls2[0], l2, hls2[2])
rgb1 = colorsys.hls_to_rgb(*hsl1)
rgb2 = colorsys.hls_to_rgb(*hsl2)
return (rgb2hex(*rgb1), rgb2hex(*rgb2))print(distinguish_hex('#ff0000', '#0000ff'))
Контраст-Finder это онлайн-инструмент с открытым исходным кодом (написанный Open-S и M. Faure), который, учитывая цвета переднего плана и фона, вычислит коэффициент контрастности и, если его недостаточно по формуле WCAG, даст вам набор фоновых ИЛИ цветов переднего плана с достаточный коэффициент контрастности и, следовательно, параметры, использующие различные алгоритмы (вы должны указать, хотите ли вы сохранить цвет переднего плана или цвет фона и хотите ли вы, чтобы коэффициент контрастности был выше 4,5: 1 или 3: 1 — уровень AA — или 7: 1 / 4.5: 1 — уровень ААА).
Это прекрасное место для многих пар цветов.
источники — в Java — есть на GitHub.
Примечание: как уже написано в других ответах, люди с дальтонизмом («люди с недостатком цвета») — это лишь часть людей, которых интересует выбор цветов: люди со слабым зрением тоже. И когда веб-дизайнер выбирает #AAA на #FFF, это проблема для многих людей без потери зрения или цветового восприятия; у них просто блестящий экран Retina® в неоптимальных условиях освещения …: p