Seleccionar automáticamente un color de primer plano basado en un color de fondo

Respondí una pregunta similar en Game Development Stack Exchange hace un tiempo, así que permítanme resumir las respuestas allí.

Tu idea de elegir entre blanco o negro, dependiendo de cuál contraste mejor con el color de fondo, es acertada. Sin embargo, el simple hecho de promediar los componentes RGB no dará una buena indicación de qué tan claro aparecerá un color en particular para el ojo humano, (principalmente) por dos razones:

En primer lugar, por razones relacionadas con la percepción humana del color, los canales rojo, verde y azul no tienen la misma luminancia relativa ; de hecho, el azul puro ( #0000ff) tiene solo un 10 % de brillo (y el rojo puro solo un 30 % de brillo) que el verde puro ( #00ff00). Por lo tanto, por ejemplo, el texto negro sobre azul puro nunca tendrá un contraste particularmente bueno.

Por ejemplo, las siguientes imágenes muestran ejemplos de texto en blanco y negro sobre fondos rojos, verdes y azules puros ( #ff0000, #00ff00y #0000ff):

Puede ver claramente las diferencias de contraste, aunque todos estos colores tienen el mismo valor RGB promedio.

La otra complicación es que los espacios de color RGB que normalmente se usan en las pantallas de las computadoras (como sRGB ) no son lineales, sino que tienen una gamma de visualización de aproximadamente 2. Eso significa que, por ejemplo, el color RGB #7f7f7f= "50 % gris" en realidad no parece la mitad de brillante que el blanco puro ( #ffffff), sino que solo tiene un 25 % de brillo, mientras que el color que en realidad tiene una luminosidad relativa a mitad de camino entre el blanco y el negro es en realidad más cerca de "75% gris" ( #bfbfbf).

Sin embargo, convenientemente, el ojo humano tampoco es lineal y es más sensible a las diferencias en los tonos más oscuros. De hecho, para los tonos de gris, las no linealidades se anulan aproximadamente, de modo que el gris RGB al 50 % ( #7f7f7f) todavía está perceptiblemente a la misma distancia del blanco y el negro. Como demostración, aquí hay texto en blanco y negro sobre fondos grises al 25 %, 50 % y 75 % ( #3f3f3f, #7f7f7fy #bfbfbf):

Sin embargo, para calcular con precisión la luminosidad de un color RGB arbitrario, debemos tener en cuenta la gamma de la pantalla, ya que son los valores de luminosidad lineal los que deben promediarse.

Para ponerlo todo junto, para determinar si el texto en blanco o negro tendría mejor contraste en un fondo, necesita:

1. convertir los valores de color RGB comprimidos con gamma en RGB lineal,
2. tomar un promedio ponderado de los componentes lineales R, G y B, y
3. compare el promedio resultante con un umbral adecuado.

El valor de umbral que da mejores resultados puede determinarse experimentalmente, pero generalmente se esperaría que esté cerca de la luminancia del 50 % de gris RGB. En cualquier caso, vale la pena señalar que el contraste percibido variará según la configuración de visualización del espectador y las condiciones de visualización, por lo que no existe un único valor óptimo para todos, sino una gama bastante amplia de opciones más o menos igualmente buenas.

Si solo desea una fórmula simple para conectar números, intente esto:

• si 0.2126 × R ^γ + 0.7152 × G ^γ + 0.0722 × B ^γ > 0.5 ^γ , elija negro; si no elige blanco,

donde γ es el valor gamma de visualización aproximado ( γ = 2,2 es típico).

Para una aproximación aún más simple, puede ignorar la corrección gamma (es decir, asumir efectivamente que γ = 1) y simplemente usar la condición 0.2126 × R + 0.7152 × G + 0.0722 × B > 0.5. Para los tonos de gris, esto no supondrá ninguna diferencia (ya que estamos aplicando la misma gamma a ambos lados de la desigualdad), pero sobrestima un poco la luminancia de los colores saturados. Afortunadamente, en tales colores, tanto el blanco como el negro tienden a tener un contraste decente de todos modos, por lo que el error puede no importar mucho en la práctica.

Finalmente, tenga en cuenta que, si el color de fondo no es uniforme, es posible que ningún color de texto se vea bien. En tales casos, puede considerar, por ejemplo, usar texto negro con un contorno blanco, o viceversa, o quizás rodear el texto con un cuadro semitransparente del color opuesto.

Cada color tiene tres variables; tono, saturación y brillo.

La clave para la legibilidad es el contraste, que se puede optimizar para cada una de las tres variables independientes entre sí.

Por ejemplo; el contraste de tono se puede optimizar encontrando su complemento. El contraste de saturación se puede optimizar eligiendo opuestos para cada fondo. Del mismo modo, brillante puede contrastarse con tenue.

Esto (los criterios anteriores) se refiere a una sola fórmula de selección: legibilidad óptima.

Puede haber otras consideraciones; estéticas, perceptivas, técnicas, etc.

Un medio práctico de proporcionar esta capacidad ha sido utilizar un resultado predeterminado, predecible y aceptable mediante el uso de una tabla de búsqueda de colores que proporciona un conjunto dado uno de los dos. Por ejemplo; dado el primer plano de X, se proporciona un fondo de Y. Dado un primer plano de Y, se proporciona un fondo de X. El CLUT puede ser tan complejo o completo como se desee para la aplicación en particular.

Una vez que se conocen los valores, se puede automatizar su selección.