Comprobador de contraste
Elige los colores del texto y del fondo para comprobar su relación de contraste con los umbrales WCAG AA y AAA. Consulta resultados separados para texto normal y grande, junto con una vista previa que usa los colores seleccionados.
Lo que puedes hacer
Comprueba la proporción de dos colores
Elige colores de texto y de fondo y consulta su proporción de contraste con dos decimales.
Compara los criterios AA y AAA
Consulta resultados separados para texto normal y texto grande, con una vista previa que usa los colores seleccionados.
Compara con negro y blanco
Abre los detalles opcionales para comparar el color del texto con fondos negro y blanco.
Cómo se usa
Introduce el color del texto
Elige HEX, RGB, HSL, HSV o CMYK e introduce el valor del color del texto. Si eliges una muestra, la entrada cambia a HEX.
Elige el fondo
Introduce un valor HEX de tres o seis dígitos, o usa el selector de color. El prefijo # es opcional.
Comprueba el contraste
Selecciona Comprobar contraste para revisar la proporción, la vista previa del texto y los resultados AA/AAA. Vuelve a comprobar después de cambiar cualquiera de los dos colores.
Útil cuando
Comprueba el texto del cuerpo sobre un fondo
Introduce los colores usados en una página y comprueba si el texto normal cumple la proporción exigida.
Compara los colores del encabezado
Usa el resultado de texto grande y la vista previa al considerar un par de colores para un encabezado.
Cómo interpretar los resultados
Proporciones AA y AAA
AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 para texto normal y 4.5:1 para texto grande. Los resultados usan la proporción sin redondear.
Qué se considera texto grande
El texto grande es de al menos 18 pt, o 14 pt en negrita. En CSS esto es 24px, o aproximadamente 18.7px en negrita. La vista previa usa texto de grosor normal a 16px y 24px.
Alcance de la comprobación
Esto comprueba el contraste del texto entre dos colores sRGB opacos. No evalúa fondos de imagen, la combinación de transparencias, elementos que no son texto ni la conformidad de toda la página.
Preguntas y respuestas
¿Que la proporción cumpla el criterio significa que toda la página también es conforme?
Este resultado cubre únicamente el contraste del texto para los dos colores seleccionados. Evalúa por separado la conformidad de toda la página.
¿Qué muestra la comparación con negro y blanco?
Compara el color de texto seleccionado con el negro y el blanco y muestra cuál tiene la proporción más alta. Esto es independiente del resultado del color de fondo introducido.
¿Puedo comprobar texto transparente o texto sobre una imagen?
No se admiten la transparencia ni los fondos de imagen. Introduce colores de texto y de fondo opacos.
Entrada y resultado
- Color del texto
- Valores HEX, RGB, HSL, HSV o CMYK, o el selector de color. CMYK es una estimación sin perfil ICC.
- Fondo
- HEX de tres o seis dígitos, o el selector de color. No se admite la transparencia.
- Resultado
- Proporción de contraste, resultados AA/AAA para texto normal y grande, y una vista previa del texto. Los resultados se muestran sin acción de guardado.