Español
Comprueba el contraste WCAG y arregla combinaciones que no pasan con un clic.
Última actualización
Titular grande — 24px negrita
Texto de cuerpo. El veloz murciélago hindú comía feliz cardillo y kiwi. Lee un par de párrafos y comprueba si el contraste resulta cómodo en sesiones largas.
Pie de página pequeño — 12px normal. WCAG solo protege a partir de 14pt en este tamaño, así que el texto diminuto necesita el contraste más estricto.
Un *comprobador de contraste* es lo que diseñadores y desarrolladores usan antes de publicar una pantalla. Calcula la **relación de contraste** entre dos colores —tu texto y el fondo que tiene detrás— usando la fórmula definida en las Pautas de Accesibilidad para el Contenido Web (WCAG). Cuanto mayor sea el ratio, más fácil de leer.
WCAG define tres umbrales. **3:1** es el mínimo para titulares grandes (24px+ normal o 18,66px+ negrita) y para el borde visible de componentes interactivos como botones, formularios e iconos. **4,5:1** es el mínimo AA para texto de cuerpo —el listón habitual—. **7:1** es AAA, el nivel más alto y muy útil para personas con baja visión.
Contraste **no** es lo mismo que cuán vivos parecen dos colores. Dos colores de marca muy intensos pueden seguir siendo difíciles de leer si su *luminancia* es parecida. Esta herramienta aplica la fórmula WCAG, te muestra el ratio exacto y califica cada contexto, así no tienes que adivinar.
Escribe o pega un valor HEX, o usa el selector de color. El primer plano es el texto o icono; el fondo es lo que queda detrás.
El número grande de la izquierda es el ratio WCAG. Por debajo de 3:1 es arriesgado para cualquier UI; por debajo de 4,5:1 falla para texto de cuerpo.
Tres filas muestran pass/fail para texto normal (4,5/7), texto grande (3/4,5) y componentes de UI (3:1). Busca el check verde en cada fila que aplique a tu diseño.
Cuando AA falla, la herramienta empuja la luminosidad del primer plano —respetando el tono— hasta que el par pasa. Pulsa otra vez para llegar a AAA.
Cuando ambos colores pasen los contextos que necesitas, copia el snippet CSS (color: + background:) y pégalo en tu hoja de estilos o en tus design tokens.
Cruza qué estás estilando con el nivel que necesitas. Fuente: WCAG 2.2 Understanding 1.4.3 y 1.4.11.
| Objetivo | Mínimo AA | Mínimo AAA | Notas |
|---|---|---|---|
| Texto de cuerpo (< 18pt normal) | 4.5 : 1 | 7 : 1 | Regla por defecto para párrafos, etiquetas, leyendas |
| Texto grande (≥ 18pt normal o ≥ 14pt negrita) | 3 : 1 | 4.5 : 1 | Titulares, copys hero, citas grandes |
| Componentes de UI y objetos gráficos | 3 : 1 | — | Bordes de botones, formularios, iconos, focus rings |
| Logo o decoración pura | Exento | Exento | Logotipos y texto incidental están exentos — pero la usabilidad sigue importando |
| Estado deshabilitado | Exento | Exento | Controles inactivos están exentos, pero no te apoyes en esto para enviar valores por defecto bajos |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Clásico slate oscuro sobre casi-blanco. Pasa AAA para texto de cuerpo (≥ 7:1) con margen. La mayoría de UI de producto deberían apuntar a esta zona por defecto.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Los azules vivos sobre blanco aterrizan a menudo cerca de 4:1 — legible para titulares grandes (pasa 3:1 AA Large) pero falla el listón 4,5:1 para texto de cuerpo. Úsalo para botones y CTAs a 18px+, no para párrafos.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Amarillo brillante contra blanco es la trampa famosa: los colores se ven fuertes pero su luminancia está demasiado cerca. Reserva esta combinación para fondos oscuros (#facc15 sobre #1f2937 da ≈ 12:1).
