2010-04-12 3 views
5

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

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

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

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

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

ответ

2

Прежде всего, я думаю, вам стоит взглянуть на этот отличный пост в блоге по адресу 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)); 
} 

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

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

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

0

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

+0

Вы имеете в виду что-то вроде $ newRed = (($ rgb ['red'] + 0x80) * 0xFF); Где $ rgb ['red'] - это что-то вроде 163 – Lizard

+0

'& 0xff'. Но да. –

1

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

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

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

Смежные вопросы