Ratios de contraste WCAG explicados (4,5:1, 3:1, 7:1)

Un ratio de contraste WCAG compara la luminancia relativa del más claro de dos colores frente al más oscuro, en una escala que va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Tres mínimos hacen el trabajo práctico: 4,5:1 para texto de tamaño normal, 3:1 para texto grande y componentes de interfaz relevantes, y 7:1 para el nivel más estricto, AAA. Un ancla útil: 21:1 es negro sobre blanco, y 4,5:1 es aproximadamente un gris medio — #767676 — sobre blanco.

Los tres números suelen citarse como una sola regla, y buena parte de lo que sale mal en la práctica viene de aplicar el mínimo equivocado a la cosa equivocada. Esta referencia recorre qué mide realmente el ratio, qué cubre cada mínimo, qué queda exento y las malinterpretaciones que aparecen con más frecuencia — la pieza fundacional de nuestra guía de contraste. Cada número de los ejemplos de abajo está calculado, no citado.

¿Qué es exactamente un ratio de contraste?

El ratio se construye sobre la luminancia relativa: una medida de cuánta luz envía un color al ojo, que va de 0 para el negro a 1 para el blanco. WCAG define el ratio de contraste como (L1 + 0.05) / (L2 + 0.05) — la luminancia del color más claro dividida entre la del más oscuro, cada una amortiguada por una pequeña constante que modela la luz ambiental dispersa. Dos colores idénticos dan 1:1; negro sobre blanco da el máximo, 21:1. La fórmula es simétrica: intercambiar texto y fondo no cambia nada del número.

La intuición detrás de la medida: la maquinaria de detección de bordes del ojo funciona casi por completo con diferencias de luminosidad, no de tono. Un azul vivo y un gris de la misma luminancia puntúan casi igual sobre blanco, porque para la parte de tu visión que resuelve las formas de las letras, son casi lo mismo. Por eso un ratio construido puramente sobre la luminancia predice la legibilidad tan bien como lo hace — y por eso «ponlo de otro color» no arregla nada cuando la luminosidad se queda igual.

¿Qué cubre el mínimo de 4,5:1?

Texto de tamaño normal — en la práctica todo lo que esté por debajo de 24px en peso regular, o por debajo de 18,66px en negrita: texto de cuerpo, etiquetas, pies de foto, enlaces, texto de marcador de posición y texto dentro de imágenes. El mínimo procede del Criterio de Éxito 1.4.3, Contraste (mínimo), y el número no es arbitrario: la justificación declarada del estándar es que 4,5:1 compensa la pérdida de sensibilidad al contraste que acompaña a una visión de aproximadamente 20/40 — un nivel de agudeza común entre lectores mayores y personas con pérdida de visión leve. El mínimo está calibrado para mantener el texto legible para ellos, no solo para ojos jóvenes ante pantallas brillantes.

¿Cuándo basta con 3:1?

En dos casos. El primero es el texto grande: 24px o más en peso regular, o 18,66px o más en negrita. Los trazos más gruesos se mantienen legibles con menos contraste, así que el mínimo se relaja. El segundo son los componentes de interfaz relevantes — la información visual necesaria para identificar u operar una parte de la interfaz: el borde que marca dónde está un campo de formulario, un icono que transmite significado por sí solo, un indicador de foco, la diferencia visual entre un control marcado y uno sin marcar. Ambos casos tienen suficientes condiciones límite como para merecer su propio tratamiento; la versión corta es que 3:1 es una excepción con límites precisos, no un descuento general.

¿Cuándo vale la pena apuntar a 7:1?

7:1 es el nivel AAA — el Criterio de Éxito 1.4.6, «Contraste (mejorado)» — y es opcional. La mayoría de la normativa que cita a WCAG cita el nivel AA, así que 7:1 es una elección, y una razonable en situaciones concretas: productos con mucha lectura donde la gente pasa horas leyendo texto de cuerpo, documentación, y productos que sirven a públicos con una mayor proporción de lectores con baja visión. Cuesta espacio de paleta — la banda de colores que supera 7:1 sobre un fondo dado es mucho más estrecha que la banda de 4,5:1 — y por eso funciona mejor como decisión focalizada para roles de texto que como política general.

¿Cómo puntúan seis combinaciones reales?

Seis combinaciones, calculadas con la fórmula de WCAG, comprobadas frente a los tres mínimos. El azul de marca es #2563eb — oklch(0.546 0.215 262.9):

Dos filas merecen atención. La fila de blanco sobre rojo se mide frente al relleno rojo, no frente a la página — el texto sobre un botón de color siempre se comprueba frente al color sobre el que se asienta. Y el azul más claro es el caso intermedio clásico: inutilizable para texto de cuerpo, totalmente legal como titular o como icono.

Abre esta tabla de combinaciones como un panel de roles en vivo en Scale Composer — cada uno de los ~17 roles semánticos que necesita una superficie, comprobado frente a su mínimo en el momento de la derivación, con el valor Lc de APCA junto a cada ratio.

¿Qué queda exento de los mínimos de contraste?

Cuatro categorías no llevan ningún requisito de contraste, y se pasan por alto en ambas direcciones — señaladas cuando están exentas, ignoradas cuando no lo están:

• Controles deshabilitados — la etiqueta de un botón inactivo no tiene mínimo.
• Elementos puramente decorativos — florituras y patrones de fondo que no transmiten nada.
• Logotipos y nombres de marca — un logotipo tipográfico está exento como logo; las mismas palabras compuestas como texto de cuerpo no lo están.
• Texto incidental — texto que casualmente aparece en una fotografía, a diferencia del texto colocado sobre una imagen para ser leído.

Una advertencia: la exención significa que no hay mínimo legal, no que la invisibilidad sea buen diseño. Los estados deshabilitados aún necesitan poder encontrarse — un tema con sus propias sutilezas, especialmente sobre fondos oscuros.

¿Qué malinterpreta la gente sobre los ratios?

Tres malinterpretaciones explican la mayor parte de la confusión. Primero, los mínimos se aplican por combinación, no por paleta — un color no «pasa WCAG»; lo hace una combinación de dos colores, y el mismo gris puede pasar sobre blanco y fallar sobre una tarjeta con tinte. Segundo, AA frente a AAA se decide por criterio, no por sitio — un producto puede cumplir el criterio de contraste AA y el AAA para su vista de lectura, y decir «somos AAA» sobre todo un sitio afirma mucho más que el contraste. Tercero, «nuestro color de marca falla WCAG» casi siempre significa que falla una combinación — normalmente el color de marca como texto de cuerpo sobre blanco — y el arreglo se acota igual: oscurecer esa única combinación un paso, reservar el color para texto grande e interfaz donde aplica 3:1, o derivar el rol de texto frente a cada fondo en lugar de codificar un único valor en todas partes.

Recorre una combinación hasta los mínimos

Los tres números se vuelven intuitivos en el momento en que ves una combinación real cruzarlos. Toma un color de texto y desplaza su luminosidad hacia el fondo — el ratio se desliza desde lo cómodo pasando 7:1, luego 4,5:1, luego 3:1, y el panel de roles marca cada mínimo a medida que se rompe, para que puedas ver exactamente cuánto margen tienen tus propios colores antes de dejar de ser legales para el trabajo que hacen.