Verificador de Accesibilidad de Colores
Ingresa un color de texto y de fondo (códigos hex) para verificar su ratio de contraste y cumplimiento con WCAG.
Este es texto grande y en negrita.
Este es texto de tamaño normal.
21.00:1
Ratio de Contraste
Texto Normal (AA)
Texto Grande (AA)
18pt+ or 14pt+ bold
Componentes UI (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
Cómo usar Verificador de Accesibilidad de Colores
- 1
Introduce dos colores
Indica un color de primer plano (texto) y un color de fondo como códigos hex, por ejemplo #1a1a1a y #ffffff.
- 2
Comprueba el contraste
Haz clic en Comprobar accesibilidad para calcular la relación de contraste entre los dos colores.
- 3
Revisa los resultados WCAG
Consulta las insignias de aprobado o suspenso para AA y AAA en texto normal, texto grande y componentes de interfaz, y observa la vista previa en vivo.
- 4
Ajusta según sea necesario
Intercambia los colores o modifica un valor hex hasta que la combinación cumpla el nivel WCAG que requiere tu proyecto.
El contraste de color WCAG, sin misterios
Qué significa la relación de contraste
El contraste de color se expresa como una relación entre el más claro y el más oscuro de dos colores, que va de 1:1 a 21:1. Una relación de 1:1 significa que los dos colores son idénticos, así que el texto sería completamente invisible sobre su fondo, mientras que 21:1 es el máximo, el contraste entre el negro puro y el blanco puro. Cualquier otra combinación queda en algún punto intermedio. La relación no tiene que ver con qué colores usaste ni con lo distintos que sean sus tonos; es puramente una cuestión de su diferencia de luminosidad, y por eso dos colores que a ti te parecen distintos pueden, aun así, no superar la prueba.
Este único número es la columna vertebral del color accesible, porque predice si el texto será legible para el mayor abanico posible de personas y condiciones. El verificador lo calcula para cualquier par de color de texto y de fondo que introduzcas y compara el resultado con los umbrales publicados.
Los umbrales de AA que debes alcanzar
El nivel AA de WCAG es el listón al que apunta la mayoría de los sitios web y al que hacen referencia muchas leyes de accesibilidad y normas de contratación, así que trátalo como tu base de partida. AA exige una relación de contraste de al menos 4.5:1 para el texto normal del cuerpo y de al menos 3:1 para el texto grande. Esos dos números cubren la mayor parte de las decisiones de diseño cotidianas, y las insignias de esta herramienta te dicen de inmediato si una combinación dada supera cada uno de ellos.
Si una combinación aprueba AA tanto para el texto normal como para el grande, tienes una base sólida y defendible. Si suspende en el texto normal pero aprueba en el grande, todavía puedes usarla, pero solo en tamaños grandes, lo cual es una restricción que conviene decidir de forma deliberada en lugar de descubrirla más tarde.
AAA y qué significa el texto grande
El nivel AAA es el escalón mejorado, pensado para una legibilidad máxima, y eleva el requisito a 7:1 para el texto normal y a 4.5:1 para el texto grande. No se espera AAA para sitios enteros y a menudo resulta poco práctico para las paletas de marca, pero es un objetivo digno para la lectura de textos largos, los contenidos críticos y los públicos con baja visión. El verificador informa de AAA junto a AA para que veas cuánto margen tiene una combinación.
El texto grande tiene una definición precisa que sorprende a la gente: significa aproximadamente 18pt y más, o 14pt y más cuando es negrita, lo que se traduce en unos 24px en redonda o 18.66px en negrita. La razón de que el umbral sea más bajo es sencillamente que las letras más grandes y de mayor peso siguen siendo legibles con menos contraste. Cualquier cosa más pequeña que ese límite debe cumplir la relación más estricta del texto normal, así que no des por hecho que un encabezado de aspecto grande cumple sin comprobar el tamaño y el grosor reales.
Por qué el contraste importa para los usuarios reales
Un contraste adecuado no es un trámite para marcar una casilla; determina si las personas reales pueden usar tu interfaz. Los usuarios con baja visión, algo que se vuelve más común con la edad, dependen de él directamente, y también lo hace cualquiera que lea una pantalla bajo un sol intenso, en una pantalla tenue o barata, o estando cansado. El contraste también interactúa con las deficiencias en la visión del color: como la relación se basa en la luminosidad y no en el tono, una combinación que dependa de una diferencia de rojo frente a verde puede venirse abajo para alguien que no distingue esos tonos, mientras que una fuerte diferencia de luminosidad sigue leyéndose.
Ese último punto lleva consigo un corolario que vale la pena enunciar con claridad: nunca te fíes solo del color para transmitir significado. Combina el color con texto, iconos, subrayados o formas de modo que la información sobreviva tanto a un contraste bajo como al daltonismo.
Cómo se calcula la relación
Las matemáticas detrás de la insignia parten de la luminancia relativa, una medida de lo brillante que parece cada color al ojo humano. No es un promedio plano de los canales rojo, verde y azul, porque el ojo es mucho más sensible al verde que al azul, así que el verde se pondera más y el azul menos. Cada canal también pasa primero por una pequeña corrección gamma para que el resultado siga la percepción en lugar de la señal en bruto.
Una vez que ambos colores tienen un valor de luminancia, la relación de contraste es la luminancia más clara más una pequeña constante, dividida por la luminancia más oscura más esa misma constante. La constante mantiene la fórmula estable cerca del negro. No necesitas hacer esto a mano, pero saber que es la luminancia, y no el tono, lo que determina el resultado explica por qué elegir simplemente colores que parecen distintos no basta.
El contraste de elementos no textuales y de la interfaz
Las reglas de contraste no se limitan al texto. WCAG también establece un mínimo de 3:1 para los límites visuales de los componentes interactivos y los gráficos significativos, lo que el verificador señala como componentes de la interfaz. Eso abarca el borde de un campo de texto, el contorno de un botón, la marca dentro de una casilla de verificación, los indicadores de foco y las partes de un icono o un gráfico que un usuario debe percibir para entenderlo. Un borde gris tenue en un campo sobre una tarjeta blanca es un fallo clásico de esta regla, aun cuando el texto de la etiqueta de su interior aprueba con facilidad.
Diseñar los controles para que superen 3:1 frente a su entorno significa que las personas pueden realmente encontrarlos y manejarlos, no solo leer las palabras que tienen al lado. Pon a prueba los bordes y los estados del componente, no solo su texto.
Fallos comunes y cómo corregirlos
Unos cuantos patrones fallan una y otra vez. El texto de marcador de posición o secundario en gris claro sobre blanco es el más común; valores como un gris medio cercano a #999999 sobre blanco quedan por debajo de 4.5:1 y hay que oscurecerlos. Los colores de marca son otro reincidente, sobre todo los azules, verdes y naranjas de tono medio usados para el texto del cuerpo o para texto blanco sobre un botón de color, donde la combinación a menudo se queda justo por debajo de AA. Los bordes finos y claros sobre fondos claros también incumplen de forma habitual el umbral de 3:1 de la interfaz.
Las correcciones suelen ser pequeñas. Oscurece el color de texto o aclara el fondo hasta que la relación supere la línea, lo que en términos de HSL a menudo significa ajustar la luminosidad en una cantidad moderada manteniendo el tono intacto para que la marca siga reconociéndose. Para texto sobre una imagen o un degradado recargados, añade detrás un velo sólido o semitransparente para que incluso la región del peor caso apruebe. Introduce aquí tus colores reales, observa cómo se actualizan la relación y las insignias de AA y AAA, y ve ajustando los valores hasta que cada nivel que tu proyecto requiere se ponga en verde.
Preguntas frecuentes
¿Qué es una relación de contraste y qué se considera bueno?
¿Cuál es la diferencia entre AA y AAA?
¿Por qué el texto grande aprueba cuando el texto normal suspende?
¿Qué formato de color debo introducir?
¿El verificador es gratuito y envía mis colores a algún sitio?
Herramientas relacionadas
Sigue trabajando con estas prácticas herramientas