Comprobador de contraste de color
Comprueba el contraste entre texto y fondo con los umbrales WCAG 2.2 AA y AAA. Compón transparencias sobre un lienzo opaco, previsualiza texto normal o grande y exporta el informe.
Usa un nombre CSS, HEX, RGB/RGBA o HSL/HSLA. Los colores transparentes se componen sobre el lienzo elegido antes del cálculo.
| Uso | Mínimo | Resultado |
|---|---|---|
| Texto normal · AA | 4.5:1 | Cumple |
| Texto normal · AAA | 7:1 | Cumple |
| Texto grande · AA | 3:1 | Cumple |
| Texto grande · AAA | 4.5:1 | Cumple |
| Interfaz y gráficos esenciales · AA | 3:1 | Cumple |
El resultado usa la relación sin redondear. Texto grande: al menos 24 CSS px, o unos 18,67 CSS px en negrita. El contraste de interfaz depende de colores adyacentes reales; este par no demuestra conformidad WCAG completa.
Haz que cada palabra sea fácil de leer.
La vista previa usa umbrales de texto normal. Fondo efectivo: #FFFFFF (redondeado para mostrar).
Tres pasos sencillos.
- Introduce texto y fondo como nombres CSS, HEX, RGB o HSL.
- Elige el lienzo opaco detrás de las transparencias y revisa los resultados.
- Previsualiza el texto, intercambia colores y copia o descarga el informe.
Lo que debes saber.
Usa luminancia relativa sRGB y ratios sin redondear para decidir el resultado. Texto grande: al menos 24 píxeles CSS, o unos 18,67 en negrita. Solo comprueba colores sólidos; degradados, imágenes, fuentes renderizadas, colores adyacentes y conformidad completa requieren otra revisión.
Cómo protegemos tu privacidad →Preguntas frecuentes.
¿Por qué puede fallar un 4,50:1?
La cifra visible se redondea a dos decimales. La decisión usa el valor completo: un ratio ligeramente inferior a 4,5 no supera AA para texto normal.
¿Cómo influye la transparencia?
Primero se compone el fondo sobre el lienzo opaco; después el texto sobre ese fondo efectivo. El contraste se calcula a partir de esas composiciones. Otro lienzo puede cambiarlo.