Qué es el contraste de color
Es la diferencia de luminosidad entre el color del texto y el del fondo. Se expresa como una relación, de 1:1 (colores iguales, no se lee nada) a 21:1 (negro sobre blanco).
La norma WCAG (Pautas de Accesibilidad para el Contenido Web, del W3C) define cómo calcularlo: (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro.
Cuánto contraste pide WCAG
El nivel AA, el que se toma como mínimo razonable, pide:
- Texto normal: al menos 4,5:1.
- Texto grande: al menos 3:1. WCAG considera grande al texto de 18 puntos o más, o de 14 puntos en negrita o más (equivalen a unos 24 y 18,5 píxeles).
- Componentes de interfaz y gráficos (bordes de campos, iconos necesarios para entender): al menos 3:1 respecto de los colores vecinos.
El nivel AAA, más exigente, pide 7:1 para texto normal y 4,5:1 para texto grande.
Hay excepciones: el texto que forma parte de un logotipo no tiene requisito de contraste, ni el de componentes inactivos ni el puramente decorativo.
Ejemplos con colores reales
| Texto | Fondo | Contraste | Texto normal (AA) |
|---|---|---|---|
| #000000 | #FFFFFF | 21 : 1 | Cumple |
| #12304A | #F2F5F8 | 12,40 : 1 | Cumple |
| #0C72BA | #FFFFFF | 5,08 : 1 | Cumple |
| #767676 | #FFFFFF | 4,54 : 1 | Cumple, justo |
| #C58B4E | #F3E9DC | 2,44 : 1 | No cumple |
El gris #767676 sobre blanco suele citarse como el gris más claro que todavía alcanza 4,5:1 para texto normal. Más claro que eso, y falla.
Errores comunes
- Gris claro sobre blanco para textos secundarios, pies de foto o placeholders.
- Texto sobre fotos sin una capa oscura o un fondo que garantice el contraste en toda la imagen.
- Botones con texto blanco sobre colores medios (naranjas, verdes claros, celestes): conviene medirlos.
- Comunicar solo con color (por ejemplo, rojo para error y verde para éxito sin un texto o un icono). Mucha gente no distingue ciertos colores.
- Revisar solo el estado normal. Los estados al pasar el mouse o con el foco también tienen que cumplir.
Qué hacer si tu color de marca no cumple
No hace falta cambiar la marca. Podés usar el color de marca para fondos, bordes y formas, y un tono más oscuro de ese mismo color para el texto. El verificador gratuito te sugiere el tono más cercano que sí cumple.
Verificalo
Con la herramienta ingresás el color del texto y el del fondo, y te muestra el contraste, si cumple para texto normal, texto grande y componentes, y una vista previa. Los cálculos se hacen en tu navegador.
Preguntas frecuentes
¿Cuál es el contraste mínimo para texto?
Según WCAG nivel AA, 4,5:1 para texto normal y 3:1 para texto grande.
¿Qué se considera texto grande?
Texto de 18 puntos o más, o de 14 puntos en negrita o más. Equivale a unos 24 píxeles, o 18,5 píxeles en negrita.
¿Los logos tienen que cumplir el contraste?
No. WCAG exceptúa el texto que forma parte de un logotipo o nombre de marca.