Comprobador de Contraste de Color
La relación de contraste del WCAG entre dos colores, y si aprueba AA o AAA al tamaño de texto que está usando.
Resultados
Qué hace esta herramienta
Que un texto se lea o no no es cuestión de gusto; tiene un número, y ese número está escrito en la ley de accesibilidad de un número creciente de países. La relación de contraste del WCAG va de 1 a 1, con dos colores iguales, hasta 21 a 1, con negro sobre blanco. Ponga sus dos colores y el tamaño al que los va a usar, y esta página le da la relación y el veredicto simple, incluido si el tamaño cuenta como texto grande, lo que cambia el umbral.
Fórmula
WCAG 2: luminancia = 0,2126 R + 0,7152 G + 0,0722 B después de la rampa; razón = (clara + 0,05) ÷ (oscura + 0,05)
Variables
| Símbolo | Significado | Unidad |
|---|---|---|
foreground | Color del texto | — |
background | Color de fondo | — |
font_size | Tamaño del texto | px |
bold | Negrita | — |
OUT | Relación de contraste | :1 |
LV | Nivel WCAG alcanzado | — |
AA | Pasa AA | — |
A3 | Pasa AAA | — |
GR | Basta para iconos y bordes | — |
LG | Cuenta como texto grande | — |
NE | Necesario para AA en este tamaño | :1 |
BT | Mejor color de texto simple sobre este fondo | — |
Ejemplo resuelto
- Color del texto#5a5f6b
- Color de fondo#fdfcf8
- Tamaño del texto16 px
- Negritano
- Relación de contraste6,23 :1
- Nivel WCAG alcanzadoAA — la exigencia habitual
- Pasa AASí
- Pasa AAANo
- Basta para iconos y bordesSí
- Cuenta como texto grandeNo
- Necesario para AA en este tamaño4,5 :1
- Mejor color de texto simple sobre este fondo#000000
Limitaciones
- Para trabajos que deban cumplir una norma o ser firmados, contraste el resultado con el reglamento aplicable y pida la revisión de un ingeniero cualificado.
Preguntas frecuentes
¿Por qué el tamaño del texto cambia la respuesta?
Porque las letras grandes necesitan menos contraste para seguir siendo legibles: hay simplemente más trazo para que el ojo lo capte. El WCAG traza la línea en 18 puntos, que son 24 píxeles, o en 14 puntos (unos 18,7 píxeles) cuando el texto es negrita. Por encima de esa línea el AA pide 3 a 1 en vez de 4,5, y el AAA pide 4,5 en vez de 7. El mismo par de colores puede así aprobar en un titular y suspender en el párrafo de debajo.
¿Por qué el gris sobre blanco queda tantas veces a punto de aprobar?
Porque el gris medio al que los diseñadores llegan por instinto —#777— da 4,48 contra blanco, y el umbral es 4,5. Queda bien en una buena pantalla en una sala tranquila y desaparece en un móvil a plena luz, que es exactamente la situación que el umbral existe para proteger. Oscurecer un paso, a #767676, es el arreglo habitual y no cuesta nada visualmente.