Comprobador de contraste de color para accesibilidad WCAG
El Comprobador de contraste de color mide la relación de contraste entre el color del texto y su fondo, y te dice al instante si la combinación pasa WCAG AA y AAA. Está pensado para diseñadores y desarrolladores que quieren interfaces legibles y accesibles sin adivinar.
Ingresa un color de primer plano (texto) y un color de fondo con el selector o un código HEX, y la relación se actualiza en vivo junto a insignias de aprobado/reprobado para texto normal, texto grande y componentes de interfaz. Cuando una combinación no alcanza el umbral, el comprobador propone alternativas accesibles y simula cómo lucen los colores para las personas con deficiencia en la visión de color.
Cómo comprobar el contraste de color
Ingresa tus colores
Define los colores de primer plano (texto) y fondo. Pulsa un cuadro de color para abrir el selector nativo, o escribe un código HEX directamente como #1F2937 o 1F2937.
Lee los resultados
Mira cómo la relación de contraste (desde 1:1 hasta 21:1) se actualiza al instante, con insignias de aprobado/reprobado para texto normal, texto grande y componentes de interfaz en AA y AAA, además de una vista previa en vivo de texto real sobre tu fondo.
Corrige el contraste bajo
Si una combinación reprueba AA en texto normal, abre Alternativas sugeridas y pulsa cualquier muestra para aplicar un color accesible. Usa Intercambiar colores para invertir primer plano y fondo y probar el caso contrario.
Prueba para daltonismo
Abre Más herramientas para simular protanopía, deuteranopía y tritanopía, o aplica una combinación rápida para comparar emparejamientos comunes con un clic.
Funciones
Cálculo de contraste en tiempo real
La relación de contraste se recalcula en el momento en que cambias un color, así obtienes retroalimentación instantánea de aprobado o reprobado mientras diseñas.
Comprobación completa de cumplimiento WCAG
Prueba texto normal (AA 4.5:1, AAA 7:1), texto grande (AA 3:1, AAA 4.5:1) y componentes de interfaz (AA 3:1) todo a la vez.
Sugerencias de color inteligentes
Cuando una combinación reprueba AA, obtén hasta cuatro alternativas accesibles que muestran el color ajustado, su relación y si cambió el texto o el fondo. Pulsa una para aplicarla.
Vista previa en vivo
Mira tus colores en un título de muestra real, texto de párrafo, texto de leyenda pequeño y un botón con borde antes de decidirte por ellos.
Simulación de daltonismo
Previsualiza tu combinación tal como se ve con protanopía, deuteranopía o tritanopía para asegurarte de que funcione para todos.
Combinaciones rápidas
Carga emparejamientos comunes como negro sobre blanco o blanco sobre negro con un solo clic para partir de una base conocida.
Intercambiar colores
Cambia al instante el primer plano y el fondo para probar el escenario de contraste inverso.
Copiar al portapapeles
Copia cualquier valor de color con un clic para pegarlo directo en tu herramienta de diseño o tu código.
Preguntas frecuentes
¿Qué es una buena relación de contraste de color?
Para el texto normal, apunta a por lo menos 4.5:1 (WCAG AA) o 7:1 (AAA) para mayor accesibilidad. El texto grande — de 18px en adelante, o 14px en negrita — solo necesita 3:1 para pasar AA.
¿Qué relación de contraste cumple con WCAG AA?
WCAG AA exige 4.5:1 para el texto normal y 3:1 para el texto grande. El mismo mínimo de 3:1 aplica a los componentes de interfaz como íconos, bordes y elementos interactivos.
¿Cómo se calcula la relación de contraste?
El comprobador usa la fórmula oficial de WCAG. Calcula la luminancia relativa de cada color, luego divide el valor más claro más 0.05 entre el valor más oscuro más 0.05, lo que da una relación entre 1:1 y 21:1. Los resultados coinciden con otras herramientas de accesibilidad y con las herramientas de desarrollo del navegador.
¿Cuál es la diferencia entre AA y AAA?
AA es el estándar mínimo al que apunta la mayoría de los sitios web y es la referencia habitual para el cumplimiento al estilo de la ADA. AAA es un nivel más estricto que mejora aún más la legibilidad, pero puede ser difícil de alcanzar con algunas paletas. La mayoría de los equipos apunta a AA y busca AAA en el texto de párrafo donde puede.
¿Por qué mi diseño reprueba incluso con texto oscuro sobre blanco?
El texto gris claro (alrededor de #999999 o más claro) sobre blanco a menudo queda por debajo de 4.5:1. Un color puede parecerte "suficientemente oscuro" y aun así no alcanzar la relación, y por eso es justo importante una comprobación numérica.
¿Cómo corrijo el contraste bajo?
Oscurece el texto o aclara el fondo hasta que la relación supere el umbral. El panel de Alternativas sugeridas lo hace por ti: calcula colores accesibles que alcanzan AA y te deja aplicar uno con un clic.
¿Qué formato de color acepta el comprobador?
Ingresa los colores como códigos HEX (con o sin el # inicial), o usa el selector de color nativo. Para probar un valor RGB o HSL, conviértelo primero a HEX con cualquier conversor de color.
¿Para qué sirve la simulación de daltonismo?
Cerca del 8% de los hombres y el 0.5% de las mujeres tienen alguna deficiencia en la visión de color. La simulación muestra tus colores tal como se ven con protanopía, deuteranopía o tritanopía, lo que te ayuda a confirmar que el diseño sigue leyéndose con claridad para esos usuarios.
Aún no hay comentarios. ¡Sé el primero en comentar!