Comprobador y simulador de contraste WCAG

tools.accessibility-contrast-simulator.meta_desc

Vista Previa (Live)

El Diseño Accesible Importa

Este es un párrafo de ejemplo para demostrar cómo se renderizan juntos los colores seleccionados. Un buen contraste garantiza la legibilidad para todos.

Aprende más sobre WCAG

Select a simulation mode below to apply filters to the live preview area.

Visión Normal

Protanopía (Sin Rojo)

Deuteranopía (Sin Verde)

Tritanopía (Sin Azul)

Acromatopsia (Sin Color)

Baja Visión (Desenfoque)

Luz Solar Brillante (Bajo Contraste)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

Color del Texto (Primer Plano)

Color de Fondo

Texto Normal

21.00:1

AAA

Texto Grande

AAA

Componentes UI

AAA

Preguntas Frecuentes del Simulador de Contraste de Accesibilidad

La relación de contraste WCAG es una medición matemática de la diferencia en la luminancia (claridad) percibida entre dos colores, expresada como una cifra de 1:1 a 21:1. Asegura que el texto y los componentes de la interfaz de usuario sean lo suficientemente distinguibles de sus fondos para ser legibles por usuarios con variadas capacidades visuales.

Para cumplir con WCAG AA, el texto normal requiere una relación mínima de 4.5:1, mientras que el texto grande (18pt o 14pt negrita) y los componentes de la interfaz de usuario requieren 3.0:1. Para el cumplimiento estricto AAA, el texto normal necesita 7.0:1 y el texto grande requiere 4.5:1.

Sí, la pestaña Simulación Visual aplica filtros de matriz SVG en tiempo real a la vista previa en vivo. Replica con precisión la Protanopía (ceguera al rojo), Deuteranopía (ceguera al verde), Tritanopía (ceguera al azul) y Acromatopsia (monocromatismo), además de simulaciones de desenfoque y luz solar.

No. Este simulador PRO está construido completamente del lado del cliente utilizando JavaScript. Todos los cálculos de color, procesamiento de imágenes y generación de informes ocurren directamente dentro de tu navegador, garantizando privacidad absoluta y ningún almacenamiento de datos en el servidor.

Si los colores seleccionados no superan la prueba WCAG, puedes usar nuestra función de Auto-Corrección. Calcula matemáticamente y sugiere el tono de color más cercano compatible con AA o AAA, permitiéndote mantener la estética de tu marca mientras cumples con los estándares de accesibilidad.

Cómo utilizar el Contrast Checker

Definir los colores de primer plano y de fondo
Introduzca el color del texto (primer plano) y el color de fondo utilizando los selectores de color o escribiendo valores HEX, RGB o HSL. La relación de contraste se actualiza al instante.
Lea su resultado WCAG
La herramienta muestra la relación de contraste (por ejemplo, 5,2:1) y si supera las normas WCAG AA (4,5:1 para texto normal) y AAA (7:1). Los textos grandes (18pt+) tienen umbrales más bajos.
Simular el daltonismo
Cambie a la pestaña Simulador para previsualizar el aspecto de su combinación de colores para usuarios con Deuteranopía, Protanopía, Tritanopía u otros tipos de visión.
Utilice Auto-Fix si es necesario
Si tus colores fallan, haz clic en Autocorregir. La herramienta calcula el tono AA o AAA más cercano conservando al máximo el tono y la saturación.

Relación de contraste de referencia

Requisitos mínimos de contraste de las WCAG 2.1 para las distintas categorías de texto:

Tipo de contenido	WCAG AA	WCAG AAA	Relación de ejemplo
Texto normal (<18pt)	4,5:1 ✓	7:1 ✓	#000 sobre #fff → 21:1
Texto grande (≥18pt negrita)	3:1 ✓	4,5:1 ✓	#333 en #fff → 12,6:1
Componentes e iconos de IU	3:1 ✓	N/A	#767676 en #fff → 4,5:1
Elementos decorativos	No req.	No req.	Imágenes de fondo exentas

Casos de uso común

Revisión del diseño visual y de interfaz de usuario

Pruebe todas las combinaciones de texto y fondo en su sistema de diseño antes de pasarlas a desarrollo, para detectar los fallos con antelación.

Auditorías de accesibilidad

Proporcionar ratios de contraste documentados para los informes de accesibilidad de los clientes y las certificaciones de cumplimiento de las WCAG 2.1 / 2.2.

Pruebas de daltonismo

Simule cómo experimenta su paleta el 8% de los usuarios masculinos para garantizar que no se pierde información crítica para el público daltónico.

Cumplimiento legal

Cumpla los requisitos de accesibilidad digital de la ADA (EE.UU.), la EAA (UE) y la norma EN 301 549 antes del lanzamiento del producto o la licitación pública.

Desarrollador QA

Verifique rápidamente el contraste de las variables de color CSS durante la revisión del código, sin cambiar a una herramienta de diseño.

Cómo funciona

Todos los cálculos se ejecutan en el navegador utilizando la fórmula de luminancia WCAG 2.1, sin necesidad de contacto con el servidor.

Luminancia relativa

WCAG define la luminancia como una suma ponderada de canales RGB linealizados: L = 0,2126R + 0,7152G + 0,0722B. La relación de contraste es entonces (L1 + 0,05) / (L2 + 0,05), donde L1 es el color más claro.

Simulación de daltonismo

El simulador aplica matrices de daltonización estándar (Machado et al., 2009) para transformar los valores sRGB tal y como los percibe cada tipo de deficiencia de visión del color.

Algoritmo Auto-Fix

Auto-Fix itera sobre el canal de luminosidad en el espacio HSL, encontrando el ajuste mínimo que alcanza el ratio objetivo (AA o AAA) mientras mantiene el tono y la saturación sin cambios.

