¿Cómo verifico si mis colores de texto y fondo cumplen con las WCAG?

Introduzca códigos hex en Color del texto y Color de fondo, o use los selectores. La Relación de contraste aparece con Aprobado o Suspenso para AA y AAA en texto normal y grande, además de componentes de interfaz.

¿Qué relación de contraste exige el nivel AA de las WCAG?

AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 para texto normal y 4,5:1 para texto grande. Los componentes de interfaz y los objetos gráficos necesitan 3:1.

¿Qué se considera texto grande?

La herramienta trata el texto regular de 18pt (24px) o el texto en negrita de 14pt (18.66px) como grande. El texto más pequeño debe cumplir los umbrales más altos para texto normal.

Mis colores no cumplen el nivel AA. ¿Cómo los corrijo?

Usa las sugerencias de un clic Corregir color de texto o Corregir fondo. Ajustan la luminosidad manteniendo el mismo tono hasta que el par alcanza 4.5:1.

¿Qué formatos de color acepta y puedo seleccionar desde la pantalla?

Acepta valores hexadecimales de 3 y 6 dígitos, como #abc o #1e293b. El botón Seleccionar color de la pantalla aparece en navegadores que admiten la API EyeDropper, como los basados en Chromium.

¿Es realmente gratis?

Sí. Todas las herramientas son gratis, sin cuenta y sin tarjeta de crédito. El trabajo se hace en tu dispositivo y no en nuestros servidores, y eso es lo que permite que siga siendo gratis.

¿Funciona en móvil?

Sí. Funciona en los navegadores móviles actuales de iOS y Android, sin instalar nada.

🌓

Comprobador de contraste de color WCAG gratis

Compruebe si dos colores cumplen con los estándares de contraste de accesibilidad WCAG AA y AAA. Vista previa en vivo en múltiples tamaños de texto con sugerencias automáticas cuando el contraste es demasiado bajo.

Se ejecuta en tu navegadorSin registro, sin ventanas emergentesSin necesidad de registroGratis para siempre

Funciona sin conexión una vez cargado

Color de texto

Color de fondo

Texto de encabezado grande

Texto de cuerpo mediano (18px) para lectura y contenido.

Texto de cuerpo normal (16px) para párrafos.

Texto de cuerpo pequeño (14px) para subtítulos y metadatos.

14,63:1

Relación de contraste

✓WCAG AA — Texto normal

Requiere 4.5:1 · Tienes 14,63:1

✓WCAG AA — Texto grande

Requiere 3.0:1 · Tienes 14,63:1

✓WCAG AAA — Texto normal

Requiere 7.0:1 · Tienes 14,63:1

✓WCAG AAA — Texto grande

Requiere 4.5:1 · Tienes 14,63:1

✓Componentes UI / objetos gráficos

Requiere 3.0:1 · Tienes 14,63:1

Ajustes rápidos

Basado en las pautas de contraste WCAG 2.1. Texto grande = 18pt (24px) normal o 14pt (18,66px) negrita. Los códigos HEX se actualizan en ambas direcciones: escribe un HEX o elige un color, ambos campos se sincronizan.

Usos habituales

Auditar Páginas Web para Cumplimiento WCAGVerifica que los colores de texto de tu sitio cumplan con los estándares de contraste WCAG AA o AAA para accesibilidad.
Verificar Combinaciones de Colores de MarcaPrueba emparejamientos de paleta de colores de marca para asegurar que funcionen para diseño de UI accesible.
Prueba Paletas de Color en Modo OscuroEl texto claro sobre fondos oscuros aún puede fallar en contraste — verifica tus emparejamientos de paleta en modo oscuro aquí.
Emparejamientos de Color para Materiales ImpresosCarteles, señales y materiales impresos también necesitan contraste legible — especialmente para espectadores mayores.
Diseña Botones Accesibles en ColorAsegúrate de que tus CTAs, botones de acción y enlaces cumplan WCAG con sus fondos.

Cómo funciona

La comprobación de contraste se ejecuta enteramente en tu navegador usando el algoritmo de luminancia relativa de WCAG 2.1; sin biblioteca, sin servidor, solo matemáticas escritas a mano que siguen la especificación al pie de la letra. Cada resultado se actualiza en tiempo real mientras escribes o eliges un color.

1
Entrada y normalización hexadecimal
Se aceptan valores hexadecimales tanto de 3 dígitos (#abc) como de 6 dígitos (#aabbcc) y se normalizan a tríos RGB completos. La entrada no válida se rechaza de inmediato en lugar de recurrir silenciosamente al negro, así que aparece un borde rojo en lugar de un resultado de aprobado engañoso.
2
Cálculo de luminancia WCAG
Cada color se convierte a luminancia relativa usando la fórmula de WCAG 2.1: los valores de canal sRGB se linealizan con una corrección gamma por tramos (dividiendo entre 12,92 por debajo de 0,03928, elevando a la potencia 2,4 por encima), y luego se ponderan como 0,2126R + 0,7152G + 0,0722B.
3
Relación de contraste y comprobaciones de cumplimiento
La relación de contraste se calcula como (más claro + 0,05) / (más oscuro + 0,05) y se compara con los cinco umbrales de WCAG: texto normal AA (4,5:1), texto grande AA (3:1), texto normal AAA (7:1), texto grande AAA (4,5:1), y componentes de interfaz (3:1). Los resultados se actualizan con cada pulsación.
4
Sugerencias de corrección que preservan el matiz
Cuando el par no cumple con WCAG AA, la herramienta busca en el espacio de luminosidad HSL, avanzando desde la luminosidad original en ambas direcciones, para encontrar la variante más cercana de cada color que cumpla 4,5:1 manteniendo el mismo matiz y saturación. La EyeDropper API (Chromium) también está disponible para tomar cualquier color directamente de tu pantalla.

Herramientas relacionadas

👁️

Simulador de daltonismo

Vea cómo ven su diseño las personas con deficiencias en la visión del color. Simula protanopía, deuteranopía, tritanopía, acromatopsia y anomalías más leves.

ProbarArchivos locales

📐

Cuál es la resolución de mi pantalla

Ve la resolución de tu pantalla en píxeles CSS y reales, el tamaño de la ventana, la proporción de píxeles, la profundidad de color, HDR, compatibilidad táctil y frecuencia de actualización, y cópialo todo.

Probar

🖥️

Prueba de píxeles muertos

Revisa tu pantalla en busca de píxeles muertos o atascados con pantalla completa en negro, blanco, rojo, verde, azul y gris, más un reparador opcional de píxeles atascados.