Comprobador de Contraste de Colores Gratis ✅
¡Asegúrate de que tus colores sean fáciles de leer y accesibles! Verifica el contraste entre tus colores primarios y secundarios para cumplir con los estándares WCAG.
Ejemplo de texto primario
Ratio de contraste:
3.28Texto normal:
FallidoTexto grande:
AAComponentes UI:
AA
El verificador de contraste de ColorMagic sigue las pautas de accesibilidad de contenido web (WCAG) para garantizar la legibilidad:
Qué exigen de verdad AA y AAA
Una relación de contraste compara el brillo de dos colores. Va de 1:1, donde el texto es invisible sobre su fondo, hasta 21:1 para negro sobre blanco. Las WCAG fijan los umbrales según el tamaño del texto, porque las letras grandes siguen siendo legibles con menos contraste.
AA es el nivel que se espera de la mayoría de los equipos y el que ya está escrito en las leyes de accesibilidad de cada vez más países. AAA es una meta más estricta, que vale la pena para el texto que la gente lee durante mucho rato.
| Se usa para | AA | AAA |
|---|---|---|
| Texto normal (menos de 18.66px en negrita o 24px normal) | 4.5:1 | 7:1 |
| Texto grande (18.66px en negrita o 24px en adelante) | 3:1 | 4.5:1 |
| Iconos, bordes, campos de formulario y otras partes de la interfaz | 3:1 | sin nivel propio |
Las relaciones son simétricas: intercambiar el color del texto y el del fondo da el mismo número. Solo el tamaño del texto cambia el umbral que aplica.
Combinaciones que pasan y combinaciones que no
Cada relación de abajo se mide con la misma función que usa el verificador de arriba. Fíjate en lo poco que tiene que cambiar un color para pasar de reprobar a aprobar.
- Ejemplo de texto primario#1f2937 / #ffffff14.68:1AAA
- Ejemplo de texto primario#ffffff / #5576ff3.87:1Solo texto grande
- Ejemplo de texto primario#6b7280 / #f3f4f64.39:1Solo texto grande
- Ejemplo de texto primario#ffffff / #b91c1c6.47:1AA
- Ejemplo de texto primario#111827 / #fde68a14.24:1AAA
- Ejemplo de texto primario#ffffff / #facc151.53:1Fallido
La segunda combinación es el color de botón del propio ColorMagic: el blanco encima pasa para texto grande, pero no para texto de lectura. Es un fallo por poco muy común en colores de marca elegidos antes de revisar el contraste.
Cómo arreglar una combinación que no pasa
- Oscurece el texto en vez de aclarar el fondo; suele alterar menos el diseño y mover más la relación.
- El texto gris sobre un fondo gris claro es el fallo por poco más frecuente. Baja uno o dos pasos en la escala de grises y pasa.
- El amarillo, el lima y el cian son tan luminosos que casi nunca admiten texto blanco encima. Usa un texto casi negro.
- Reserva los colores de marca para titulares grandes, botones y acentos, y usa una versión más oscura del mismo tono para el texto de lectura.
Preguntas frecuentes
¿Qué relación de contraste necesito?
4.5:1 para el texto normal y 3:1 para el texto grande o los elementos de interfaz, para cumplir WCAG AA. Para AAA son 7:1 y 4.5:1. Si solo vas a recordar un número, que sea 4.5:1.
¿El contraste también aplica a botones e iconos?
Sí. Cualquier parte de la interfaz que haya que ver para poder usarla —el borde de un botón, el contorno de un campo, un icono con significado— necesita al menos 3:1 contra lo que tiene detrás. Los gráficos decorativos y los controles desactivados quedan fuera.
¿Siempre es mejor una relación alta?
No siempre. El negro puro sobre blanco puro llega a 21:1 y puede resultar duro en lecturas largas; a algunas personas con dislexia o sensibilidad a la luz les incomoda. Un gris muy oscuro sobre un blanco roto sigue cumpliendo AAA y se lee mejor.
¿Y el texto sobre una foto o un degradado?
Mídelo contra el punto más claro y el más oscuro que atraviesa el texto, y asegúrate de que ambos pasen. En la práctica eso suele significar poner una capa sólida o semitransparente detrás del texto.