Verificador de Contraste

Publicidad

Verifica si tus combinaciones de colores cumplen los estandares de accesibilidad WCAG.

Ejemplos:
WCAG 2.2 12.63:1
Puntuación APCA (Lc) Lc 97
El veloz murcielago hindu comia feliz cardillo y kiwi.
Ejemplo de Texto Grande
Texto en negrita a 14pt peso 700
Boton Link text
Nivel WCAG Texto Normal Texto Grande Componentes UI
AA (Requerido)
AAA

Tamanos Minimos de Fuente APCA

Peso300400500600700

Código CSS

Simulación de Daltonismo

El veloz murcielago hindu comia feliz cardillo y kiwi.
Ejemplo de Texto Grande
Publicidad

Acerca de Esta Herramienta

La verificación del contraste de color es el proceso de medir la diferencia de luminancia entre los colores de primer plano y fondo para determinar si el texto sigue siendo legible para todos los usuarios, incluidos aquellos con discapacidades visuales. Las Pautas de Accesibilidad para el Contenido Web (WCAG), desarrolladas por el World Wide Web Consortium (W3C), establecen el estándar internacional de accesibilidad digital y definen umbrales específicos de contraste que todo sitio web y aplicación debería cumplir. WCAG 2.2 especifica dos niveles de conformidad para el contraste. El Nivel AA, el estándar mínimo exigido por la mayoría de las leyes de accesibilidad, requiere un ratio de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande (18pt regular o 14pt negrita). El Nivel AAA, el estándar mejorado recomendado para contenido gubernamental, sanitario y educativo, exige 7:1 para texto normal y 4,5:1 para texto grande. Estos umbrales se basan en investigaciones sobre cómo las personas con baja visión moderada perciben el contenido en pantalla. La accesibilidad es también una obligación legal en muchas jurisdicciones. La Ley de Estadounidenses con Discapacidades (ADA) en Estados Unidos, la Sección 508 de la Ley de Rehabilitación y la norma europea EN 301 549 exigen que el contenido digital sea perceptible por personas con discapacidades. El incumplimiento puede resultar en demandas, multas y la exclusión de una parte significativa de su audiencia. Esta herramienta calcula los ratios de contraste convirtiendo valores sRGB a RGB lineal, calculando la luminancia relativa de cada color con los coeficientes ITU-R BT.709 y aplicando la fórmula WCAG (L1 + 0,05) / (L2 + 0,05). También incluye simulación de daltonismo para protanopia, deuteranopia y tritanopia, ayudando a los diseñadores a verificar que sus elecciones de color funcionen para los aproximadamente 300 millones de personas con deficiencia de visión del color. Todos los cálculos se ejecutan localmente en su navegador.

Fuentes: WCAG 2.2 · SC 1.4.3 · SC 1.4.11

Cómo Usar

  1. Ingresa tus colores de texto (primer plano) y fondo usando los selectores de color o códigos HEX.
  2. Verifica el ratio de contraste y los resultados de cumplimiento WCAG. Verde indica que pasa, rojo que falla.
  3. Usa la simulación de daltonismo para verificar que tus colores funcionan para usuarios con deficiencias visuales.

Cómo Usar

  1. Ingresa tus colores de texto (primer plano) y fondo usando los selectores de color o códigos HEX.
  2. Verifica el ratio de contraste y los resultados de cumplimiento WCAG. Verde indica que pasa, rojo que falla.
  3. Usa la simulación de daltonismo para verificar que tus colores funcionan para usuarios con deficiencias visuales.

Metodología

