2010-04-12 11 views
5

Estoy buscando una razón para calcular un color de fondo adecuado y un color para el texto que pasaría a la parte superior, obviamente, tengo que tener en cuenta la legibilidad y la accesibilidad.Elegir fondo/color de fondo adecuado usando PHP

Tendría que elegir los dos colores de la matriz, los colores se almacenan en sus representaciones hexadecimales.

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

¿Puedo usar una biblioteca PHP como GD/imageMagick?

Cualquier sugerencia (Tenga en cuenta que estoy usando PHP)

Respuesta

2

Antes que nada, creo que debería echar un vistazo a esta excelente publicación de blog en Particletree.

Dicho esto, me gustaría utilizar su smarty_modifier_contrast() y modificarlo un poco para hacer frente a sus necesidades específicas, algo así como:

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

Así que sólo se necesita utilizar cualquier color al azar para el fondo (no se olvide de soltar #!) y pase todos los demás colores a la matriz, en este caso he usado una cantidad variable de argumentos, pero puede cambiarlo para que acepte una sola matriz de colores: seleccionará automáticamente el color más oscuro o más claro según $bgcolor y proporcionar una buena suficiente contraste para facilitar la lectura:

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

para escoger el $bgcolor, puede hacerlo de forma aleatoria como he dicho antes del uso de una segunda función que le ayude con esta tarea como saturación o luminancia , eso realmente depende de lo que estás buscando.

0

vacaciones de cada color en sus componentes RGB, añadir 0x80 (o algún otro valor similar, tal vez 0x66) a cada uno, máscara de 0xff, y encontrar el valor más cercano en la mesa.

+0

¿Te refieres a algo como $ newRed = (($ rgb ['red'] + 0x80) * 0xFF); Donde $ rgb ['rojo'] es algo así como 163 – Lizard

+0

'& 0xff', en realidad. Pero si. –

1

Elegir colores aleatorios generalmente no es una buena idea para la legibilidad y la accesibilidad, por lo que le sugiero que reconsidere su diseño. O al menos, limite el texto a solo negro o blanco.

Si eso no es una opción, entonces sugiero calcular una "distancia" entre dos colores que sería aproximadamente igual a la diferencia visual entre los colores, y por lo tanto también algo relacionado con la legibilidad.

Yo usaría distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)), y luego filtraría cualquier combinación que no tenga una distancia suficientemente alta. Esto debería garantizar que termines con un color oscuro sobre un fondo brillante o un color brillante sobre un fondo oscuro, que es prácticamente un requisito previo para una buena legibilidad, y garantiza que las personas daltónicas también vean dos tonos claramente distintos. Los componentes de color se ponderan de forma diferente ya que tienen un impacto diferente en el brillo total percibido.

Cuestiones relacionadas