user-interface - studio - programacion android pdf 2018

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

Creo que la 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 2

Estás mejor con una gran diferencia en luminosidad. En general, los fondos coloreados con texto coloreado chupan para facilitar la lectura, lastimando los ojos con el tiempo. Colores ligeramente teñidos (p. Ej. En HSB, S ~ 10%, B> 90%) con texto negro que funciona 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ás alejando a los usuarios de baja visibilidad, incluidos los mayores de 35 ...

Answer 3

Generalmente miro los complementos de color, también tienen ruedas de complemento de color para ayudar

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

Si su color es HSL, voltee el tono 180 grados para un cálculo decente

Answer 4

He estado buscando una respuesta simailr y encontré esta publicación y algunas otras que pensé que compartiría. Según 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/ Te permite ajustar casi todo tipo de escalas de color (RGB, CMYK, etc.) al mismo tiempo y luego te muestra el resultado en la pantalla, como texto blanco sobre fondo amarillo.

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 a HSB primero).

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

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

Answer 6

No soy un 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ías tus valores RGB y si están más cerca de 0 (oscuro) los presionarías cada uno en una cantidad igual para tu color de primer plano, o viceversa si es un BG claro.

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

Answer 7

Para una 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 el negro o el 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 saber el brillo del fondo. Esto se vuelve un poco más complicado, debido a dos factores:

• El brillo percibido de las primarias individuales rojo, verde y azul no son idénticas. 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 8

Sobre la base de la respuesta de Mark, aquí hay un código de Ruby que hará 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 9

Aproveche un esquema para la legibilidad

Si por "buen color de texto (primer plano)" lo intenta con fines de legibilidad cuando el usuario elige any background colour , siempre puede producir texto blanco con 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 coincide con su intención, creo que vale la pena publicarlo aquí porque vine en busca de soluciones similares.