Comprobador de contraste de color (WCAG)
Comprueba la relación de contraste entre un color de texto y uno de fondo según WCAG 2.2 AA y AAA para texto normal, texto grande y elementos de interfaz, y obtén los colores más cercanos que cumplen
Cargando la herramienta…
Elija un color de texto y un color de fondo para obtener a la vez la relación de contraste de WCAG 2.2 y los resultados AA y AAA. Cuando un nivel no se cumple, la página propone el color más cercano que cumple cambiando solo la luminosidad. Sirve para comprobar si el texto de una web, una aplicación o una presentación se lee bien.
Cómo se usa
- En «Comprobar dos colores», fije el «Color del texto» y el «Color de fondo» con el selector o escribiendo HEX, rgb() o hsl().
- Escriba su propio texto en «Frase de vista previa» para verlo como texto normal, grande y en negrita, y como borde e icono.
- En «Colores más cercanos que cumplen», pulse «Aplicar» junto a «Cambiar el color del texto» o «Cambiar el fondo». Pulse un valor HEX para copiarlo.
- En «Comprobar una paleta», introduzca de 2 a 12 colores para obtener una tabla con todas las combinaciones y la lista «Pares que alcanzan el nivel».
Cómo funciona
- Relación de contraste = (L1 + 0.05) ÷ (L2 + 0.05), donde L1 y L2 son las luminancias relativas de los dos colores. Va de 1:1 a 21:1 y se redondea hacia abajo a dos decimales.
- Los niveles siguen los criterios 1.4.3 (AA: 4.5:1 para texto normal, 3:1 para texto grande), 1.4.6 (AAA: 7:1 y 4.5:1) y 1.4.11 (3:1 para elementos de interfaz) de WCAG 2.2. El texto grande tiene 24px, o 18.66px en negrita, o más.
- Una sugerencia mantiene el tono y el croma en OKLCH y mueve solo la luminosidad hasta alcanzar el nivel. Cuando ninguna luminosidad lo alcanza, la página lo indica.
- Los últimos colores, la frase y la lista de la paleta se guardan en este navegador.
Preguntas frecuentes
- ¿Qué significa una relación de contraste de 4.5:1?
- La luminancia relativa del color más claro más 0.05 es 4.5 veces la del color más oscuro más 0.05. Es el mínimo para texto de tamaño normal en el nivel AA.
- ¿El texto gris #777777 cumple sobre blanco?
- Su relación es 4.47:1, justo por debajo de 4.5:1, así que solo cumple el nivel de texto grande. Un paso más oscuro, #767676, da 4.54:1 y cumple AA.
- ¿Cuál es la diferencia entre AA y AAA?
- AA requiere 4.5:1 para texto normal y AAA requiere 7:1. La mayoría de los sitios apuntan a AA; AAA conviene para textos largos de lectura.
- ¿Los bordes de botones y los iconos también necesitan contraste?
- Sí. Según WCAG 1.4.11, los elementos de interfaz y gráficos que transmiten significado necesitan al menos 3:1 frente a su entorno; la fila «Elementos de interfaz y gráficos» comprueba eso.