Cinco resultados claros
El comprobador de contraste de color separa AA normal, AAA normal, AA grande, AAA grande y la referencia 3:1 para interfaz.
Herramienta gratuita WCAG 2.2
Comprobador de contraste de color WCAG AA y AAA
Usa este comprobador de contraste de color para medir texto y fondo, interpretar cada umbral, ver una interfaz real y encontrar un color cercano que apruebe sin enviar tu paleta.
Actualizado el 25 de julio de 2026
comprobador de contraste de color
¿Qué evalúa este comprobador de contraste de color?
Este comprobador de contraste de color calcula la relación WCAG entre dos colores HEX. Muestra AA y AAA para texto normal y grande, la referencia 3:1 de componentes visibles, una vista previa y una matriz de paleta. El comprobador de contraste de color también busca un primer plano HSB cercano que llegue a 4.5:1 o 7:1. Aprobar ayuda, pero no certifica una página completa.
De un número a una decisión de diseño
El comprobador de contraste de color reúne resultado, contexto visual y corrección.
Vista previa de interfaz
El comprobador de contraste de color aplica la pareja a título, párrafo, botón e insignia. Los errores se ven antes de llegar al sistema de componentes.
Matriz de paleta
Añade de dos a ocho tonos y el comprobador de contraste de color mide cada pareja única. Descubre combinaciones que una prueba aislada no mostraría.
WCAG 2.2 · HEX · HSB
Usar el comprobador de contraste de color
Introduce dos colores HEX. Todo se calcula al instante en tu navegador.
Aprueba · AA texto normal
Vista previa legible
La muestra usa el primer plano para texto, bordes y controles sobre el fondo elegido.
Encontrar un primer plano que apruebe
La búsqueda conserva el matiz cuando puede y ajusta saturación y brillo HSB lo mínimo necesario.
Todos los cálculos permanecen en este navegador.
:root {
--accessible-foreground: #1F2937;
--accessible-background: #F9FAFB;
}
.your-component {
color: var(--accessible-foreground);
background: var(--accessible-background);
}Matriz de contraste de paleta
Añade de dos a ocho colores. Cada celda mide la fila frente a la columna.
| Color | 1#1F2937 | 2#F9FAFB | 3#2563EB | 4#F59E0B |
|---|---|---|---|---|
1#1F2937 | — | 14.05:1AA | 2.84:1Menos de 3:1 | 6.83:1AA |
2#F9FAFB | 14.05:1AA | — | 4.95:1AA | 2.06:1Menos de 3:1 |
3#2563EB | 2.84:1Menos de 3:1 | 4.95:1AA | — | 2.41:1Menos de 3:1 |
4#F59E0B | 6.83:1AA | 2.06:1Menos de 3:1 | 2.41:1Menos de 3:1 | — |
Umbrales de contraste WCAG 2.2
El comprobador de contraste de color distingue los umbrales de texto y la referencia 3:1 no textual.
| Uso | Nivel | Relación mínima | Significado |
|---|---|---|---|
| Texto normal | AA | 4.5:1 | Texto por debajo del tamaño grande WCAG. |
| Texto grande | AA | 3:1 | 24 px regular o unos 18.5 px en negrita. |
| Texto normal | AAA | 7:1 | Objetivo mejorado para texto pequeño. |
| Texto grande | AAA | 4.5:1 | Objetivo mejorado para texto grande. |
| UI y gráficos | AA | 3:1 | Información visual necesaria frente a colores adyacentes. |
Revisión de contraste en tres pasos
Usa el comprobador de contraste de color como revisión repetible.
1. Probar los colores de producción
Pega los tokens reales en el comprobador de contraste de color. Evita capturas comprimidas si existe el HEX fuente. Evalúa por separado normal, hover, activo, foco, error, selección y desactivado.
2. Elegir el umbral correcto
Usa 4.5:1 para texto AA ordinario y 7:1 para AAA. El umbral de texto grande exige tamaño y peso correctos. Bordes, iconos e indicadores esenciales siguen la regla no textual 3:1.
3. Verificar el componente final
Después del comprobador de contraste de color, revisa zoom, ambos temas y contenido real. Confirma foco visible, señales sin color y todos los estados. La aritmética mide; la revisión humana interpreta.
Cómo calcula la relación el comprobador de contraste de color
El comprobador de contraste de color linealiza sRGB y aplica los pesos WCAG: 0.2126 rojo, 0.7152 verde y 0.0722 azul. Calcula (L1 + 0.05) / (L2 + 0.05). Colores iguales dan 1:1; blanco y negro, 21:1.
Intercambiar primer plano y fondo no cambia la cifra, pero sí el contexto. Opacidad, degradados, imágenes y mezcla pueden producir píxeles distintos. Compón primero la transparencia y prueba el color visible final en el comprobador de contraste de color.
Por qué aprobar no es un certificado
La conformidad WCAG se aplica a páginas y procesos completos. Un comprobador de contraste de color no sabe si el texto es realmente grande, si un icono comunica información o si el color es la única señal. Tampoco juzga teclado, nombres, roles, orden de foco ni contenido.
Usa el comprobador de contraste de color como una prueba dentro de la auditoría. Registra componente, estado, tokens, umbral, fecha y resultado. Ese historial explica una corrección y hace más seguros los cambios de tema.
Lista de entrega del comprobador de contraste de color
Completa estas comprobaciones antes de aceptar el resultado como evidencia.
- 01
comprobador de contraste de color: Usar los HEX fuente y no muestras de capturas comprimidas.
- 02
comprobador de contraste de color: Revisar por separado los temas claro y oscuro.
- 03
comprobador de contraste de color: Probar estados normal, hover, foco, activo, seleccionado, error y desactivado.
- 04
comprobador de contraste de color: Aplicar 4.5:1 al texto AA ordinario salvo excepción documentada.
- 05
comprobador de contraste de color: Aplicar 7:1 cuando el requisito sea AAA para texto normal.
- 06
comprobador de contraste de color: Confirmar tamaño y peso antes de clasificar texto como grande.
- 07
comprobador de contraste de color: Revisar iconos, límites e indicadores esenciales frente a 3:1.
- 08
comprobador de contraste de color: Componer la transparencia antes de introducir colores visibles.
- 09
comprobador de contraste de color: Medir la zona más débil sobre degradados o imágenes.
- 10
comprobador de contraste de color: Añadir una señal no cromática a errores, enlaces y estados.
- 11
comprobador de contraste de color: Comprobar el foco contra fondos enfocados y no enfocados.
- 12
comprobador de contraste de color: Usar zoom y confirmar que el contenido sigue funcionando.
- 13
comprobador de contraste de color: Probar texto real, no solo una muestra corta.
- 14
comprobador de contraste de color: Registrar componente, estado, tokens, umbral, resultado y fecha.
- 15
comprobador de contraste de color: Elegir parejas aprobadas en la matriz, no combinaciones universales.
- 16
comprobador de contraste de color: Repetir la prueba cuando cambie un token compartido.
- 17
comprobador de contraste de color: Revisar colores forzados si el producto los admite.
- 18
comprobador de contraste de color: Combinar la cifra con pruebas de teclado, lector y revisión visual.
Evidencia WCAG principal
El comprobador de contraste de color sigue la fórmula y los umbrales publicados; las fuentes oficiales son la autoridad.
- WCAG 2.2 1.4.3 establece 4.5:1 para texto AA normal y 3:1 para texto AA grande. Criterios de contraste WCAG 2.2
- WCAG 2.2 1.4.6 establece 7:1 para texto AAA normal y 4.5:1 para texto AAA grande. Criterios de contraste WCAG 2.2
- WCAG 2.2 1.4.11 establece 3:1 para información necesaria de UI y gráficos frente al color adyacente. Contraste no textual WCAG 2.2
El criterio de texto AA indica:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Fuentes del comprobador de contraste de color
Continuar tras el comprobador de contraste de color
Preguntas sobre contraste
¿Qué relación de contraste es buena?
Para texto ordinario, el comprobador de contraste de color usa 4.5:1 como mínimo AA y 7:1 como objetivo AAA. El texto grande usa 3:1 y 4.5:1. La información necesaria de UI suele usar 3:1.
¿3:1 aprueba WCAG AA?
Puede aprobar texto grande e información visual no textual, pero no texto AA ordinario. El comprobador de contraste de color separa cada resultado para evitar una aprobación universal incorrecta.
¿Se puede probar transparencia?
El comprobador de contraste de color recibe HEX sólidos. Compón primero el color transparente sobre el fondo real. En degradados e imágenes, mide la zona local con menor contraste.
¿Cómo funciona el ajuste automático?
El comprobador de contraste de color busca saturación y brillo HSB conservando el matiz cuando puede. Propone un primer plano cercano que llegue al objetivo, pero debes revisarlo dentro del diseño.
¿Aprobar hace accesible toda la página?
No. Un comprobador de contraste de color valida una relación matemática. La accesibilidad completa también requiere semántica, teclado, foco visible, etiquetas, alternativas y pruebas del proceso entero.