Verificador de Contraste
Verifica si tus colores de texto y fondo cumplen los estandares de accesibilidad WCAG. Calcula la relacion de contraste para niveles AA y AAA.
Caracteristicas principales
- Cálculo del ratio de contraste en tiempo real
- Comprobación de cumplimiento WCAG 2.1 AA y AAA
- Soporte para estándares de texto normal y grande
- Intercambio de colores y vista previa en vivo
Guide
La accesibilidad por contraste de color determina si el texto de tu sitio web es legible para todo el mundo, incluidas las personas con discapacidades visuales. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones de contraste específicas que el texto debe cumplir para considerarse accesible. No cumplir estos estándares significa que algunos visitantes no pueden leer tu contenido y, en muchas jurisdicciones, significa que tu sitio no cumple los requisitos legales de accesibilidad. Esta guía explica cómo funcionan las relaciones de contraste, qué exige WCAG y cómo arreglar problemas de contraste sin comprometer tu diseño. Una relación de contraste compara la luminancia relativa de dos colores en una escala de 1:1 (sin contraste, ambos colores idénticos) a 21:1 (contraste máximo, negro puro sobre blanco puro). La luminancia relativa es una medida de lo brillante que parece un color al ojo humano, calculada a partir de los valores RGB del color usando una fórmula que tiene en cuenta cómo la visión humana percibe distintas longitudes de onda. El rojo, el verde y el azul contribuyen de forma distinta al brillo percibido, con el verde contribuyendo más y el azul menos. La fórmula es: L = 0.2126 * R + 0.7152 * G + 0.0722 * B, donde R, G y B se linealizan desde sus valores sRGB. El paso de linealización convierte los valores sRGB codificados en gamma a valores de luz lineal aplicando una función de transferencia. La relación de contraste en sí se calcula como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. El valor 0.05 tiene en cuenta la luz ambiental. Esta fórmula produce el familiar formato de ratio. Por ejemplo, el blanco puro tiene una luminancia de 1.0 y el negro puro tiene una luminancia de 0.0, lo que da una relación de contraste de (1.0 + 0.05) / (0.0 + 0.05) = 21:1. WCAG define dos niveles de conformidad para el contraste. El nivel AA es el requisito base para la mayoría de los sitios web. El nivel AAA es un estándar más estricto que proporciona mejor legibilidad. Para texto de tamaño normal (menor de 18pt o menor de 14pt en bold), el nivel AA exige una relación de contraste de al menos 4.5:1 y el nivel AAA exige 7:1. Para texto grande (18pt o más, o 14pt bold o más), el nivel AA exige 3:1 y el nivel AAA exige 4.5:1. Estos umbrales se basan en investigaciones sobre legibilidad para personas con visión moderadamente baja, aproximadamente agudeza 20/40, que es el umbral típico de pérdida de visión para adultos mayores. La excepción de texto grande existe porque las letras más grandes son inherentemente más fáciles de leer. A tamaños mayores, los trazos más gruesos y las contraaberturas más anchas hacen que los caracteres sean más distinguibles incluso con menor contraste. Es por esto que los encabezados, el texto principal y otro texto display grande pueden usar una relación de 3:1 bajo el cumplimiento AA mientras que el texto de cuerpo exige 4.5:1. En términos CSS, 18pt equivale a 24px con la configuración por defecto del navegador, y 14pt bold equivale aproximadamente a 18.66px bold. Si no estás seguro de si tu texto califica como grande, aplica la relación más estricta de 4.5:1 para estar seguro. Los elementos no textuales también tienen requisitos de contraste bajo el Criterio de Conformidad 1.4.11 de WCAG 2.1 (Contraste no textual). Los componentes de interfaz de usuario (botones, entradas de formulario, indicadores de foco) y los objetos gráficos (iconos, elementos de gráficos) que son necesarios para entender el contenido deben tener al menos una relación de contraste de 3:1 frente a los colores adyacentes. Un borde de botón gris claro sobre un fondo blanco que cae por debajo de 3:1 hace que el botón sea difícil de identificar como un elemento cliqueable, particularmente para usuarios con baja visión. Los indicadores de foco son especialmente importantes: los usuarios de teclado dependen de estilos de foco visibles para navegar, y esos estilos de foco deben cumplir la relación de 3:1 frente al contenido circundante. El daltonismo afecta aproximadamente al 8% de los hombres y al 0,5% de las mujeres de ascendencia del norte de Europa, con una prevalencia variable en otras poblaciones. La forma más común es el daltonismo rojo-verde (deuteranopía y protanopía), donde los rojos y los verdes parecen similares. El daltonismo azul-amarillo (tritanopía) es menos común. El daltonismo completo (acromatopsia) es raro. Los cálculos de relación de contraste basados en la luminancia funcionan independientemente de la percepción del color porque miden la diferencia de brillo, no la diferencia de tono. Sin embargo, depender únicamente del color para transmitir información (rojo para error, verde para éxito) crea problemas para los usuarios daltónicos independientemente de la relación de contraste. Proporciona siempre señales visuales adicionales como iconos, etiquetas de texto o patrones junto con la codificación por color. El modo oscuro introduce consideraciones adicionales de contraste. Muchos diseñadores crean temas oscuros simplemente invirtiendo los colores, pero esto a menudo produce resultados pobres. Texto blanco puro (#FFFFFF) sobre fondos negros puros (#000000) crea el contraste máximo (21:1), pero este nivel de contraste puede causar fatiga visual y halación (un efecto de resplandor alrededor del texto claro sobre fondos oscuros) para algunos usuarios. Un contraste ligeramente reducido, como #E0E0E0 sobre #121212, es más cómodo mientras sigue superando los requisitos AAA de WCAG. Las pautas de tema oscuro del Material Design de Google recomiendan usar #121212 como color de superficie y reducir la opacidad del texto en lugar de usar blanco puro. El texto primario usa un 87% de opacidad, el secundario un 60% y el texto deshabilitado un 38%. Los colores semitransparentes complican la comprobación de contraste. Cuando usas colores rgba() o hsla() con valores alfa inferiores a 1, el color renderizado real depende de lo que haya detrás. El texto blanco al 70% de opacidad sobre un fondo oscuro tiene un contraste efectivo distinto que el mismo texto sobre un fondo claro. Al comprobar el contraste de texto semitransparente, necesitas calcular el color compuesto (el color real que ve el usuario después de aplicar la transparencia contra el fondo). La fórmula mezcla el primer plano y el fondo según el valor alfa: compuesto = primer plano * alfa + fondo * (1 - alfa), aplicado a cada canal. Comprueba siempre el resultado compuesto, no el color transparente de forma aislada. Los fondos de degradado crean un contraste variable a lo largo del área de texto. Si el texto está sobre un degradado que transiciona de azul oscuro a azul claro, la relación de contraste difiere en los bordes izquierdo y derecho del texto. WCAG exige que la relación de contraste se cumpla en cada punto donde aparece texto. Comprueba el contraste en el punto más débil, que es donde el fondo está más cercano en luminancia al color del texto. Si el degradado va de #003366 a #6699CC y tu texto es blanco, comprueba el contraste contra #6699CC porque ahí es donde será más bajo. Para degradados radiales, comprueba múltiples puntos a lo largo del área de texto. Los fondos de imagen presentan el mayor desafío de contraste. El texto sobre fotografías o fondos estampados tendrá un contraste distinto en cada píxel. Las soluciones son: colocar una superposición sólida o semitransparente entre la imagen y el texto, usar una sombra de texto o contorno para asegurar la legibilidad, o restringir el texto a zonas de la imagen con color consistente. Un patrón común es una superposición de degradado oscuro en la parte inferior de una imagen principal donde aparece texto. El degradado oscurece la imagen lo suficiente para crear un contraste suficiente con el texto blanco. Para superposiciones, rgba(0, 0, 0, 0.5) normalmente lleva la mayoría de las imágenes al cumplimiento WCAG AA con texto blanco, pero verifica con tus imágenes específicas. Los espacios de color y los cálculos de contraste son más complejos de lo que la mayoría de las herramientas reconocen. La fórmula de contraste WCAG estándar usa la luminancia relativa en el espacio de color sRGB. Esta fórmula tiene limitaciones conocidas. Puede sobreestimar el contraste de pares de colores muy oscuros y subestimar el contraste de pares de colores claros. Las investigaciones han demostrado que un texto azul oscuro (#00007E) sobre un fondo negro técnicamente supera WCAG AA pero es extremadamente difícil de leer en la práctica. El APCA (Algoritmo de Contraste Perceptual Avanzado) es un enfoque más nuevo desarrollado para WCAG 3.0 que tiene en cuenta la percepción visual humana con mayor precisión, incluido el efecto de polaridad (el texto oscuro sobre fondos claros se percibe de forma distinta que el texto claro sobre fondos oscuros). Aunque WCAG 2.x y su fórmula basada en sRGB siguen siendo el estándar legal vigente, APCA proporciona una evaluación más precisa a nivel perceptual. El modelo APCA asigna distintos requisitos de contraste según el tamaño y peso de la fuente, creando una matriz de valores mínimos de contraste en lugar del enfoque de umbral binario de WCAG 2.x. Por ejemplo, el texto de 14px en peso normal necesita un valor de contraste APCA más alto que el texto de 24px bold. APCA también maneja el problema de polaridad: el texto claro sobre fondos oscuros requiere valores de contraste distintos que el texto oscuro sobre fondos claros. Aunque APCA aún no es el estándar oficial, entenderlo te ayuda a tomar mejores decisiones de contraste, especialmente en casos límite donde WCAG 2.x produce resultados cuestionables. Arreglar los fallos de contraste normalmente implica uno de tres enfoques: oscurecer el texto, aclarar el fondo, o ambos. Al ajustar colores, mantente dentro de tu paleta de marca modificando el valor de luminosidad en el espacio de color HSL en lugar de cambiar el tono o la saturación. Si tu azul de marca es hsl(210, 80%, 55%) y falla el contraste contra el blanco, reducir la luminosidad a hsl(210, 80%, 40%) puede superarlo mientras sigue siendo reconociblemente tu azul de marca. Los pequeños ajustes de luminosidad a menudo resuelven problemas de contraste sin requerir un rediseño completo. En el espacio de color OKLCH, estos ajustes producen resultados aún más uniformes a nivel perceptual. Las propiedades personalizadas CSS hacen práctico el tematizado con conciencia de contraste. Define tus colores como valores HSL en propiedades personalizadas, luego crea variantes de tema claro y oscuro que cumplan los requisitos de contraste. Por ejemplo: --brand-primary: hsl(210, 80%, 40%) para tema claro y --brand-primary: hsl(210, 80%, 70%) para tema oscuro. Ambos usan el mismo tono y saturación pero distintos valores de luminosidad optimizados para sus respectivos fondos. Este enfoque escala a sistemas de diseño completos con decenas de tokens de color. Mantienes la consistencia de marca mientras cumples los requisitos de accesibilidad en cada tema. La integración en el sistema de diseño es donde la comprobación de contraste se vuelve más valiosa. En lugar de comprobar elementos individuales de la página, define tus tokens de color y verifica que cada combinación de texto-sobre-fondo en tu sistema de tokens supera los requisitos WCAG. Documenta las combinaciones aprobadas en una matriz de contraste que muestre qué colores de texto son seguros sobre qué colores de fondo. Luego, cuando los desarrolladores construyen componentes, seleccionan de pares de color pre-aprobados y el cumplimiento del contraste está garantizado por el sistema en lugar de comprobado por instancia. Así es como grandes organizaciones como Google, Microsoft y Adobe manejan el contraste a escala. Construir una matriz de contraste implica listar todos tus colores de fondo en la parte superior y todos tus colores de texto en el lateral, luego calcular la relación de contraste para cada intersección. Marca cada celda como AA superado, AAA superado o fallo. Esta matriz se convierte en un documento de referencia para todo tu equipo. Cuando un diseñador especifica una combinación de color, puede comprobar la matriz al instante. Cuando un desarrollador implementa un componente, la matriz le dice qué tokens de color son seguros juntos. Las pruebas automatizadas detectan problemas de contraste pronto. Herramientas como axe-core, Lighthouse y Pa11y escanean páginas renderizadas y marcan elementos que fallan los requisitos de contraste WCAG. Integra estas en tu pipeline CI/CD para que las regresiones de contraste se detecten antes del despliegue. La limitación de las herramientas automatizadas es que no pueden evaluar texto sobre imágenes, degradados o fondos que cambian dinámicamente. La comprobación manual con una herramienta de comprobación de contraste sigue siendo necesaria para estos casos. Un enfoque integral usa pruebas automatizadas para la mayoría de los casos y comprobación manual para los casos límite que la automatización no puede manejar. El cumplimiento legal impulsa gran parte de la urgencia en torno a la accesibilidad por contraste. La Americans with Disabilities Act (ADA) en Estados Unidos, la European Accessibility Act en la UE, la Accessibility for Ontarians with Disabilities Act en Canadá y leyes similares en otras jurisdicciones exigen directamente el cumplimiento de WCAG o han sido interpretadas por los tribunales para exigirlo. Las demandas por accesibilidad web han aumentado significativamente año tras año, con los fallos de contraste siendo uno de los problemas más comúnmente citados. Cumplir WCAG AA es el estándar legal ampliamente aceptado. Las organizaciones en industrias reguladas (gobierno, sanidad, educación, finanzas) se enfrentan a requisitos más estrictos y a una aplicación más activa. Más allá del cumplimiento legal, un buen contraste es buen diseño. El texto que es fácil de leer convierte mejor, retiene a los visitantes más tiempo y reduce las tasas de rebote. Los usuarios que leen en el móvil con luz solar brillante, los usuarios mayores con una visión naturalmente declinante, los usuarios en monitores de baja calidad con mala reproducción de color y los usuarios que simplemente están cansados se benefician todos de un contraste fuerte. Diseñar para los límites de la capacidad humana (baja visión, entornos difíciles) produce diseños que funcionan mejor también para todos los demás en el centro. Los estudios han demostrado que el texto de mayor contraste reduce el tiempo de lectura y mejora la comprensión en todos los usuarios, no solo en aquellos con discapacidades visuales. Probar tus decisiones de contraste en condiciones reales significa comprobar en múltiples dispositivos, en varias condiciones de iluminación y con contenido real en lugar de texto de marcador de posición. Un par de colores que supera la comprobación matemática de contraste podría seguir siendo difícil de leer si la fuente es fina, el texto es pequeño o el interletraje es ajustado. La relación de contraste es un mínimo necesario, no una garantía de legibilidad. Combina un contraste adecuado con un tamaño de fuente apropiado (mínimo 16px para texto de cuerpo), un peso adecuado (regular o medio, no light o thin) y un espaciado apropiado (interlínea de 1,5 o más) para los mejores resultados. Los errores comunes de contraste incluyen el texto de marcador de posición en entradas de formulario (a menudo gris claro sobre blanco, fallando los requisitos de contraste), el texto de botones deshabilitados (todavía necesita ser distinguible, aunque no cumpla los requisitos completos de contraste), el texto de enlace que depende solo del color para distinguirse del texto circundante (WCAG exige un indicador visual adicional como subrayado a menos que el contraste del enlace frente al texto circundante sea de al menos 3:1) y el texto sobre fondos decorativos donde el contraste varía según la posición. La accesibilidad del color de marca es un desafío frecuente. Los equipos de marketing eligen los colores de marca por impacto emocional y atractivo visual, no por cumplimiento WCAG. Un color de marca naranja brillante (hsl(30, 100%, 50%)) tiene una relación de contraste de solo 2,14:1 frente al blanco, muy por debajo del requisito AA de 4,5:1 para texto normal. La solución es crear variantes accesibles de los colores de marca. Mantén el tono, ajusta la luminosidad. hsl(30, 100%, 35%) sigue siendo reconociblemente naranja pero supera AA frente al blanco con 4,6:1. Crea una paleta de colores de marca con colores primarios para texto grande y elementos decorativos (contraste menor aceptable) y variantes ajustadas para texto de cuerpo, enlaces y componentes de interfaz (deben superar AA). La visualización de datos y los gráficos presentan desafíos de contraste únicos. Cada serie de datos en un gráfico necesita ser distinguible de las series adyacentes y del fondo. Con cinco o más series de datos, encontrar colores que todos contrasten suficientemente entre sí y con el fondo es difícil. Las paletas seguras para daltónicos (como las de ColorBrewer o la paleta Okabe-Ito) están diseñadas específicamente para este propósito. Más allá del color, usa patrones, texturas o etiquetas directas para distinguir las series de datos. Los gráficos de líneas pueden usar distintos patrones de guiones. Los gráficos de barras pueden usar sombreado diagonal. Los diagramas de dispersión pueden usar formas distintas. El contraste en distintos entornos de iluminación varía drásticamente. Un par de colores que es cómodamente legible en una oficina tenue se vuelve apenas visible con luz solar directa. Los usuarios móviles se encuentran frecuentemente con condiciones exteriores brillantes. Las relaciones de contraste altas proporcionan un margen frente a los factores ambientales. Un par exactamente a 4,5:1 (el mínimo AA) es legible en condiciones controladas pero puede fallar con luz solar brillante. Apuntar a 5:1 o 6:1 proporciona un margen que tiene en cuenta las condiciones de visualización del mundo real. Para elementos críticos de la interfaz (navegación, llamadas a la acción, mensajes de error), erra hacia un contraste más alto. La gestión del color y las diferencias entre dispositivos afectan a cómo los usuarios perciben el contraste. Un color sRGB en una pantalla de gama amplia (P3 o Adobe RGB) puede parecer ligeramente distinto al previsto. Los monitores baratos de panel TN muestran los colores de forma distinta que las pantallas IPS u OLED. Los ajustes de brillo de la pantalla cambian el contraste percibido. Los filtros de luz azul y el modo nocturno tiñen la pantalla de cálido, reduciendo el contraste percibido de los colores fríos. Ninguno de estos factores cambia la relación WCAG calculada, pero afectan a la experiencia visual real. Probar en múltiples dispositivos y en múltiples condiciones detecta problemas que los cálculos matemáticos pasan por alto. Los requisitos de contraste para texto incrustado en imágenes son los mismos que para texto en vivo. Si tu imagen principal contiene texto integrado en el archivo de imagen (no texto HTML), ese texto todavía necesita cumplir los requisitos de contraste WCAG. La diferencia es que no puedes ajustar el texto de la imagen con CSS, así que el contraste debe verificarse en la herramienta de edición de imágenes antes de exportar. Las imágenes de previsualización de redes sociales (og:image) a menudo contienen texto que debería ser legible, aunque estas no están cubiertas formalmente por WCAG ya que aparecen en plataformas de terceros. El contraste en tipografía va más allá de los colores de primer plano y fondo. El contraste percibido del texto depende del peso de la fuente, el tamaño de fuente, el interletraje y la interlínea. Las fuentes finas (peso 300 e inferior) necesitan relaciones de contraste más altas que el mismo texto en peso regular o bold porque los trazos más finos son más difíciles de distinguir del fondo. La especificación WCAG no tiene en cuenta el peso de la fuente en sus umbrales (solo el tamaño), así que una relación técnicamente superada puede seguir produciendo texto ilegible si la fuente es demasiado fina. Para texto de cuerpo, usa peso regular (400) o medio (500) como mínimo. Reserva los pesos light y thin para encabezados grandes donde el tamaño compensa la visibilidad reducida del trazo. La auditoría sistemática de contraste en un sitio web grande exige una combinación de herramientas automatizadas y revisión manual. Ejecuta escaneos automatizados (axe-core, Lighthouse) para detectar lo más evidente: colores codificados de forma fija que fallan las relaciones. Luego revisa manualmente el contenido dinámico, las zonas de contenido generado por el usuario, los estados interactivos (hover, focus, active, disabled), los mensajes de error y éxito, el texto de los tooltips y cualquier zona donde el color se determine en tiempo de ejecución. Crea un calendario recurrente de auditoría: trimestral para sitios grandes, mensual durante el desarrollo activo. Haz seguimiento del número de problemas de contraste a lo largo del tiempo para medir el progreso. La herramienta de comprobación de contraste te permite introducir dos colores cualquiera y ver al instante la relación de contraste, el estado de superado o fallado de WCAG AA y AAA tanto para texto normal como grande, y una previsualización visual de la combinación. Úsala durante la fase de diseño para validar las decisiones de color antes de que lleguen al desarrollo, durante la revisión de código para verificar que los colores implementados coinciden con el diseño y durante las auditorías de accesibilidad para identificar y arreglar problemas existentes. La herramienta acepta valores de color hex, RGB y HSL y muestra la luminancia calculada para cada color junto con la relación.
Preguntas frecuentes
¿Qué ratio de contraste se necesita para WCAG AA?
WCAG AA requiere un ratio de contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande (18px+ o 14px+ en negrita).
¿Cuál es la diferencia entre AA y AAA?
AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande. AA es el estándar mínimo recomendado.
