2010-04-12 23 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)); 
} 

所以你只需要使用任何顏色隨機的背景(別忘了放棄#),然後將所有其他顏色傳遞給數組,在這種情況下,我使用了可變數量的參數,但是可以更改它以便它接受單個顏色陣列 - 它會自動選擇最暗或最亮的顏色,具體取決於$bgcolor並提供可讀性好足夠的對比度:

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

$bgcolor,你可以隨意做它像我使用第二功能,以幫助您完成此任務就像飽和亮度之前說 ,這真的取決於你在找什麼。

0

歇每種顏色到它的RGB分量,除以0xFF添加0x80的(或一些其他類似的價值,也許是0x66),以每,面具,並找到最接近的值在桌子裏。

+0

你的意思是類似於$ newRed =(($ rgb ['red'] + 0x80)* 0xFF);其中$ rgb ['red']實際上類似於163 – Lizard 2010-04-13 00:29:03

+0

'&0xff'。但是,是的。 – 2010-04-13 00:35:02

1

選擇隨機顏色通常不是可讀性和可訪問性的好主意,所以我建議你重新考慮你的設計。或者至少將文本限制爲只有黑色或白色。

如果這不是一個選項,那麼我會建議計算兩種顏色之間的「距離」,這大概等於顏色之間的視覺差異,因此也與可讀性有一定關係。我會使用distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)),然後過濾掉沒有足夠高距離的任何組合。這可以確保您在明亮的背景下獲得深色,或者在深色背景下獲得明亮的色彩,這對於提高可讀性來說非常重要,並且可以確保色盲人員也能夠看到兩個截然不同的色調。顏色分量加權不同,因爲它們對總體感知亮度有不同的影響。