Vamos a crear una página que tiene un color de fondo aleatorio, de modo que, cada vez que se visite, se muestre con un fondo distinto. Ahora bien, como el color de la página va a ser distinto cada vez, para asegurarnos que el texto se pueda leer correctamente, haremos que el texto de la página sea o blanco o negro, dependiendo de la gama del color de fondo: si es oscuro, el texto de la página será blanco y si el fondo es claro, el texto se verá en negro.

Hay que darse cuenta que, si el color es aleatorio, a veces saldrá más oscuro y a veces más claro. Para que se lea bien el texto, su color tiene que contrastar lo suficiente con el color de fondo, por eso calcularemos la oscuridad o claridad del fondo para fijar el color del texto.

Se puede ver en marcha el ejemplo que se va a desarrollar en esta página.

En un artículo anterior del taller de Javascript ya explicamos una manera de conseguir un color aleatorio en Javascript.

Aunque en el mencionado artículo ya estaba la función Javascript para obtener un color aleatorio, la transcribimos aquí, pues hemos hecho un par de cambios minúsculos al código:

function dame_numero_aleatorio(superior, inferior){
   var numPosibilidades = (superior + 1) - inferior;
   var aleat = Math.random() * numPosibilidades;
   aleat = Math.floor(aleat);
   aleat = (inferior + aleat);
   return aleat
}

function dame_color_aleatorio(){
   color_aleat="#"
   hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
   var inferior = 0;
   var superior = hexadecimal.length-1;
   for (i=0;i<6;i++){
      color_aleat += hexadecimal[dame_numero_aleatorio(superior, inferior)];
   }
   return color_aleat
}

Ahora veremos la manera de conocer la oscuridad o claridad de un color con aleatorio generado por Javascript. Para calcular la oscuridad (o claridad) de un color en formato RGB hexadecimal, vamos a realizar varios pasos:

Tenemos que saber que, a mayores valores de RGB, el color resultante será mas claro. Si los valores de RGB son más bajos, el color será más oscuro. Los valores de R, G y B, por separado pueden ir, en decimal, desde 0 a 255. Diremos que es claro cuando sea mayor que 255 / 2 y que es oscuro cuando sea menor de 255 / 2. Vamos a suponer un umbral a partir del cual el color lo consideramos más oscuro o más claro. Digamos que si sumamos por separado los valores rojo, verde y azul y nos dan más de la mitad de ((255 + 255 +255) / 2), es que el color es claro. Si está por debajo de ese umbral, el color es oscuro.

1. Separaremos los valores hexadecimales de los tres componentes del color (rojo, verde y azul)
2. Convertiremos esos valores a enteros en base 10
3. Sumamos los valores de cada color, obteniendo un número entero, del que vamos a deducir la claridad u oscuridad.
4. Si el número resultado de la suma es menor que ((255 + 255 + 255) / 2), entonces es que el color de fondo es oscuro, luego el color del texto debe ser claro. Y al revés, si deducimos que el color de fondo es claro, entonces el color de texto tendrá que ser oscuro.

Esto se hace de la siguiente manera, en código Javascript, teniendo un color en un string con el formato #RRGGBB:

//obtengo un aleatorio
colorin = dame_color_aleatorio()

//voy a extraer las tres partes del color
rojo = colorin.substring(1,3)
verde = colorin.substring(3,5)
azul = colorin.substring(5,7)

//voy a convertir a enteros los string, que tengo en hexadecimal
introjo = parseInt(rojo,16)
intverde = parseInt(verde,16)
intazul = parseInt(azul,16)

//ahora sumo los valores
oscuridad = introjo + intverde + intazul

//si el valor oscuridad es menor que ((255 + 255 + 255) / 2) es que es un color más oscuro
//si es oscuro, el color del texto será blanco
if (oscuridad<(255+255+255)/2)
   colortexto="#ffffff"
else
   colortexto="#000000"

Para actualizar el color de fondo y de texto de una página web se podría hacer con estas líneas de código:

document.fgColor=colortexto
document.bgColor=colorin

Pero esto da un problema en algunos navegadores, al cambiar el color del texto, que no se puede hacer si previamente se ha escrito algo en la página.

Entonces, vamos a marcar el color del fondo y del texto utilizando los conocidos atributos bgcolor y text de la etiqueta <body>.

Escribiremos el <body> mediante javascript, colocando los valores de color aleatorio y color del texto que extraemos de las variables que los contienen.

document.write('<body bgcolor="' + colorin + '" text="' + colortexto + '">')

Eso es todo. Ya tenemos la página con el color de fondo aleatorio y el color del texto con suficiente contraste.

La página donde hemos implementado este ejercicio se puede ver en marcha aquí. Podemos ver su código fuente para obtener script del ejemplo completo.