Buen color del texto para un determinado color de fondo

Question

Estoy dibujando un botón de selección de color y estoy buscando una fórmula sencilla y agradable para conseguir un buen color del texto (en primer plano) para un determinado color de fondo en el modo RGB.

Una simple prueba sería la de simplemente tomar el color del complemento, pero esto producirá un botón de aspecto raro de colores como el rojo puro azul o puro.
¿Hay algo bien conocido que hace esto?

Si se importa en absoluto, estoy usando QT.

Answer 1

Para obtener la máxima legibilidad, que quieren el máximo contraste de brillo sin entrar en matices que no funcionan juntos. La forma más consistente para hacer esto es seguir con negro o blanco para el color del texto. Usted podría ser capaz de llegar a más esquemas estéticamente agradables, pero ninguno de ellos va a ser más legible.

Para elegir entre negro o blanco, lo que necesita saber el brillo del fondo. Esto se vuelve un poco más complicado, debido a dos factores:

• El brillo percibido de las primarias individuales de color rojo, verde y azul no son idénticos. El consejo que puedo dar más rápida es utilizar la fórmula tradicional para convertir RGB a gris - R * 0,299 + 0,587 + G * B * 0,114. Hay un montón de otras fórmulas.

• La curva gamma aplicada a las pantallas hace que el valor del gris medio mayor de lo que cabría esperar. Esto se resuelve fácilmente mediante el uso de 186 como valor medio en lugar de 128. Cualquier cosa menos que 186 deben utilizar texto en blanco, algo mayor que 186 debe utilizar el texto negro.

Answer 2

No soy un experto en cosas de programación relacionados con RGB, pero desde la perspectiva de un diseñador, a menudo el color más legible será sólo una mucho más ligera (si el color de fondo es oscuro) o más oscuro (si el color de fondo es la luz) versión de la misma tonalidad.

Básicamente que tomaría los valores de RGB y si están más cerca de 0 (oscuro) que le empuja a cada uno por una cantidad igual para su color de primer plano, o viceversa si se trata de una luz BG.

Los colores del complemento en realidad puede ser muy doloroso para los ojos para facilitar la lectura.

Answer 3

Aproveche un esquema para la legibilidad

Si por "buen color de texto (en primer plano)" tiene la intención por legibilidad los propósitos cuando el usuario elige any background colour, siempre se puede producir un texto blanco que tiene un contorno negro. Será legible en cualquier fondo sólido, modelado o de gradiente, desde negro a través de blanco y cualquier otra cosa.

Aunque esto no alcanzó la marca de su intención, creo que valga la pena publicado aquí porque vine en busca de soluciones similares.

Answer 4

Basándose en la cima de la respuesta de Marcos, aquí hay un código Ruby que va a hacer el trabajo

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

Answer 5

Usted es mejor con una alta diferencia en luminosidad. En general, los fondos de color con el texto en color chupan para facilitar la lectura, perjudicando a los ojos a través del tiempo. La ligera colores tintados (por ejemplo, en HSB, S ~ 10%, B> 90%) con negro fino trabajo de texto o de texto ligeramente teñido sobre un fondo negro. Yo me alejaría de la coloración de ambos. Texto oscuro (b ~ 30%, s> 50%) con una coloración sutil sobre un fondo blanco también puede estar bien. Amarillo (ámbar) texto sobre un fondo azul profundo tiene una legibilidad excelente, al igual que en ámbar o verde en negro. Esta es la razón por dumbterms de edad (VT100, VT52, etc.) fueron para estos colores.

Si realmente tiene que hacer el color-a-color para el 'aspecto', se podía revertir ambos H y B, mientras que la fijación de saturación en un moderado a bajo nivel.

Y una última nota: si usted tiene un fondo gris 50%, reconsiderar su interfaz. Usted está robando a ti mismo de la mitad de su rango dinámico! Estás alienar a los usuarios de baja visibilidad, incluyendo cualquier persona mayor de 35 ...

Answer 6

Las combinaciones de colores a menudo se ven muy mal cuando no son cuidadosamente elegido. ¿Por qué no usar ya sea blanco o negro para el texto, en función de la luminosidad del color. (Tendrá que convertir a HSB primero.)

O dejar que el usuario elija ya sea de texto negro o blanco.

O utilizar combinaciones predefinidas. Esto es lo que hace Google en su producto calendario.

Answer 7

He estado buscando una respuesta simailr y me encontré con este post y algunos otros que pensé que me gustaría compartir. De acuerdo con http://juicystudio.com/services/luminositycontrastratio.php#specify la " Criterio 1.4.3 de las WCAG 2.0 requiere la presentación visual del texto y las imágenes de texto tiene una relación de contraste de al menos 4,5: 1" con algunas excepciones. Ese sitio le permite poner en primer plano y colores de fondo para calcular su contraste, aunque sería muy útil si sería sugerir alternativas o rangos.

Uno de los mejores sitios que he encontrado para la visualización de contraste de color es http://colorizer.org/ Se le permite ajustar casi todo tipo de escalas de color (RGB, CMYK, etc.) al mismo tiempo y luego se muestra el resultado en la pantalla, tales como texto blanco sobre un fondo amarillo.

Answer 8

Por lo general miro complementos de color, también tienen ruedas del complemento de color para ayudar

http://www.makart.com/resources/artclass/cwheel.html

Si su color es HSL, darle la vuelta al Hue de 180 grados para un cálculo decente

Answer 9

Lo que que la conversión de VHS podría ser cierto, pero cambiando la tonalidad de la OMI se vería raro. Me gustaría probar manteniendo el tono y jugando con valor y tal vez la saturación (botones rojos de luz con texto de color rojo oscuro ... hm suena :-) miedo).