Verificador de Contraste de Color
Comprueba la relación de contraste WCAG entre un color de texto y un color de fondo, con resultados claros de aprobado/no aprobado AA/AAA para texto normal y grande.
Un verificador de contraste de color WCAG gratuito para texto y fondo. Introduce un color de texto y un color de fondo, y esta herramienta calcula la relación de contraste exacta y muestra si esa combinación de colores pasa el nivel AA y el nivel AAA de WCAG, tanto para texto normal como para texto grande. Útil para comprobar una combinación de colores concreta antes de usarla en un diseño o un sitio web. Todo se ejecuta en tu navegador y no se guarda nada.
Cómo usar esta herramienta
- 01Introduce un color de textoElige un color o escribe un código HEX para tu texto.
- 02Introduce un color de fondoElige un color o escribe un código HEX para el fondo sobre el que se apoya.
- 03Lee el resultadoLa relación de contraste exacta y los resultados de aprobado/no aprobado AA/AAA para texto normal y grande aparecen al instante.
¿Cuándo es útil?
- Comprobar una combinación de colores concretaAntes de dar por definitiva una combinación de color de texto y de fondo, confirma que cumple el nivel de contraste de accesibilidad que buscas.
- Elegir entre dos tonos parecidosCompara la relación exacta de dos colores candidatos para ver cuál supera el umbral que necesitas.
- Documentar decisiones de accesibilidadObtén la relación numérica precisa para dejarla anotada en un sistema de diseño o en una auditoría de accesibilidad.
Ejemplos
- Texto negro sobre blanco#000000 sobre #FFFFFF tiene una relación de contraste de 21:1, el máximo posible, y pasa todos los niveles.
- Un gris medio que apenas pasa AA#767676 sobre blanco tiene una relación de aproximadamente 4,54:1: pasa AA para texto normal, pero se queda corto del 7:1 que exige AAA para texto normal.
- Un gris más claro que solo funciona como texto grande#949494 sobre blanco tiene una relación de aproximadamente 3,03:1: pasa AA para texto grande (que solo necesita 3:1), pero no pasa AA para texto normal (que necesita 4,5:1).
Cómo se calcula la relación de contraste
La relación se calcula usando la fórmula de luminancia relativa de WCAG para cada color, y luego se combina como (luminancia más clara + 0,05) ÷ (luminancia más oscura + 0,05). Esto da una relación entre 1:1 (sin contraste, colores idénticos) y 21:1 (contraste máximo, negro puro sobre blanco puro). Es el mismo cálculo que definen los criterios de éxito de contraste de WCAG 2.x.
Niveles de WCAG y tamaño de texto
WCAG 1.4.3 (Contraste, Nivel AA, el umbral más usado) exige al menos 4,5:1 para texto normal y al menos 3:1 para texto grande. WCAG 1.4.6 (Contraste, Nivel AAA, un nivel más estricto y reforzado) exige al menos 7:1 para texto normal y al menos 4,5:1 para texto grande. WCAG define "texto grande" como al menos 18pt, o al menos 14pt si es negrita (aproximadamente 24px, o unos 19px en negrita, con un tamaño base típico de 16px).
Qué comprueba esta herramienta y qué no
Esta herramienta comprueba la relación de contraste de texto entre exactamente dos colores que tú proporcionas, según los criterios de éxito de contraste de texto AA y AAA de WCAG. No comprueba el contraste de elementos de interfaz que no son texto (como iconos, bordes o indicadores de foco, cubiertos por otro criterio de WCAG distinto), y que una combinación de colores pase esta comprobación no significa que toda una página o sitio web cumpla con WCAG: una revisión de accesibilidad real cubre muchos otros criterios además del contraste de color.
Preguntas frecuentes
¿Qué relación de contraste es buena?
Para la mayoría del texto de cuerpo, WCAG AA exige al menos 4,5:1. Para texto grande (18pt o más, o 14pt o más en negrita), basta con 3:1 para AA. AAA es un nivel más estricto y opcional, reforzado: 7:1 para texto normal y 4,5:1 para texto grande.
¿Qué se considera "texto grande" según WCAG?
Al menos 18pt (unos 24px), o al menos 14pt en negrita (unos 19px en negrita) con un tamaño de fuente base típico de 16px.
¿Pasar AA aquí significa que todo mi sitio web es accesible?
No. Esta herramienta solo comprueba la relación de contraste de texto para los dos colores que introdujiste. Una revisión de accesibilidad completa cubre muchos otros criterios además del contraste de color.
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel base más usado, al que apuntan la mayoría de sitios. AAA es un nivel más estricto y opcional, reforzado, con requisitos de contraste más altos, y no se espera de todas las páginas.
¿Esto comprueba elementos que no son texto, como iconos o bordes?
No. Esta herramienta solo comprueba el contraste de texto. El contraste de componentes de interfaz que no son texto es un criterio de WCAG distinto que esta herramienta no evalúa.
¿Se guardan mis datos?
No. Todo se calcula en tu navegador; nada se envía a un servidor.