El cálculo del ratio de contraste sigue el algoritmo WCAG 2.2 con precisión. Primero, el código hexadecimal de cada color se descompone en sus componentes rojo, verde y azul, que luego se normalizan a valores entre 0 y 1 dividiendo por 255. Estos valores lineales pasan por una corrección gamma usando la función de transferencia sRGB: los valores iguales o inferiores a 0,03928 se dividen por 12,92, mientras que los valores mayores usan la fórmula ((valor + 0,055) / 1,055) elevada a la potencia de 2,4. Esta corrección gamma tiene en cuenta la forma no lineal en que las pantallas emiten luz. Luego, la luminancia relativa se calcula usando los coeficientes ITU-R BT.709: L = 0,2126R + 0,7152G + 0,0722B. Estos pesos reflejan la diferente sensibilidad del ojo humano a cada color primario, con el verde contribuyendo mas al brillo percibido. El ratio de contraste final se calcula como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color mas claro. El desplazamiento de 0,05 tiene en cuenta los reflejos de luz ambiental. Los resultados van de 1:1 (colores identicos) a 21:1 (negro puro sobre blanco puro). La herramienta evalua este ratio contra los umbrales AA y AAA tanto para texto normal como grande, proporcionando un resultado claro de cumplimiento o fallo para cada nivel de conformidad.

Fuentes: WCAG 2.2 Luminance · SC 1.4.3

Comprendiendo tus Resultados

Un ratio de contraste de 4,5:1 o superior cumple WCAG AA para texto normal, que es el estándar que la mayoría de sitios web y aplicaciones deben alcanzar. Un ratio de 3:1 cumple AA para texto grande (18pt regular o 14pt negrita en adelante) y también es suficiente para componentes de interfaz como bordes de formularios, iconos e indicadores de enfoque. Para el nivel mejorado AAA, necesita 7:1 para texto normal y 4,5:1 para texto grande. Cuando la herramienta muestra "Falla", significa que usuarios con discapacidades visuales moderadas pueden tener dificultades para leer. Para mejorar el contraste manteniendo la estética de marca, intente oscurecer o aclarar un color incrementalmente en lugar de reemplazarlo por completo. A menudo un cambio de solo 10-15% en luminosidad es suficiente para cruzar el umbral. Los errores comunes incluyen usar texto de marcador de posición gris claro, depender de pesos de fuente delgados que reducen el contraste percibido y pasar por alto el contraste de elementos en estado deshabilitado. Los resultados de la simulación de daltonismo son igualmente importantes. Incluso si sus colores pasan la verificación de contraste, pueden volverse indistinguibles para usuarios con deficiencia de visión del color. Un botón rojo sobre fondo verde podría tener contraste adecuado para visión normal pero aparecer casi idéntico para alguien con deuteranopia. Siempre verifique su diseño en todos los tipos de visión simulados y use indicadores adicionales más allá del color, como iconos, patrones o etiquetas de texto.

Ejemplos Prácticos

