QuickATools

Herramientas para desarrolladores · Free browser tool

Comprobador de contraste de color WCAG

Comprueba relaciones de contraste texto-fondo en tiempo real. Verifica el cumplimiento WCAG 2.1 AA y AAA al instante para diseño web accesible.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

¿Qué relaciones de contraste exige realmente WCAG 2.1?

El Criterio de Éxito 1.4.3 de WCAG 2.1 (Contrast Minimum) exige una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande en el Nivel AA. El Nivel AAA (1.4.6 Contrast Enhanced) sube esos suelos a 7:1 para texto normal y 4.5:1 para texto grande. Las relaciones se calculan a partir de la luminancia relativa de cada color y van de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro).

¿Cuál es la diferencia práctica entre AA y AAA?

AA es el objetivo de cumplimiento más habitual para sitios públicos, servicios gubernamentales y productos comerciales: equilibra legibilidad con flexibilidad de diseño. AAA es un nivel mejorado más estricto cuando necesitas máxima legibilidad (por ejemplo, experiencias de lectura long-form o audiencias con baja visión significativa). Cumplir AAA en cada elemento de UI suele ser poco práctico, así que muchos equipos apuntan a AA globalmente y AAA para el texto de cuerpo crítico.

¿Qué cuenta como "texto grande" según WCAG?

El texto grande se define como al menos 18 point (típicamente ~24px) de peso regular, o al menos 14 point (típicamente ~18.66px) en negrita. Los encabezados y el copy hero a menudo califican; los párrafos de cuerpo normalmente no. El texto grande tiene un umbral de contraste más bajo porque los glifos más grandes siguen siendo legibles con contraste más débil —pero aún así debes verificar el tamaño renderizado real en tu CSS, no solo el archivo de diseño.

¿Por qué importa tanto el contraste de color para la accesibilidad?

El bajo contraste es uno de los fallos de accesibilidad más habituales. Usuarios con baja visión, adultos mayores, personas en pantallas tenues o con sol, y muchos con deficiencia de visión del color dependen de una diferencia de luminancia suficiente —no solo del tono— para leer texto. Comprobar el contraste pronto evita publicar interfaces que se ven pulidas en condiciones ideales pero se vuelven inutilizables para una gran parte de visitantes reales.

Otras herramientas que te pueden servir

Explora más utilidades gratis en el navegador para vendedores, creadores y profesionales.

Por qué el contraste de color es innegociable para interfaces accesibles

El diseño sin barreras no es un paso de pulido opcional: es cómo las personas con baja visión, deficiencia de visión del color o deslumbramiento exterior intenso siguen leyendo tu UI. WCAG 2.1 define relaciones mínimas de contraste entre el texto y su fondo para que el contenido siga siendo legible para un rango mucho más amplio de usuarios. Fallar esos umbrales excluye en silencio a personas de formularios, docs, dashboards y páginas de marketing que a los diseñadores les parecen bien en monitores calibrados.

Se espera que sitios gubernamentales, productos empresariales y muchas apps de consumo globales cumplan al menos WCAG AA. Comprobar el contraste en el navegador —con la misma fórmula de luminancia relativa que usa la especificación— te permite validar decisiones de paleta antes de publicar, sin subir colores de marca a un servicio de terceros. Intercambia texto y fondo, previsualiza texto grande vs. normal y comparte un enlace de paleta con tu equipo cuando una combinación pase.

AA exige 4.5:1 para texto normal y 3:1 para texto grande; AAA sube esos listones a 7:1 y 4.5:1. El texto grande generalmente significa 18pt (unos 24px) regular o 14pt (unos 18.66px) negrita. Usa esta herramienta como puerta rápida en revisiones de diseño y luego confirma la UI final en contexto: iconos, degradados y superposiciones pueden cambiar el contraste efectivo aunque dos valores hex planos pasen.

Más utilidades para desarrolladores en este sitio: valida patrones de formularios con el Probador de regex, inspecciona tokens de auth en el Decodificador JWT, ordena design tokens como JSON con el Formateador y validador de JSON, o codifica assets vía Codificar/decodificar Base64. Para fotos de producto de marketplace, el Comprobador de fondo de fotos de producto reutiliza la misma matemática de luminancia contra imágenes reales.