Comprobador de Contraste de Color
Introduce un color de texto (primer plano) y uno de fondo — con el selector de color o escribiendo un código hex de 3 o 6 dígitos — y la herramienta calcula la relación de contraste WCAG 2 y la evalúa contra los cuatro umbrales habituales a la vez: AA y AAA, para texto normal y grande. Por dentro convierte cada color del sRGB con codificación gamma a luz lineal, pondera los canales para obtener la luminancia relativa (los coeficientes WCAG: 0.2126 R, 0.7152 G, 0.0722 B) y calcula (L1 + 0.05) ÷ (L2 + 0.05). Las relaciones van de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Los umbrales provienen directamente de los criterios de éxito 1.4.3 y 1.4.6 de WCAG 2.1: el texto normal necesita 4.5:1 para AA y 7:1 para AAA; el texto grande (≥ 24px, o ≥ 18.66px en negrita) necesita 3:1 y 4.5:1. Una vista previa en vivo muestra tu combinación en tamaño de cuerpo y de titular, porque un par que aprueba matemáticamente aún merece un segundo vistazo. Todo se ejecuta localmente en tu navegador.
El veloz murciélago hindú comía feliz cardillo
El veloz murciélago hindú comía feliz cardillo
Cómo usar
- Define el color de primer plano (texto) con el selector o escribiendo un código hex — se aceptan las formas #RGB y #RRGGBB.
- Define el color de fondo de la misma manera.
- Lee la relación de contraste y las cuatro insignias AA/AAA — verde significa aprobado, rojo suspenso.
- Revisa la vista previa en tamaño de cuerpo y de titular; si un par aprueba por poco, plantéate oscurecer o aclarar un color para mayor comodidad.
Preguntas frecuentes
- ¿Qué relaciones exigen AA y AAA?
- El criterio de éxito 1.4.3 de WCAG 2.1 (AA) exige 4.5:1 para texto normal y 3:1 para texto grande; el 1.4.6 (AAA) los eleva a 7:1 y 4.5:1. AA es el nivel que citan la mayoría de leyes y normas de contratación; AAA es un objetivo más estricto para máxima legibilidad.
- ¿Qué se considera texto grande?
- Texto de al menos 18pt (24px), o de al menos 14pt (18.66px) si es negrita. WCAG define los umbrales en puntos; los equivalentes en píxeles asumen la relación CSS estándar de 96 dpi, así que un titular normal de 24px o una etiqueta en negrita de 19px califican.
- ¿Estas relaciones aplican a iconos y componentes de interfaz?
- WCAG 2.1 añade el criterio 1.4.11 (contraste no textual): los componentes de interfaz, los indicadores de foco y los gráficos con significado necesitan al menos 3:1 frente a los colores adyacentes. Es el mismo umbral que la insignia AA de texto grande, así que puedes usarla como referencia rápida para iconos y bordes.
- ¿Admite transparencia?
- No: la relación está definida para colores sólidos. Si tu texto o superposición usa alfa, combínalo primero con el fondo real (negro al 60% sobre blanco es en la práctica #666666) y comprueba el resultado aplanado.
- ¿Es la fórmula de WCAG 2 la última palabra sobre legibilidad?
- Es el estándar normativo — citado en casos de la ADA, la EN 301 549 y la Section 508 — pero no es perfecta: tiende a sobrevalorar los pares claro-sobre-oscuro (modo oscuro). El modelo APCA propuesto en el borrador de WCAG 3 lo corrige; hasta que llegue, cumple las relaciones de WCAG 2 y confía en tus ojos en la vista previa.
Guías sobre este tema
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Comparador de Brillo de Color (HSL vs Lab L* vs WCAG vs HSP)
Compara siete métricas de brillo distintas — Luminosidad HSL, Valor HSV, Luminancia Relativa WCAG (LRV), L* de CIE Lab (claridad perceptual), Luma Rec. 709, Brillo Percibido HSP y promedio ingenuo (R+G+B)/3 — para uno o dos colores en paralelo, con deltas que muestran por qué un color 'más claro' puede sentirse más oscuro.
Playground de Filtros CSS
Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.
Generador de Paleta de Colores
Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.