¿Qué relación necesito para aprobar?

4,5:1 para texto normal en AA, que es el nivel que nombran casi todos los requisitos de accesibilidad. El texto grande — 18pt, o 14pt en negrita — solo necesita 3:1. AAA sube esas cifras a 7:1 y 4,5:1.

¿Por qué suspende una combinación que a mí me parece bien?

La relación se calcula a partir de la luminancia relativa, no de lo distintos que parecen los dos tonos. Naranja sobre blanco se ve muy contrastado y puntúa fatal, porque los dos son claros. Esa distancia es justo el objetivo: la prueba es para lectores cuyos ojos no distinguen el tono como los tuyos.

¿La relación se aplica también a iconos y bordes?

Los componentes de interfaz y los gráficos con significado necesitan 3:1 contra lo que tienen detrás. Las formas decorativas, y el texto que forma parte de un logotipo, quedan exentos.

¿Cómo arreglo una combinación que falla sin cambiar el color de marca?

Mueve la luminosidad, no el tono. Oscurecer el texto o aclarar el fondo cambia la relación deprisa y deja el color reconocible — y normalmente es el fondo el que tiene más margen.

Inicio›Herramientas de color› Comprobador de contrasteNavegador

Comprobar el contraste de color según WCAG

Calcula la ratio de contraste WCAG entre un color de texto y su fondo, y muestra si cumple AA y AAA en tamaño normal y grande. La ratio se basa en la luminancia relativa, no en lo distintos que parezcan los tonos.

Color del texto

Fondo

Muestra de texto grandeTexto corrido al tamaño que usan de verdad la mayoría de las interfaces.

5.85:1

Ratio de contraste. La WCAG mide la luminancia relativa, no lo distintos que parecen los tonos.

AA — texto normalCumple · necesita 4.5:1
AA — texto grande (18pt+)Cumple · necesita 3:1
AAA — texto normalNo cumple · necesita 7:1
AAA — texto grandeCumple · necesita 4.5:1

Cómo se usa

1Fija el color del texto y el del fondo.
2Lee la relación y las marcas de aprobado o suspenso para AA y AAA.
3Mira la muestra de abajo para ver a qué se parece realmente esa relación.

Preguntas frecuentes

¿Qué relación necesito para aprobar?: 4,5:1 para texto normal en AA, que es el nivel que nombran casi todos los requisitos de accesibilidad. El texto grande — 18pt, o 14pt en negrita — solo necesita 3:1. AAA sube esas cifras a 7:1 y 4,5:1.
¿Por qué suspende una combinación que a mí me parece bien?: La relación se calcula a partir de la luminancia relativa, no de lo distintos que parecen los dos tonos. Naranja sobre blanco se ve muy contrastado y puntúa fatal, porque los dos son claros. Esa distancia es justo el objetivo: la prueba es para lectores cuyos ojos no distinguen el tono como los tuyos.
¿La relación se aplica también a iconos y bordes?: Los componentes de interfaz y los gráficos con significado necesitan 3:1 contra lo que tienen detrás. Las formas decorativas, y el texto que forma parte de un logotipo, quedan exentos.
¿Cómo arreglo una combinación que falla sin cambiar el color de marca?: Mueve la luminosidad, no el tono. Oscurecer el texto o aclarar el fondo cambia la relación deprisa y deja el color reconocible — y normalmente es el fondo el que tiene más margen.