Elija letras blancas o negras sobre el color

He usado un selector de color basado en javascript en algunos de mis sitios, y el color de fuente dentro del cuadro de entrada cambia según los valores que elige el selector...

El código ( Enlace de código directo aquí ) para la secuencia de comandos muestra una ubicación específica para la coloración del cuadro de entrada al que está adjunta la secuencia de comandos.

Dentro de ese código puedes ver la fórmula:

0.213 * this.rgb[ 0 ] +
0.715 * this.rgb[ 1 ] +
0.072 * this.rgb[ 2 ]

Siendo el resultado:

< 0.5 ? '#FFF' : '#000';

o... (SI) menos de 0,5 del blanco puro (255) = 'Blanco' (De lo contrario) = 'Negro';

Puede extrapolar de esa fórmula que: 0.213 * su valor ROJO (0 - 255) +
0.715 * su valor Azul (0 - 255) +
0.072 * su valor Verde (0 - 255)
le da un número

...y si ese número es mayor que .5,

debe optar por un color de fuente negro, de lo contrario, elija blanco.

Ejemplo:

0,213 * 21 = 4,473
0,715 * 57 = 33,605
0,072 * 117 = 8,424

4,473 + 33,605 + 8,424 = 46,502

Como 46,502 es menos de 0,5 del blanco puro (255), deberíamos usar blanco en este fondo.

Espero que esto ayude.

Consulte esta respuesta a una pregunta similar: Consulte ¿Cómo calcular el mejor color de letra para un color de fondo aleatorio?

Aplicando esta teoría, para que lo descubras dinámicamente, podrías usar valores RGB o colores hexadecimales. En hexadecimal, los códigos de color van desde 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Entonces #751 o #745814 es 7 o en rojo, 5 en verde y 1 en azul (RGB). Cada segundo número en el hexadecimal de 6 dígitos es solo un "ajuste fino".

El punto medio hace que <=7 sea más oscuro que el 50 %, >=8 sea más claro (técnicamente, está más saturado). Por lo tanto, puede encontrar mediante programación una puntuación acumulativa y aplicar texto negro a los colores más claros, y viceversa.

Diría que si el color de fondo cambia constantemente, lo mejor sería elegir un color neutro. Dependiendo de qué tan brillante u oscuro se vuelva el fondo, se debe determinar si usa blanco o negro. Elija un término medio entre todos los colores de fondo y escale sus colores del más oscuro al más claro. Luego, con los fondos más oscuros, use el blanco y, a medida que alcance más colores claros, debe cambiar al negro. Tal vez incluso arroje algunos de los grises intermedios allí también. Entonces, en general, configure hasta escalas, una con sus colores de oscuro a claro y luego una escala debajo de blanco a negro. Así sabrás qué color se utiliza mejor. Espero que esto ayude. Además, esto realmente se basa en opiniones, por lo que otros pueden o no estar de acuerdo conmigo o incluso dar sus propios pensamientos. ¡Buena suerte!

Otra alternativa que encontré hace un par de días e hizo que todo el proceso de encontrar relaciones de contraste fuera MUY fácil:

http://leaverou.github.io/contrast-ratio/

Puede copiar los valores hexadecimales pasados ​​​​en los cuadros y automáticamente le da un número. Si pruebas con blanco y negro más el color, deberías tener un resultado en menos de 5 segundos :)