2010-04-12 12 views
5

Sto cercando un motivo per calcolare un colore di sfondo adatto e un colore per il testo che vada oltre le righe, ovviamente devo tenere conto della leggibilità e dell'accessibilità.Scelta dello sfondo adatto/colore di primo piano usando PHP

Avrei bisogno di scegliere i due colori dall'array, i colori sono memorizzati nelle loro rappresentazioni esadecimali.

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

Posso usare una libreria PHP come GD/imageMagick?

Qualche suggerimento (Si prega di notare che sto usando PHP)

risposta

2

Prima di tutto, penso che dovresti dare un'occhiata a questo eccellente post sul blog allo Particletree.

Detto questo, vorrei utilizzare il loro smarty_modifier_contrast function() e modificarlo un po 'per soddisfare le vostre esigenze specifiche, qualcosa di simile:

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)); 
} 

Così si avrebbe solo bisogno di utilizzare qualsiasi colore casuale per il background (non dimenticare di rilasciare il #!) e quindi passare tutti gli altri colori all'array, in questo caso ho usato un numero variabile di argomenti ma puoi modificarlo in modo che accetti un singolo matrice di colori: selezionerà automaticamente il colore più scuro o più chiaro a seconda dello $bgcolor e di fornire un buon sufficiente contrasto per migliorare la leggibilità:

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

di scegliere il $bgcolor, si può fare in modo casuale come ho detto prima di utilizzo di una seconda funzione per aiutarvi in ​​questo compito, come saturazione o luminanza , questo dipende davvero da cosa stai cercando.

0

Pausa ogni colore nelle sue componenti RGB, aggiungo 0x80 (o qualche altro valore simile, forse 0x66) a ciascuno, maschera per 0xFF, e trovare il valore più vicino sul tavolo.

+0

Si intende qualcosa come $ newRed = (($ rgb ['rosso'] + 0x80) * 0xFF); Dove $ rgb ['red'] è qualcosa come 163 – Lizard

+0

'& 0xff', in realtà. Ma si. –

1

La scelta di colori casuali di solito non è una buona idea per la leggibilità e l'accessibilità, quindi suggerirei di ripensare il tuo progetto. O almeno limitare il testo solo al nero o al bianco.

Se questa non è un'opzione, suggerirei di calcolare una "distanza" tra due colori che sarebbe approssimativamente uguale alla differenza visiva tra i colori e quindi anche in qualche modo correlata alla leggibilità.

Vorrei utilizzare distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)) e quindi escludere qualsiasi combinazione che non ha una distanza sufficientemente elevata. Questo dovrebbe garantire che ti ritrovi con un colore scuro su uno sfondo luminoso, o un colore brillante su uno sfondo scuro, che è praticamente un prerequisito per una buona leggibilità, e assicura che le persone daltoniche vedranno anche due tonalità chiaramente distinte. Le componenti cromatiche sono ponderate in modo diverso poiché hanno un impatto diverso sulla luminosità totale percepita.