El contraste

facebook-svg gplus-svg twitter-svg

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 )