Una startup que redisena su sitio web de marketing prueba sus colores de marca (#2563EB texto azul sobre fondo gris claro #F8FAFC) y encuentra un ratio de 5,2:1, cumpliendo AA pero no AAA. Oscurecen el azul a #1D4ED8, logrando 7,1:1 y cumpliendo ambos estandares sin alterar significativamente la identidad de marca. Un desarrollador de aplicaciones de salud verifica el estilo de mensajes de error (texto rojo sobre blanco) y descubre que #EF4444 sobre #FFFFFF solo logra 3,9:1, fallando incluso AA para texto normal. La simulación de daltonismo revela que aparece tenue para usuarios con protanopia. Cambian a #DC2626 y agregan un icono de advertencia. Un disenador de interfaces valida que todas las etiquetas de botones, bordes de formularios e indicadores de enfoque en una libreria de componentes cumplan al menos el requisito de 3:1 para elementos no textuales, asegurando que el texto del cuerpo alcance el umbral AA completo de 4,5:1.

Consejos Practicos para un Diseño Accesible

Comience eligiendo pares de colores de alto contraste y luego construya su paleta alrededor de ellos. Apunte a un contraste de al menos 7:1 para texto del cuerpo incluso cuando solo se requiere AA (4,5:1), ya que esto proporciona un margen de seguridad cómodo. Nunca dependa solo del color para transmitir información. Use iconos, subrayados o etiquetas de texto como indicadores secundarios para no excluir a usuarios daltónicos. Pruebe sus diseños en escala de grises para detectar rápidamente problemas de contraste. Si los elementos desaparecen o se mezclan sin color, el contraste es insuficiente. Compruebe siempre tanto el modo claro como el oscuro. Los temas oscuros a menudo tienen menor contraste efectivo, especialmente con texto de color sobre fondos oscuros. Verifique los estados de hover y focus por separado, ya que estos estados interactivos a veces usan colores más claros que no cumplen los requisitos. Instale extensiones de navegador de accesibilidad como axe DevTools o WAVE para auditar páginas completas, y combine la verificación de contraste con simulación de daltonismo para garantizar una cobertura integral.

Fuentes

Todos los cálculos se realizan localmente en tu navegador. No se envían datos a ningún servidor.

¿Te resultó útil esta herramienta?
¿Quieres contarnos más?
0/500
¿Quieres que te contactemos?
¡Gracias por tu opinión!

Preguntas frecuentes
¿Qué es el ratio de contraste WCAG?
El ratio de contraste WCAG mide la diferencia de luminancia entre dos colores en una escala de 1:1 (sin contraste) a 21:1 (contraste máximo). Las Pautas de Accesibilidad WCAG 2.2 requieren ratios minimos para asegurar que el texto sea legible.
¿Cuales son los requisitos WCAG AA y AAA?
WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt negrita). WCAG AAA requiere 7:1 para texto normal y 4.5:1 para texto grande. AA es el estándar para la mayoria de sitios web.
¿Qué se considera texto grande?
El texto grande se define como 18 puntos (24px) o mas para peso regular, o 14 puntos (18.66px) o mas para texto en negrita. El texto grande tiene requisitos de contraste mas bajos porque es mas fácil de leer.
¿Cómo se calcula el ratio de contraste?
El ratio de contraste se calcula usando la luminancia relativa de dos colores, segun lo definido en el Criterio de Exito 1.4.3 de WCAG 2.2. La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color mas claro y L2 la del mas oscuro. La luminancia relativa tiene en cuenta como el ojo humano percibe el brillo de manera diferente en el espectro de color — el verde parece mucho mas brillante que el azul a la misma intensidad fisica. El ratio resultante va de 1:1 (colores identicos, sin contraste) a 21:1 (negro sobre blanco, contraste máximo). WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande.
¿Cuales son las combinaciones de colores comunes que no cumplen WCAG?
Los fallos mas comunes involucran colores claros sobre fondos blancos o combinaciones de bajo contraste similares. Texto rojo sobre fondos verdes (y viceversa) a menudo falla porque los valores de luminancia son similares a pesar de verse 'diferentes' en tono. Texto gris claro sobre blanco (#999 en #fff = 2.85:1, falla AA) es extremadamente comun en sitios web. Texto amarillo sobre blanco es casi siempre invisible (falla gravemente). Naranja sobre blanco es limite. Texto de marcador de posición en gris claro (#aaa en #fff = 2.32:1) falla WCAG y es un problema de accesibilidad generalizado. En caso de duda, verifica cada combinación texto-fondo, incluyendo estados hover e indicadores de foco.
¿El modo oscuro necesita ratios de contraste diferentes?
No — los mismos requisitos de ratio de contraste WCAG (4,5:1 para texto normal AA, 3:1 para texto grande AA) aplican independientemente de si el diseño usa modo claro u oscuro. Sin embargo, el modo oscuro introduce desafios unicos. Texto blanco sobre negro puro (#fff en #000 = 21:1) en realidad causa incomodidad visual para muchos usuarios debido a la halación — el texto brillante parece sangrar hacia el fondo oscuro, especialmente para personas con astigmatismo. La mejor práctica para el modo oscuro es usar texto blanco apagado sobre fondo gris oscuro (ej., #e0e0e0 en #1a1a1a = 13,28:1), que supera WCAG AAA mientras permanece comodo de leer.
¿Cómo afecta sRGB al cálculo del ratio de contraste WCAG?
WCAG 2.2 define la luminancia relativa usando el estándar de espacio de color sRGB (IEC 61966-2-1). sRGB es el espacio de color predeterminado para la web y la mayoría de las pantallas. Antes de calcular la luminancia, cada canal de color (R, G, B) debe linealizarse usando la función de transferencia sRGB, una corrección gamma que convierte los valores no lineales de la pantalla en intensidad de luz lineal. Específicamente, los valores de canal normalizados (0–1) iguales o inferiores a 0,04045 se dividen por 12,92, mientras que los valores mayores usan la fórmula ((valor + 0,055) / 1,055) elevada a la potencia de 2,4. Esta linealización es esencial porque el brillo de la pantalla no es proporcional al valor de color almacenado. Sin la linealización sRGB, los ratios de contraste serían inexactos, particularmente para colores de rango medio donde la curva gamma tiene el mayor efecto.
¿Cuál es la diferencia entre APCA y el contraste WCAG?
WCAG 2.2 usa una fórmula simple de ratio de luminancia que trata todo el texto igual independientemente del tamaño, peso o si el texto es oscuro sobre claro o claro sobre oscuro. La fórmula produce un ratio de 1:1 a 21:1 con umbrales fijos. APCA (Accessible Perceptual Contrast Algorithm), propuesto para WCAG 3.0, es un modelo más avanzado. Tiene en cuenta la diferencia perceptual entre texto oscuro sobre fondo claro y texto claro sobre fondo oscuro (sensibilidad de polaridad). Produce un valor de Contraste de Luminosidad (Lc) que predice mejor la legibilidad real. APCA también proporciona orientación específica por tamaño de fuente: para un valor Lc dado, recomienda tamaños mínimos de texto en diferentes pesos de fuente. Ambos estándares están disponibles en esta herramienta para comparación.
¿Puedo usar esto como calculadora de ratio de contraste para diseños no web?
Sí. La fórmula del ratio de contraste usa valores universales de luminancia sRGB que se aplican a cualquier medio donde los colores se muestren en pantalla — incluyendo aplicaciones móviles, software de escritorio, señalización digital, quioscos y presentaciones. El cálculo mide la diferencia objetiva de luminancia entre dos colores, una propiedad física independiente del medio. Los umbrales WCAG AA y AAA (4,5:1 y 7:1) se desarrollaron para contenido web, pero el ratio de contraste subyacente es igualmente útil para evaluar la legibilidad en cualquier contexto digital. Las directrices de accesibilidad de Apple y Google Material Design hacen referencia a la misma escala. Para diseño impreso, la misma fórmula proporciona una aproximación útil, aunque los colores impresos dependen de la tinta, el papel y las condiciones de iluminación.
¿Cómo uso este verificador de contraste de color?
Ingrese su color de texto (primer plano) y color de fondo usando los selectores de color, o escriba los códigos HEX directamente. También puede cambiar a entrada RGB o HSL usando las pestañas de formato, o usar el cuentagotas para seleccionar colores directamente de su pantalla. La herramienta muestra instantáneamente su ratio de contraste WCAG 2.2 y puntuación APCA, con insignias de aprobado/fallido para cada nivel. El área de vista previa muestra cómo se ve realmente su texto en diferentes tamaños y pesos. Si sus colores fallan, la herramienta sugiere las alternativas más cercanas que pasan para los niveles AA y AAA. También puede verificar cómo aparece su combinación de colores para personas con diferentes tipos de visión del color. Use el botón de compartir para copiar un enlace con su configuración actual de colores.
¿Mis datos de color son privados al usar esta herramienta?
Sí, completamente. Todos los cálculos de contraste se ejecutan íntegramente en su navegador usando JavaScript. Ningún dato de color, resultado o configuración se envía a ningún servidor. La herramienta funciona sin conexión una vez cargada, y sus elecciones de color nunca se almacenan, rastrean o comparten. Cuando usa la función de enlace compartido, sus colores se codifican en la URL misma — no se cargan en ningún lugar.