A quién va dirigida esta herramienta

Diseñadores UI/UX

Pruebe las combinaciones de colores antes de entregar el diseño y mantenga un sistema de diseño conforme.

Especialistas en accesibilidad

Produzca pruebas de contraste para auditorías WCAG, informes de clientes y certificaciones de conformidad.

Desarrolladores frontales

Compruebe rápidamente las variables de color CSS durante el desarrollo y la revisión del código sin salir del navegador.

Jefes de producto

Garantizar el cumplimiento de la accesibilidad legal (ADA, EAA) antes del lanzamiento del producto o de la presentación de la licitación pública.

Creadores de contenidos

Compruebe que el texto superpuesto sobre imágenes o fondos de color es legible para todos los públicos.

Consejos para un mejor diseño accesible

Su objetivo de referencia debe ser siempre WCAG AA (4,5:1) y, para el cuerpo del texto, AAA (7:1), sobre todo en los sitios de sanidad, administración pública y finanzas.
Ejecute la simulación de daltonismo para los 8 tipos, no sólo para la deuteranopía. Cada tipo afecta de forma diferente a los distintos pares de colores.
No confíe nunca en el color por sí solo para transmitir información: acompañe siempre las señales de color con iconos, motivos o etiquetas de texto.
Utilice HSL para ajustar el contraste: aumente la diferencia de luminosidad entre el primer plano y el fondo en lugar de cambiar el tono.
Prueba en un dispositivo móvil físico a plena luz del sol: las condiciones del mundo real revelan problemas de contraste que los monitores ocultan.

Por qué es importante el contraste de accesibilidad

Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de deficiencia en la visión de los colores: un contraste deficiente excluye directamente a estos usuarios.
La ADA (EE.UU.) y la Ley Europea de Accesibilidad (UE 2025) exigen el cumplimiento de las WCAG 2.1 AA para los productos digitales de cara al público.
El contraste deficiente es uno de los 3 fallos más comunes de las WCAG detectados en las auditorías de accesibilidad realizadas en todo el mundo (informe WebAIM Million).
El diseño accesible de los colores mejora la legibilidad para todos los usuarios: a plena luz del sol, en pantallas de baja calidad y a medida que los usuarios envejecen.

Rendimiento y privacidad

Cada cálculo de contraste, simulación de daltonismo y corrección automática se ejecuta completamente en su navegador mediante JavaScript. No se transmiten valores de color, capturas de pantalla ni datos de uso a ningún servidor. La herramienta responde en menos de 5 ms por cálculo y funciona sin conexión después de la primera carga de la página.

Nota educativa: WCAG y visión cromática

WCAG 2.1 frente a 2.2

WCAG 2.2 (2023) introdujo nuevos criterios de éxito (2.4.11 Enfoque de la apariencia, 3.2.6 Ayuda coherente) pero mantuvo los requisitos básicos de contraste (1.4.3, 1.4.6) idénticos a los de 2.1.

Luminancia frente a brillo

Las WCAG utilizan la luminancia relativa, una medida ponderada perceptualmente. Un amarillo brillante (#ffff00) tiene una luminancia muy alta (0,93), mientras que un azul marino oscuro (#003366) tiene una luminancia baja (0,02), lo que da una relación de 9,8:1.

Tipos de daltonismo

La deuteranopía (rojo-verde, la más frecuente) afecta a un ~6% de los hombres. Protanopia (ceguera al rojo) ~2%. Tritanopia (azul-amarillo) ~0,01%. Acromatopsia (daltonismo) ~0,003%.

APCA - La norma del futuro

El Algoritmo de Contraste Perceptivo Avanzado (APCA) se propone para las WCAG 3.0. Evalúa el contraste de forma diferente en función del tamaño, el peso y la polaridad de la fuente.

Solución de problemas

Sí. WCAG AA es el mínimo legalmente exigido en la mayoría de las jurisdicciones. AAA es una aspiración y no siempre es posible alcanzarla en todas las combinaciones de texto y fondo. En la medida de lo posible, procure que el cuerpo del texto sea AAA.

El texto grande (18pt normal o 14pt negrita) tiene un umbral más bajo (3:1 para AA). Si el texto pequeño falla a 4,5:1, oscurece el texto o aclara el fondo hasta que se cumpla la proporción.

Pruebe a ajustar sólo el fondo en lugar del color del texto. Oscurecer ligeramente un fondo blanco (por ejemplo, a un gris claro) puede lograr la conformidad AA con un cambio visual mínimo.

Pueden surgir pequeñas diferencias por la forma en que las herramientas redondean los valores de luminancia en coma flotante. Ambos resultados deben estar dentro de un margen de ±0,1 - utilice el valor más conservador (inferior) para el cumplimiento.

¿Sabías que...?

La fórmula de relación de contraste de las WCAG se introdujo por primera vez en las WCAG 1.0 (1999) como una simple comprobación de la diferencia de luminosidad. En WCAG 2.0 (2008) se revisó de forma significativa para utilizar la luminancia relativa, un modelo basado en el espacio de color CIE 1931 y en la forma en que el sistema visual humano procesa la luz. El umbral actual de 4,5:1 se eligió porque compensa aproximadamente la pérdida de contraste de 3:1 que experimentan los usuarios con visión 20/80 (baja visión sin tecnología de apoyo).

Crear productos que todos puedan utilizar

El contraste de color accesible no es sólo una casilla de verificación de conformidad: es una cualidad de diseño fundamental que beneficia a todos los usuarios. Esta herramienta gratuita le ofrece comprobación WCAG en tiempo real, simulación de daltonismo y autocorrección inteligente en un solo lugar, sin que los datos salgan de su navegador. Pruebe su paleta ahora, corrija lo que falle y envíe un producto que funcione para todos.