Saltar al contenido
MasterMath

Calculadora de contraste de color

Comprueba si un texto se lee bien sobre su fondo según las pautas de accesibilidad WCAG, que es lo que exige la normativa para webs públicas.

Relación de contraste

Texto grande de ejemplo

Y este es un texto normal, del tamaño que se usa en un párrafo corriente.

Relación de contraste
Nivel WCAG alcanzado
AA texto normal (4,5:1)
AA texto grande (3:1)
AAA texto normal (7:1)
AAA texto grande (4,5:1)

Cómo se ha calculado

    La fórmula

    contraste = (L1 + 0,05) ÷ (L2 + 0,05)

    De dónde sale

    La luminancia relativa no es el brillo aparente: cada canal se corrige con una curva y se pondera según la sensibilidad del ojo, que es mucho mayor al verde que al azul. Por eso un amarillo brillante y un azul intenso pueden tener contrastes muy distintos de lo que parece a simple vista.

    Cómo calcularlo a mano

    1. Calcula la luminancia relativa de cada color
    2. Suma 0,05 a cada una
    3. Divide la mayor entre la menor
    4. Compara con los umbrales: 4,5 para AA y 7 para AAA

    Lo que conviene saber

    El nivel AA con 4,5:1 es el mínimo exigible y el que pide la normativa europea de accesibilidad para webs del sector público. El texto grande, a partir de 18 puntos o 14 en negrita, se conforma con 3:1 porque los trazos son más gruesos. El contraste máximo posible es 21:1, que es blanco puro sobre negro puro.

    Preguntas frecuentes

    ¿Qué contraste necesita un texto para ser accesible?

    4,5:1 para texto normal y 3:1 para texto grande, según el nivel AA de las WCAG.

    ¿Cuál es el contraste máximo?

    21:1, que corresponde a negro puro sobre blanco puro.

    ¿Qué se considera texto grande?

    A partir de 18 puntos, o 14 puntos si va en negrita.

    ¿Es obligatorio cumplir las WCAG?

    En la Unión Europea, sí para las webs del sector público según la directiva de accesibilidad. Para el resto es una buena práctica muy recomendable.