Verificador de Contraste de Color
Introduce un color de primer plano y uno de fondo para comprobar la relación de contraste WCAG con insignias AA y AAA de aprobado/suspenso para texto normal y grande.
El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
Cómo funciona
Elige un color de primer plano y uno de fondo usando los selectores de color o introduce valores hexadecimales directamente. La herramienta calcula la luminancia relativa de cada color usando la fórmula WCAG 2.1 — una suma ponderada de los canales sRGB tras la decodificación gamma — y divide la luminancia más brillante por la más oscura (más 0,05 en numerador y denominador para evitar la división por cero con el negro puro). La relación de contraste resultante va de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro).
Cuatro indicadores WCAG muestran aprobado o fallado: AA para texto normal (≥ 4,5:1), AA para texto grande (≥ 3:1), AAA para texto normal (≥ 7:1) y AAA para texto grande (≥ 4,5:1). Un panel de previsualización en vivo muestra frases de ejemplo en texto normal y grande para que puedas verificar visualmente el resultado.
El cálculo corre íntegramente en tu navegador sin viaje de ida y vuelta al servidor, y cada cambio en cualquiera de los dos colores actualiza la relación y la previsualización al instante.
Ejemplo práctico
Comprueba texto gris #767676 sobre fondo blanco: la relación de contraste es exactamente 4,54:1 — aprueba WCAG AA para texto normal (que exige 4,5:1) pero suspende AAA (7:1), y las tarjetas de resultado muestran cada umbral por separado, incluidas las reglas relajadas para texto grande. La barra de escala logarítmica muestra dónde se sitúa el par entre 1:1 y el 21:1 del negro puro sobre blanco. La tarjeta APCA anticipa la métrica de WCAG 3, y el botón de intercambio responde al instante si invertir primer plano y fondo ayuda. La vista previa muestra texto real para que juzgues con tus propios ojos.
Casos de uso
- Comprobar una paleta de colores de marca para el cumplimiento de accesibilidad antes de lanzar un rediseño web
- Elegir colores de botones y enlaces que sigan siendo legibles contra un tema oscuro o claro
- Cumplir los requisitos WCAG 2.1 AA o AAA para la conformidad con la Sección 508, EN 301 549 o ADA
- Revisar una maqueta enviada por un diseñador para marcar texto ilegible antes de comenzar el desarrollo
- Enseñar conceptos de accesibilidad mostrando cómo pequeñas diferencias de luminancia causan grandes fallos de contraste
Preguntas frecuentes
- ¿Cuál es la diferencia entre AA y AAA?
- WCAG define dos niveles de conformidad. AA es el objetivo legal típico: 4,5:1 para texto normal, 3:1 para texto grande. AAA es mejorado: 7:1 normal, 4,5:1 grande. La mayoría de sitios públicos apuntan a AA.
- ¿Qué se considera 'texto grande'?
- Al menos 18pt normal o 14pt negrita (aproximadamente 24px/18,66px en navegadores). Por debajo de eso se aplica el umbral más estricto de 4,5:1.
- Mi relación de contraste es 4,49 — ¿aprueba?
- No. El umbral en WCAG es estrictamente ≥ 4,5:1. La herramienta redondea la relación mostrada a dos decimales pero usa el valor de precisión completa para el juicio de aprobado/fallado.
- ¿Coincide esto con el comprobador de WebAIM?
- Sí — ambos usan la misma fórmula de luminancia WCAG 2.1, así que los resultados son idénticos a la precisión mostrada.
- ¿Se envían mis valores de color a algún lugar?
- No. La relación de contraste se calcula localmente en tu navegador a partir de los colores que introduces.