Encuentra el color más legible del texto que se dibuja en una superficie coloreada

Question

No estoy seguro de cómo preguntar esto, pero aquí va.

Dibujo un rectángulo lleno de color en la pantalla. El color está en forma de R, G, B

Entonces quiero dibujar texto sobre el rectángulo, sin embargo, el color del texto debe ser tal que proporcione el mejor contraste, lo que significa que es legible.

Ejemplo:

Si dibujo un rectángulo negro, el color obvio para el texto sería blanco.

Lo que intenté ahora es esto. Paso esta función al color del rectángulo y devuelve un color invertido que luego uso para mi texto.

Funciona, pero no es la mejor manera.

¿Alguna sugerencia?

// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
    int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));

    return Color.FromArgb(greyscale, greyscale, greyscale);
}

Answer 1

Un enfoque simple que garantiza un color significativamente diferente es alternar el bit superior de cada componente del triple RGB.

Color inverse(Color c)
{
    return new Color(c.R ^ 0x80, c.G ^ 0x80, c.B ^ 0x80);
}

Si el color original era # 1AF283, el '' inverso '' será el # 9A7203.

El contraste será significativo. No garantizo la estética.

Actualización, 2009/4/3: Experimenté con este y otros esquemas. Resultados en mi blog .

Answer 2

El color más legible será blanco o negro. El color más "relajante" será algo que no sea blanco ni negro, será un color que contraste ligeramente el color de fondo. No hay forma de hacer esto programáticamente porque es subjetivo. No encontrará el color más legible para todos porque todos ven las cosas de manera diferente.

Answer 3

Algunos consejos sobre el color, particularmente en relación con la yuxtaposición de primer plano y fondo, como con el texto.

El ojo humano es esencialmente una lente simple y, por lo tanto, solo puede enfocarse efectivamente en un color a la vez. Las lentes utilizadas en la mayoría de las cámaras modernas resuelven este problema al usar múltiples lentes de diferentes índices de refracción (lentes cromáticas) para que todos los colores estén enfocados al mismo tiempo, pero el ojo humano no está tan avanzado.

Por esa razón, sus usuarios solo deberían centrarse en un color a la vez para leer el texto. Esto significa que el primer plano está en color o el fondo, pero nunca ambos. Esto lleva a una condición típicamente llamada vibración, en la cual el ojo cambia rápidamente el enfoque entre los colores del primer plano y el fondo, tratando de resolver la forma, pero nunca se resuelve, la forma nunca está enfocada y provoca fatiga visual.

Answer 4

Su función no funcionará si la suministra con RGB (127,127,127), porque devolverá exactamente el mismo color. (modificar su función para que devuelva blanco o negro mejoraría ligeramente las cosas)

La mejor manera de tener siempre las cosas legibles es tener texto blanco con negro alrededor, o al revés.

A menudo se logra dibujando primero texto negro en (x-1, y-1), (x + 1, y-1), (x + 1, y-1), (x + 1, x + 1 ), y luego texto blanco en (x, y).

Alternativamente, primero puede dibujar un bloque negro semitransparente y luego un texto blanco no transparente sobre él. Eso asegura que siempre habrá una cierta cantidad de contraste entre su fondo y su texto.

Answer 5

¿por qué gris? ya sea negro o blanco sería lo mejor. blanco sobre colores oscuros, negro sobre colores claros. solo vea si la luminancia está por encima de un umbral y elija uno u otro

(por cierto, no necesita las etiquetas .net, c # o asp.net)

Answer 6

Necesitas estudiar algo de teoría del color. Un programa llamado "Color Wheel Pro" es divertido jugar y te dará una idea general.

Esencialmente, está buscando colores complementarios para un color determinado.

Dicho esto, creo que encontrará que, si bien la teoría del color ayuda, aún necesita un ojo humano para afinar.