Contraste de color WCAG: guía completa
El estándar WCAG 2.1 (Web Content Accessibility Guidelines) define ratios mínimos de contraste entre texto y fondo para garantizar que personas con baja visión, daltonismo o que usan pantallas en condiciones difíciles puedan leer cómodamente.
Niveles WCAG: AA, AAA y AA Large
- AA (estándar mínimo): ratio 4.5:1 para texto normal, 3:1 para texto grande (≥18pt o ≥14pt bold).
- AAA (excelencia): ratio 7:1 para texto normal, 4.5:1 para texto grande.
- AA Large: el ratio 3:1 también aplica a iconos y elementos no textuales.
Cómo se calcula el ratio de contraste
El contraste se calcula a partir de la luminancia relativa de los dos colores:
contrast = (L_clara + 0.05) / (L_oscura + 0.05)
Donde la luminancia relativa de cada color sigue la fórmula sRGB:
- Si el canal < 0.03928, divídelo por 12.92.
- Si no, aplica
((c + 0.055) / 1.055)^2.4. - Combina los tres canales:
0.2126·R + 0.7152·G + 0.0722·B.
Errores comunes de contraste
- Gris claro sobre fondo blanco: a partir de gris #999 o más claro, falla AA.
- Botones primarios con saturación alta y luminosidad media: los azules medios suelen no superar 4.5:1 contra blanco.
- Texto sobre imágenes sin overlay opaco: el contraste varía píxel a píxel y casi siempre falla.
- Acentos cálidos (amarillo, naranja claro) sobre fondo blanco: rara vez pasan AA aunque parezcan visibles.
Daltonismo: más allá del contraste
El contraste WCAG es necesario pero no suficiente para accesibilidad cromática. Aproximadamente el 8% de hombres y 0.5% de mujeres tienen alguna forma de daltonismo. Los tres tipos principales son:
- Protanopia: dificultad con el rojo (rojo y verde se confunden).
- Deuteranopia: dificultad con el verde (más común).
- Tritanopia: dificultad con el azul (rara).
Paletadecolor.es incluye simulación de los tres tipos para validar tus paletas.
Cómo verificar contraste en Paletadecolor.es
- Crea o abre tu paleta en el editor principal.
- Cada swatch muestra automáticamente su badge WCAG (AA, AAA, AA·L o ✗) contra blanco y contra negro.
- En el panel de daltonismo, activa la simulación de protanopia, deuteranopia o tritanopia para previsualizar la paleta en cada caso.
- Si algún stop falla, ajusta la curva de luminosidad para subir o bajar su L.
Recursos oficiales
- WCAG 2.1 (W3C) — estándar oficial.
- Quick Reference de WCAG 2.1 — checklist práctica.
- WebAIM Contrast Checker — herramienta independiente.
Pendiente de añadir
Aquí irá una calculadora de contraste interactiva integrada con el editor + ejemplos visuales de pares HEX que pasan/fallan WCAG.