colors - rueda - ¿Cómo elegir los colores RGB de buen contraste programáticamente?

tabla de colores html pdf

Question

Supongamos, en su programa:

1. color A es un color que seleccionamos al azar

2. Sabiendo el color A , ¿cómo puedo elegir un color B que esté en alto contraste con el color A ?

El problema se puede reducir aún más a: "imagine 2 cuadrados llenos de color uno al lado del otro. Debe quedar claro para un ojo humano que los colores no son lo mismo"

Ejemplo:

• Negro -> blanco
• Azul -> blanco

Answer 1

Hay alguna información en las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0 (http://www.w3.org/TR/2008/REC-WCAG20-20081211)

1. Contraste visual: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

2. Relación de contraste: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

3. Luminancia relativa: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

Hay un buen ejemplo en este sitio, pero él calcula dónde son suficientes dos colores, no cómo obtenerlos.

Para elegir un color con buen contraste, me gustaría ir con colores complementarios: por ejemplo, elegir el color aleatorio A, transformarlo en un espacio HSV, obtener el tono complementario.

Tono complementario: después de transformar el color de RGB a HSV, el tono complementario será de 180 grados aproximadamente (o 0.5, en un valor de tono normalizado de 0-1). Este sitio tiene algo al respecto en PHP.

Answer 2

Mientras buscaba una mejor manera de hacerlo, me topé con la guía de Adobe Illustrator que menciona cómo crean colores complementarios. Ellos dicen:

Complemento Cambia cada componente de un color a un nuevo valor basado en la suma de los valores RGB más altos y más bajos en el color seleccionado. Illustrator agrega los valores RGB más bajos y más altos del color actual, y luego resta el valor de cada componente de ese número para crear nuevos valores RGB. Por ejemplo, suponga que selecciona un color con un valor RGB de 102 para el rojo, 153 para el verde y 51 para el azul. Illustrator agrega los valores alto (153) y bajo (51) para terminar con un nuevo valor (204). Cada uno de los valores RGB en el color existente se resta del nuevo valor para crear nuevos valores RGB complementarios: 204 - 102 (el valor rojo actual) = 102 para el nuevo valor rojo, 204 - 153 (el valor verde actual) = 51 para el nuevo valor verde, y 204 - 51 (el valor azul actual) = 153 para el nuevo valor azul.

No sería demasiado difícil hacer esto programáticamente y pensar esta vez que podría funcionar para lo que está tratando de hacer.

¡Buena suerte!