Comprobador de Contraste de Color
Escribe el color del texto y el del fondo y mira al instante la relación de contraste, con el resultado WCAG AA y AAA para texto normal, texto grande y componentes de interfaz.
| Elemento | AA | AAA |
|---|---|---|
| Texto normal AA 4,5:1 · AAA 7:1 | No pasa | No pasa |
| Texto grande AA 3:1 · AAA 4,5:1 | Pasa | No pasa |
| Componentes de interfaz 3:1 (criterio 1.4.11) | Pasa | No aplica |
Cambia solo la luminosidad del texto, hasta llegar a 4,5:1 con el menor cambio posible.
Texto grande de ejemplo
Este es un texto normal de ejemplo, para ver cómo se lee la combinación.
Cómo usar el comprobador de contraste
Escribe el color del texto en el primer campo y el del fondo en el segundo. Cada campo acepta HEX (#5271FF), rgb(), hsl() y los 148 nombres de color de CSS, como tomato. El cuadrado de al lado abre el selector del sistema, y el botón del medio intercambia texto y fondo.
El número grande es la relación de contraste, de 1:1 (colores iguales) a 21:1 (negro sobre blanco). La tabla muestra si pasa el AA y el AAA para cada tipo de elemento, y la vista previa aplica el par a un título, un párrafo y un botón. Cuando el texto no llega a 4,5:1, el botón de ajuste oscurece o aclara solo el texto, manteniendo el matiz, hasta pasar el AA con el menor cambio posible.
Qué es la relación de contraste
La relación compara la luminancia relativa de los dos colores, que mide cuán claro parece cada uno al ojo. La fórmula de WCAG 2.2 es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. El 0,05 evita dividir por cero y tiene en cuenta la luz ambiente que se refleja en la pantalla.
La luminancia es 0,2126 × R + 0,7152 × G + 0,0722 × B, con cada canal convertido antes de sRGB a luz lineal. Esa conversión divide el valor por 12,92 cuando es como máximo 0,04045 y, por encima de eso, usa ((valor + 0,055) / 1,055) ^ 2,4. El verde pesa más porque el ojo es más sensible a él. WCAG 2.0 traía 0,03928 en lugar de 0,04045, y la diferencia no cambia ningún resultado con canales de 8 bits.
La relación no se redondea hacia arriba: 4,499 no pasa en 4,5. Cuando el redondeo a dos decimales haría que una combinación reprobada apareciera con el valor del umbral, la página recorta el número en lugar de redondearlo.
AA y AAA: qué exige cada nivel
WCAG tiene dos niveles de contraste para el texto. El AA, en el criterio 1.4.3, pide 4,5:1 en texto normal y 3:1 en texto grande, y es el nivel más usado como meta. El AAA, en el criterio 1.4.6, pide 7:1 y 4,5:1. Para componentes de interfaz y gráficos, el criterio 1.4.11 pide 3:1 en el AA y no tiene versión AAA.
| Elemento | AA | AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande | 3:1 | 4,5:1 |
| Componentes de interfaz y gráficos | 3:1 | sin nivel AAA |
No todos los colores tienen que llegar al AAA. El propio W3C no recomienda exigir el AAA como regla general de un sitio entero, porque hay contenido que no puede cumplir todos los criterios de ese nivel.
Qué cuenta como texto grande
Es el texto de al menos 18 pt, o de al menos 14 pt en negrita. En píxeles CSS, a 96 dpi, son unos 24 px y 18,66 px. El umbral es menor porque las letras grandes siguen siendo legibles con menos contraste. Si dudas, trata el texto como normal: 4,5:1 sirve para cualquier tamaño.
Contraste de componentes e iconos
El criterio 1.4.11 pide 3:1 para las partes de un componente necesarias para reconocerlo, como el borde de un campo o de una casilla, y para los gráficos que transmiten información, como iconos sin texto y las líneas de un gráfico. Vale también para los estados, como el anillo de foco. El texto dentro del componente sigue el 4,5:1.
Errores comunes de contraste
Estos cuatro aparecen con frecuencia en las revisiones de accesibilidad:
- Placeholder en gris claro. Es texto y necesita 4,5:1 sobre el fondo del campo, aunque desaparezca cuando la persona escribe.
- Texto sobre una imagen. El contraste cambia de un punto a otro, así que mide en el peor tramo o pon una capa sólida u oscurecida detrás del texto.
- Foco y estados sin contraste. El anillo de foco, el borde del campo seleccionado y el icono activo entran en el criterio 1.4.11 y necesitan 3:1.
- Componentes deshabilitados. WCAG exime a los componentes inactivos del contraste mínimo, pero un gris demasiado tenue deja a la persona sin saber qué está bloqueado. Los logotipos también quedan fuera de la regla, y el texto que los rodea no.
Fuentes
Consultadas el 6 de noviembre de 2026:
Para ir más allá del contraste
¿Necesitas el código de un color? Usa el Selector de color, o conviértelo con el conversor de HEX a RGB y el conversor de RGB a HEX. Para ver el contraste del texto blanco y del negro sobre cada uno de los 148 colores de CSS, consulta la tabla de colores HTML.