Contraste WCAG — Contraste WCAG — ratios mínimos de contraste de color

¿Qué exige WCAG sobre contraste?

WCAG 2.1 define tres criterios específicos para el contraste de color, todos verificables con herramientas como Chrome DevTools, Lighthouse o el contrast checker de WebAIM:

• 1.4.3 Contraste mínimo (AA): texto normal 4,5:1, texto grande 3:1.
• 1.4.6 Contraste mejorado (AAA): texto normal 7:1, texto grande 4,5:1.
• 1.4.11 Contraste no textual (AA): 3:1 en componentes de interfaz (bordes de inputs, iconos informativos, focus rings).

Definición de “texto grande”

WCAG considera texto grande cualquiera de estos dos casos:

• ≥ 18 puntos (≈ 24 px en pantalla a 96 dpi).
• ≥ 14 puntos en negrita (≈ 18,66 px en pantalla a 96 dpi).

Por debajo de esos umbrales, se aplican los ratios más estrictos de “texto normal”.

Cómo se calcula el ratio

La fórmula oficial usa luminancia relativa (no brillo percibido):

ratio = (L1 + 0.05) / (L2 + 0.05)

Donde L1 es la luminancia del color más claro y L2 la del más oscuro, ambas calculadas con la fórmula sRGB. El ratio resultante va de 1:1 (mismo color) a 21:1 (negro puro sobre blanco puro).

Errores comunes en marketing digital

• Texto sobre imágenes de hero sin overlay oscuro suficiente: cumple en algunas zonas y falla en otras según la imagen.
• Botones primarios con texto blanco sobre azules o verdes corporativos que solo dan 3,8:1 — válido para texto grande, no para botones de tamaño normal.
• Placeholders gris claro (#999 sobre #fff da 2,84:1) — fallan AA y se confunden con campo deshabilitado.
• Enlaces sin subrayado que solo se distinguen por color con menos de 3:1 frente al texto circundante: incumple 1.4.1 Uso del color.

Cómo lo aplicamos en smedialab.es

Auditamos contraste con DevTools en cada commit que toca CSS. El azul corporativo (#5CAED4) cumple AA con texto blanco normal y AAA con texto grande, pero no AAA con texto normal: lo declaramos honestamente como criterio AAA parcial en lugar de inflar la conformidad.

Para clientes con proyectos de diseño web, el chequeo de contraste forma parte del checklist obligatorio antes de aprobar cualquier paleta corporativa.