Buen color de primer plano de texto para un color de fondo dado

Question

Estoy dibujando un botón de selección de color y estoy buscando una fórmula agradable y simple para obtener un buen color de texto (primer plano) para un color de fondo dado en RGB.

Un simple intento sería simplemente tomar el color del complemento, pero esto producirá un botón de aspecto extraño para colores como el azul puro o el rojo puro.
¿Hay algo bien conocido que haga esto?

Si es importante, estoy usando QT.

Answer 1

Para obtener la máxima legibilidad, desea el máximo contraste de brillo sin entrar en tonalidades que no funcionan juntas. La forma más consistente de hacer esto es seguir con negro o blanco para el color del texto.Es posible que pueda idear esquemas más estéticamente agradables, pero ninguno de ellos será más legible.

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

• El brillo percibido de los primarios rojo individual, verde y azul no son idénticos. El consejo más rápido que puedo dar es usar la fórmula tradicional para convertir RGB a gris: R * 0.299 + G * 0.587 + B * 0.114. Hay muchas otras fórmulas.

• La curva de gamma aplicada a las pantallas hace que el valor de gris medio sea más alto de lo que cabría esperar. Esto se resuelve fácilmente usando 186 como el valor medio en lugar de 128. Cualquier cosa menor a 186 debe usar texto blanco, cualquier cosa mayor a 186 debe usar texto negro.

Answer 2

No soy experto en programar cosas relacionadas con RGB, pero desde la perspectiva de un diseñador, a menudo el color más legible será mucho más claro (si el color de fondo es oscuro) o más oscuro (si el color de fondo es claro) versión del mismo tono.

Básicamente tomaría sus valores RGB y si están más cerca de 0 (oscuro) los empujaría cada uno en una cantidad igual para su color de primer plano, o viceversa si es un BG ligero.

Los colores de complemento pueden ser muy dolorosos para la lectura.

Answer 3

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

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 4

me lo esa conversión a HSV podría ser el camino, pero el cambio de matiz de IMO se vería extraño. Trataría de mantener el tono y jugar con el valor y tal vez la saturación (botones rojos claros con texto rojo oscuro ... hm suena aterrador :-)).

Answer 5

Las combinaciones de colores a menudo se ven terribles cuando no se eligen cuidadosamente. ¿Por qué no usar el texto en blanco o negro, dependiendo del brillo del color? (Necesitará convertir primero a HSB.)

O deje que el usuario elija texto en blanco y negro.

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

Answer 6

Le va mejor con una gran diferencia de luminosidad. En general, los fondos coloreados con texto coloreado chupan para facilitar la lectura, lastimando los ojos con el tiempo. Los colores ligeramente teñidos (por ejemplo, HSB, S ~ 10%, B> 90%) con texto negro funcionan bien o texto ligeramente teñido sobre un fondo negro. Me mantendría alejado de colorear ambos. El texto oscuro (b ~ 30%, s> 50%) con una coloración sutil sobre un fondo blanco también puede estar bien. El texto amarillo (ámbar) sobre un fondo azul profundo tiene una legibilidad excelente, al igual que el ámbar o el verde sobre negro. Esta es la razón por la cual los viejos dumbterms (vt100, vt52, etc.) fueron para estos colores.

Si realmente necesita color-on-color para el 'look', puede invertir tanto H como B, mientras fija la saturación en un nivel moderado a bajo.

Y una última nota: si tiene un fondo gris del 50%, vuelva a pensar su interfaz. ¡Te estás robando la mitad de tu rango dinámico! Está alejando a los usuarios de poca visibilidad, incluidos los mayores de 35 años ...

Answer 7

apalancamiento un esquema para la legibilidad

Si por "buen texto de color (en primer plano)" tiene la intención para legibilidad propósitos cuando el usuario elige any background colour, siempre se puede producir texto blanco teniendo un contorno negro. Será legible en cualquier fondo sólido, modelado o degradado, del negro al blanco y cualquier elemento intermedio.

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

Answer 8

He estado buscando una respuesta simailr y encontré esta publicación y algunas otras que pensé que compartiría. De acuerdo con http://juicystudio.com/services/luminositycontrastratio.php#specify, el "Criterio de Conformidad 1.4.3 de WCAG 2.0 requiere la presentación visual de texto e imágenes de texto con una relación de contraste de al menos 4.5: 1" con algunas excepciones. Ese sitio le permite poner colores de primer plano y fondo para calcular su contraste, aunque sería útil si sugiriera alternativas o rangos.

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

Answer 9

Basándose en la cima de la respuesta de la marca, esto es algo de 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"