¿Cómo calcular el mejor color de tipo para un color de fondo aleatorio?

8

Es posible que necesite presentar contenido en múltiples niveles dependiendo de la distancia del observador a una pantalla. Digamos que desde lejos el usuario percibe un color plano, pero desde una distancia cercana el usuario necesita poder leer algo de texto. La parte difícil es que se da el color de fondo plano / puede cambiar / No tengo control sobre.

Hasta ahora, he creado un prototipo realmente básico para calcular el color del texto a partir del color de fondo (haga clic para elegir un fondo aleatorio). Este es un enfoque muy trivial: tomo el tono y lo compenso en 90 grados (por lo que es lo suficientemente diferente) e invierto el brillo en el espacio de color HSB para obtener un color lo suficientemente diferente como para ser legible / tener un contraste decente con el fondo .

Esto a veces funciona:

bueno 1 bueno 2 bueno 3

a veces no:

malo 1 malo 2 malo 3

¿Es este enfoque bueno / en la buena dirección? Si es así, ¿cómo puedo mejorar esto? Si no, ¿qué dirección debo seguir?

Desafortunadamente, no sé mucho sobre la teoría del tipo y el color, por lo que cualquier sugerencia / consejo de personas con experiencia es muy útil. Esto se mostrará en una pantalla, no se imprimirá.

¿Qué relaciones entre los colores de fondo y de primer plano estoy buscando?

typography color-theory contrast George Profenza
fuente

Respuestas:

7

La legibilidad tiene que ver con el contraste. Intentaría determinar qué tan oscuro es cada color de fondo en escala de grises, y si está por encima de un 50% de gris (más oscuro que claro), use texto blanco, debajo del 50% use texto negro. Esto asegurará que tenga al menos un 50% de contraste (diferencia de tono) para que su texto sea legible.

Este método es mucho más fácil que intentar jugar con colores complementarios o invertir y garantiza el máximo contraste tonal en cualquier color.

Juan
fuente
genial, voy a
intentar
Bastante simple y bastante efectivo. He jugado con algunas opciones y el umbral de brillo funciona muy bien, como puedes ver en el boceto actualizado . Las instrucciones están en los comentarios a la izquierda. Si tengo tiempo, podría intentar jugar con diferentes espacios de color (como convertir a L a b * y jugar con los componentes), pero por ahora esto hace el trabajo agradable y simple.
George Profenza
3

Aquí mi respuesta anterior a esencialmente la misma pregunta en Game Development Stack Exchange.

Para resumir, como sugieren las otras respuestas aquí, generalmente debe usar blanco o negro , dependiendo de cuál contrasta mejor con el fondo. (Por supuesto, si lo desea, dar a cualquiera de los colores un ligero tinte no afectará mucho el contraste).

Tenga en cuenta que, para determinar correctamente qué tan oscuro o claro aparece un color para el usuario, no es suficiente promediar los valores de color RGB (o tomar la claridad / valor de un color HSL / HSV). Por el contrario, debe tener en cuenta (al menos) dos efectos:

  1. no linealidad del dispositivo en el que se muestra el color , que (al menos para los colores RGB en las pantallas de las computadoras) tiende a oscurecer los medios tonos, y

  2. sensibilidad espectral del ojo humano , que, en términos generales, hace que el color cerca del medio del espectro visible (verde, amarillo, cian) parezca más brillante que aquellos cerca de los bordes (azul, rojo, púrpura).

El primer problema puede explicarse por la expansión gamma , mientras que el segundo simplemente requiere una ponderación no uniforme de los canales de color R / G / B. En conjunto, aquí se explica cómo calcular aproximadamente el brillo percibido de un color RGB y decidir si el negro o el blanco contrastarán mejor con él:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Eso es asumiendo eso R, Gy Bson números de punto flotante entre 0.0 a 1.0. Si tiene, por ejemplo, enteros de 0 a 255, conviértalos en flotantes y divídalos por 255.

Las constantes en el código anterior son (aproximadamente) correctas para la entrada sRGB ; puede ajustarlos si está trabajando en otro espacio de color, aunque los valores exactos realmente no importan demasiado: para colores suficientemente oscuros o claros, la respuesta será la misma de todos modos, mientras que los colores que caen cerca de la línea de borde contrastarán casi igual de bien con blanco o negro de todos modos.

Ilmari Karonen
fuente
Estaba considerando convertir de RGB a CIE XYZ o L a b *. Podría ofrecer ambas opciones al final. Buena respuesta (+1)
George Profenza
2

Estoy de acuerdo con John, mantenga el texto todo lo posible en blanco y negro solo para estar seguro, puede agregar una pequeña cantidad de saturación al texto también y estará seguro. Aquí hay una pequeña prueba:

ingrese la descripción de la imagen aquí

Ver al 100% aquí: http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Descargue el archivo .ai (fuente) aquí para jugar: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai

Flavio Frantz
fuente
Observe cómo, en sus ejemplos, el texto negro se ve bien en la mayoría de los colores de 100% de brillo / saturación, pero realmente malo en el azul. Esto se debe a que el 100% de azul solo tiene aproximadamente una décima parte del brillo percibido de, digamos, 100% de verde, que es algo a tener en cuenta al elegir el color del texto. (Vea mi respuesta para más detalles.) Básicamente, nunca querrá usar texto negro sobre un fondo azul saturado.
Ilmari Karonen