Texto grande
Texto de cuerpo normal
Leyenda pequeña
#000000 Acerca de esta herramienta
El ratio de contraste de color mide la diferencia perceptual de luminancia entre dos colores, expresada como un valor que va de 1:1 (idénticos) a 21:1 (negro puro sobre blanco puro). La fórmula WCAG 2.x lineariza cada canal sRGB — un segmento lineal por debajo de 0.03928 y una curva de potencia 2.4 por encima — los pondera a 0.2126 R / 0.7152 G / 0.0722 B para obtener la luminancia relativa, y luego calcula (más claro + 0.05) / (más oscuro + 0.05). Las Web Content Accessibility Guidelines fijan cuatro umbrales: AA exige 4.5:1 para el texto normal y 3:1 para el texto grande (>=24px, o >=18.66px en negrita); AAA eleva esos valores a 7:1 y 4.5:1.
Úsalo para verificar que el cuerpo de texto, los botones, los enlaces y las etiquetas de formulario cumplen los requisitos de accesibilidad antes de la publicación, para depurar un par de colores de design system señalado por una auditoría, o para encontrar una alternativa conforme sin abandonar tu paleta. Introduce cualquier color CSS — hexadecimal, rgb(), hsl() o un color con nombre — en cualquiera de los campos, lee en vivo el ratio y la cuadrícula de calificaciones, y cuando falle el nivel AA, aplica el primer plano sugerido que ajusta la luminosidad OKLCH del color original lo justo para alcanzar 4.5:1.
El ratio de contraste depende únicamente de la luminancia, no del tono — dos colores con la misma luminosidad pueden ser radicalmente diferentes y aun así no cumplir, porque los usuarios daltónicos y con baja visión se basan en la diferencia de luminancia.
Preguntas frecuentes
¿Qué ratio de contraste se necesita para cumplir las WCAG?
El WCAG 2.1 nivel AA exige un ratio de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande (24px o más, o 18.66px y en negrita). El nivel AAA exige 7:1 para el texto normal y 4.5:1 para el texto grande.
¿Qué cuenta como texto grande a efectos de contraste?
El texto grande es de 18.66px (14pt) o más cuando está en negrita, o de 24px (18pt) o más con grosor normal. Está sujeto a un umbral de contraste más bajo porque los glifos más grandes siguen siendo legibles con menos contraste.
¿Cómo se calcula el ratio de contraste WCAG?
La luminancia relativa de cada color se obtiene linearizando sus canales sRGB y ponderándolos a 0.2126 R + 0.7152 G + 0.0722 B. El ratio es entonces (luminancia más clara + 0.05) / (luminancia más oscura + 0.05), lo que da un valor entre 1:1 y 21:1 que es independiente de cuál color sea el primer plano.