El contraste
Si no hay contraste no hay legibilidad. Es por esto que es importante asegurarse de que haya un gran contraste entre el color de fondo y el color del texto.
Analizador de contraste de colores
Esta es una herramienta que nos ayuda medir el contraste entre colores.
Puede utilizar colores hex, rgb o hsl. Si el valor introducido no es válido el color resultante será blanco.
Vea esta aplicación en codepen.io
La normativa
El nivel AA: requiere un ratio de contraste de 4.5:1 para texto normal y de 3:1 para texto grande.
Esto equivale a un aprobado justo.
El nivel AAA: requiere un ratio de contraste de 7:1 para texto normal y 4.5:1 para texto grande.
Esto equivale a un aprobado con notable.
Definimos "texto grande" como texto de mínimum 14pt ( 18px ) y en negrita, o de mínimum 18pt ( 24px ) para texto normal.
Las formulas utilizadas
Para entender el porque de estas formulas puede leer esto: Contrast (Minimum): Understanding SC 1.4.3
Para calcular la luminancia relativa ( relative luminance ) de cada color utilizamos la siguiente formula, donde rgb es el array de los tres colores básicos: r – red (rojo), g – green (verde), b – blue (azul).
Por ejemplo: var rgb = [255,0,0]; para rojo
function luminanciaRelativa(rgb){
var rgb = rgb.map(function(c){
c /= 255;
return c < .03928 ? c / 12.92 : Math.pow(( c + .055)/1.055 , 2.4);
});
return ( 21.26 * rgb[0] + 71.52 * rgb[1] + 7.22 * rgb[2] ) / 100
}Para calcular el contraste entre los dos colores ( del fondo y del texto ) utilizamos esta otra formula:
function colorContrast(c1,c2){
var l1 = luminanciaRelativa(c1);
var l2 = luminanciaRelativa(c2);
var ret = (l1 + .05) / (l2 + .05);
// +.05 para asegurarnos de no dividir por 0
return ret < 1 ? 1 / ret : ret;
}El resultado tiene que ser un valor entre 1 ( negro sobre negro por ejemplo – o sea: completamente ilegible ) y 21 ( negro sobre blanco )