Quiero mostrar algunas imágenes como este ejemplo.
El color de relleno se decide mediante un campo en la base de datos con el color en hexadecimal (ej .: ClassX -> Color: # 66FFFF). Ahora, quiero mostrar datos sobre un relleno con el color seleccionado (como en la imagen de arriba) pero necesito saber si el color es oscuro o claro, así que sé si las palabras deben estar en blanco o negro. ¿Hay alguna manera? tks
Respuestas:
Sobre la base de mi respuesta a una pregunta similar .
Debe dividir el código hexadecimal en 3 partes para obtener las intensidades individuales de rojo, verde y azul. Cada 2 dígitos del código representan un valor en notación hexadecimal (base-16). No entraré en los detalles de la conversión aquí, son fáciles de buscar.
Una vez que tenga las intensidades para los colores individuales, puede determinar la intensidad general del color y elegir el texto correspondiente.
El umbral de 186 se basa en la teoría, pero se puede ajustar al gusto. Según los comentarios a continuación, un umbral de 150 puede funcionar mejor para usted.
Editar: lo anterior es simple y funciona razonablemente bien, y parece tener buena aceptación aquí en StackOverflow. Sin embargo, uno de los comentarios a continuación muestra que puede dar lugar al incumplimiento de las directrices del W3C en algunas circunstancias. Con esto obtengo una forma modificada que siempre elige el mayor contraste basado en las pautas. Si no necesita cumplir con las reglas del W3C, me quedaría con la fórmula más simple anterior.
La fórmula dada para el contraste en las Recomendaciones del W3C es
(L1 + 0.05) / (L2 + 0.05)
, dondeL1
está la luminancia del color más claro yL2
es la luminancia del más oscuro en una escala de 0.0-1.0. La luminancia del negro es 0.0 y el blanco es 1.0, por lo que sustituir esos valores le permite determinar el que tenga el mayor contraste. Si el contraste para el negro es mayor que el contraste para el blanco, use negro, de lo contrario use blanco. Dada la luminosidad del color que está probando a medida queL
la prueba se convierte en:Esto se simplifica algebraicamente para:
O aproximadamente:
Lo único que queda es calcular
L
. Esa fórmula también se proporciona en las pautas y parece la conversión de sRGB a RGB lineal seguido de la recomendación ITU-R BT.709 para luminancia.El umbral de 0.179 no debe cambiarse ya que está vinculado a las pautas del W3C. Si encuentra que los resultados no son de su agrado, intente con la fórmula más simple de arriba.
fuente
#D6B508
un valor de 171, por lo tanto, un contraste blanco. Sin embargo, el contraste debe ser negro (confirmado aquí: webaim.org/resources/contrastchecker )No tomo ningún crédito por este código, ya que no es mío, pero lo dejo aquí para que otros lo encuentren rápidamente en el futuro:
Según la respuesta de Mark Ransoms, aquí hay un fragmento de código para la versión simple:
y aquí está el fragmento de código para la versión avanzada:
Para usarlos solo llame:
Además, gracias
Alx
ychetstone
.fuente
isDark(bgColor)
'color': isDark(color)?'white':'black'
¿Qué tal esto (código JavaScript)?
fuente
Además de las soluciones aritméticas, también es posible utilizar una red neuronal AI. La ventaja es que puede adaptarlo a su propio gusto y necesidades (es decir, el texto blanquecino en rojos saturados brillantes se ve bien y es tan legible como el negro).
Aquí hay una demostración de Javascript ordenada que ilustra el concepto. También puede generar su propia fórmula JS directamente en la demostración.
https://harthur.github.io/brain/
A continuación hay algunos cuadros que me ayudaron a entender el problema . En el primer gráfico, la luminosidad es constante 128, mientras que el tono y la saturación varían. En el segundo gráfico, la saturación es una constante 255, mientras que el tono y la luminosidad varían.
fuente
Aquí está mi solución en Java para Android:
fuente
Basado en la respuesta de @MarkRansom, creé un script PHP que puedes encontrar aquí:
fuente
Esta es una versión rápida de la respuesta de Mark Ransom como una extensión de UIColor
fuente
Este es solo un ejemplo que cambiará el color de una marca de verificación SVG al hacer clic en un elemento. Establecerá el color de la marca de verificación en blanco o negro según el color de fondo del elemento seleccionado.
https://gist.github.com/dcondrey/183971f17808e9277572
fuente
Yo uso esta función JavaScript para convertir
rgb
/rgba
a'white'
o'black'
.Puede entrar en cualquiera de estos formatos y es la salida
'black'
o'white'
rgb(255,255,255)
rgba(255,255,255,0.1)
color:rgba(255,255,255,0.1)
255,255,255,0.1
fuente
La respuesta detallada de Mark funciona muy bien. Aquí hay una implementación en javascript:
Entonces puede llamar a esta función
lum([111, 22, 255])
para obtener blanco o negro.fuente
Nunca he hecho algo como esto, pero ¿qué hay de escribir una función para verificar los valores de cada uno de los colores contra el color medio de Hex 7F (FF / 2)? Si dos de los tres colores son mayores que 7F, entonces está trabajando con un color más oscuro.
fuente
Basado en diferentes entradas del enlace Haga que el color de primer plano sea blanco o negro dependiendo del fondo y este hilo, hice una clase de extensión para Color que le brinda los colores de contraste requeridos.
El código va de la siguiente manera:
fuente
Si como yo estabas buscando una versión RGBA que tenga en cuenta alfa, aquí hay una que funciona muy bien para tener un alto contraste.
fuente
Esta es una versión R de la respuesta de Mark Ransom, utilizando solo la base R.
fuente
@SoBiT, estaba viendo tu respuesta, que se ve bien, pero hay un pequeño error. Su función hexToG y hextoB necesitan una edición menor. El último número en substr es la longitud de la cadena, por lo que en este caso debería ser "2", en lugar de 4 o 6.
fuente
MENOS tiene una buena
contrast()
función que funcionó muy bien para mí, consulte http://lesscss.org/functions/#color-operations-contrast"Elija cuál de los dos colores proporciona el mayor contraste con el otro. Esto es útil para garantizar que un color sea legible en un fondo, lo que también es útil para el cumplimiento de accesibilidad. Esta función funciona de la misma manera que la función de contraste en Compass for SASS. De acuerdo con WCAG 2.0, los colores se comparan utilizando su valor de luma con corrección gamma, no su luminosidad ".
Ejemplo:
Salida:
fuente
De hexadecimal a blanco o negro:
fuente
Código de versión de Objective-c para iOS basado en la respuesta de Mark:
fuente
¿Qué pasa con las pruebas con todos los colores de 24 bits?
Tenga en cuenta que el método YIQ devolverá una relación de contraste mínima de 1.9: 1, que no pasa las pruebas AA y AAA WCAG2.0, suponiendo un umbral de 128.
Para el método W3C, devolverá una relación de contraste mínima de 4.58: 1, que pasa las pruebas AA y AAA para texto grande, y la prueba AA para texto pequeño, no pasará la prueba AAA para texto pequeño para todos los colores.
fuente
Aquí está mi propio método que he estado usando y con el que no he tenido problemas hasta ahora 😄
fuente
Hice el módulo Python para seleccionar el color de primer plano basado en el valor RGB o HEX del color de fondo: https://github.com/azaitsev/foreground
fuente
Aquí está mi código para Java Swing basado en la sorprendente respuesta de Mark:
fuente