Выбор подходящего цвета фона / переднего плана с помощью PHP - PullRequest
Новая
       24

Выбор подходящего цвета фона / переднего плана с помощью PHP

5 голосов
/ 13 апреля 2010

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

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

#CC9966
#996633
#FFCC99
#CCCC99
#000000
#333333
#666633
#663333
#CC9933
#FFCCCC

Я могу использовать библиотеку PHP, такую ​​как GD / imageMagick?

Любые предложения (обратите внимание, я использую PHP)

Ответы [ 3 ]

2 голосов
/ 13 апреля 2010

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

При этом я бы использовал их функцию smarty_modifier_contrast () и немного ее изменил бы для удовлетворения ваших конкретных потребностей, например: 

function color_contrast($bgcolor, $color1, $color2, $color3, ...)
{
    return (hexdec($bgcolor) > 0xffffff / 2) ? min(array_slice(func_get_args(), 1)) : max(array_slice(func_get_args(), 1));
}

Таким образом, вам просто нужно использовать любой случайный цвет для фона (, не забудьте сбросить #! ), а затем передать все остальные цвета на массив, в данном случае я использовал переменное количество аргументов, но вы можете изменить его так, чтобы он принимал один массив цветов - тогда он автоматически выберет самый темный или самый светлый цвет в зависимости от $bgcolor и предоставит хороший Достаточный контраст для читабельности: 

function color_contrast($bgcolor, $colors = array())
{
    return (hexdec($bgcolor) > 0xffffff / 2) ? min($colors) : max($colors);
}

Чтобы выбрать $bgcolor, вы можете сделать это случайным образом, как я уже говорил, использовать вторую функцию, чтобы помочь вам с этой задачей, например насыщенность или яркость , которая действительно зависит что вы ищете.

1 голос
/ 13 апреля 2010

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

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

Я бы использовал distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)), а затем отфильтровал бы любую комбинацию, которая не имеет достаточно большого расстояния. Это должно обеспечить получение темного цвета на ярком фоне или яркого цвета на темном фоне, что в значительной степени является обязательным условием хорошей читаемости, и гарантирует, что дальтоники также увидят два четко различимых оттенка. Цветовые компоненты имеют различный вес, поскольку они по-разному влияют на общую воспринимаемую яркость.

0 голосов
/ 13 апреля 2010

Разбейте каждый цвет на его компоненты RGB, добавьте 0x80 (или другое подобное значение, например 0x66) к каждому, замаскируйте на 0xff и найдите ближайшее значение в таблице.

...