Lección 6 de 10 · 13 min de lectura · Revisado el 26/10/2026
Diseñar una paleta de color accesible
La mayoría de los fallos de contraste de una web no son decisiones aisladas de un diseñador despistado: vienen de una paleta de color que nunca se diseñó pensando en el contraste. Si el gris de los textos secundarios no llega a 4,5:1, fallará en cientos de páginas a la vez; si la paleta ya garantiza combinaciones válidas, el equipo acertará casi sin pensar. Esta lección explica cómo construir o revisar una paleta accesible partiendo de los colores de marca, cómo documentar qué combinaciones se pueden usar y cómo tratar los colores de estado (error, éxito, aviso).
Partir de la marca sin traicionarla
El primer conflicto suele ser el color corporativo. Imagina una entidad cuyo color de marca es un turquesa #1AA39A. Sus números son estos:
- Sobre blanco da 3,1:1: no sirve para texto normal, pero sí para texto grande (24 px o más, o 18,66 px en negrita), bordes de componentes, iconos e ilustraciones.
- Texto blanco sobre ese turquesa: también 3,1:1, así que un botón con texto blanco de 16 px no cumple 1.4.3.
- Texto casi negro #1A1A1A sobre el turquesa: 5,6:1. El mismo botón con texto oscuro sí cumple.
No hace falta cambiar la marca. Hay tres estrategias, combinables:
- Usar el color de marca donde su contraste basta: superficies grandes, ilustraciones, bordes, iconos y texto grande.
- Invertir la combinación: texto oscuro sobre el color de marca en lugar de texto blanco.
- Crear tonos derivados más oscuros (para texto y enlaces) y más claros (para fondos), del mismo tono. La identidad se mantiene porque el tono es el mismo; lo que cambia es la luminosidad, que, como vimos en la lección sobre percepción, es lo que determina el contraste.
Escalas tonales
Los sistemas de diseño organizan cada color en una escala de tonos numerados, normalmente del 50 (el más claro) al 900 (el más oscuro). Esta sería la escala del turquesa de nuestro ejemplo, con su contraste frente a un fondo blanco y frente a un fondo oscuro #121212:
| Tono | Color | Sobre blanco | Sobre #121212 |
|---|---|---|---|
| 50 | #E9FBFA | 1,1:1 | 17,5:1 |
| 100 | #CAF6F3 | 1,2:1 | 16,1:1 |
| 300 | #65E6DB | 1,5:1 | 12,4:1 |
| Marca | #1AA39A | 3,1:1 | 6,0:1 |
| 700 | #13766E | 5,5:1 | 3,4:1 |
| 800 | #0E5852 | 8,3:1 | 2,3:1 |
| 900 | #0A3D39 | 12,1:1 | 1,6:1 |
La tabla ya responde a muchas preguntas. Para enlaces y texto sobre blanco sirven el 700, el 800 y el 900. Para fondos suaves detrás de texto oscuro, el 50 y el 100. En un tema oscuro, la escala se usa al revés: el 300 o el propio color de marca para enlaces y acentos, y nunca el 800 o el 900.
Algunos sistemas de diseño públicos, como el del Gobierno de Estados Unidos (USWDS), numeran sus tonos según la luminancia, de modo que la diferencia entre dos números indica directamente si la pareja cumple 3:1, 4,5:1 o 7:1. Es una idea útil para cualquier paleta: si la numeración refleja la luminosidad, el equipo puede razonar sobre el contraste sin calculadora.
Infografía · Proceso
Cómo construir una paleta de color accesible
Seis pasos para pasar de los colores de marca a combinaciones que cumplen 1.4.3 y 1.4.11
- Paso 1: Inventariar coloresRecoge todos los colores de marca, interfaz y estados que se usan hoy
- Paso 2: Crear escalas tonalesGenera para cada color una escala de claro a oscuro, numerada del 50 al 900
- Paso 3: Medir combinacionesCalcula el ratio de cada pareja texto/fondo y marca las que llegan a 4,5:1 y 3:1
- Paso 4: Asignar funcionesDecide qué tonos son texto, fondo, borde, foco y estado, con su ratio
- Paso 5: Añadir el tema oscuroRepite la matriz con fondos oscuros y variantes claras de los acentos
- Paso 6: Documentar y vigilarPublica las parejas permitidas y prohibidas y revisa cada color nuevo
Leer la infografía como texto
Proceso de seis pasos en secuencia. Primero, inventariar los colores: recoger todos los de marca, interfaz y estados que se usan hoy. Segundo, crear escalas tonales: generar para cada color una escala del más claro al más oscuro, numerada del 50 al 900. Tercero, medir las combinaciones: calcular el ratio de cada pareja de texto y fondo y marcar las que alcanzan 4,5:1 y 3:1. Cuarto, asignar funciones: decidir qué tonos son texto, fondo, borde, foco y estado, con su ratio. Quinto, añadir el tema oscuro: repetir la matriz con fondos oscuros y variantes claras de los acentos. Sexto, documentar y vigilar: publicar las parejas permitidas y prohibidas y revisar cada color nuevo antes de usarlo.
La matriz de combinaciones
El entregable más útil de una paleta accesible es una matriz que diga qué texto puede ir sobre qué fondo y para qué uso. Un extracto:
| Texto o elemento | Fondo | Ratio | Uso permitido |
|---|---|---|---|
| #1A1A1A | Blanco | 17,4:1 | Cualquier texto |
| Turquesa 700 #13766E | Blanco | 5,5:1 | Enlaces y texto normal |
| Turquesa 700 #13766E | Turquesa 50 #E9FBFA | 5,1:1 | Texto normal en avisos y tarjetas |
| #1A1A1A | Marca #1AA39A | 5,6:1 | Texto de botones primarios |
| Blanco | Marca #1AA39A | 3,1:1 | Solo texto grande |
| Marca #1AA39A | Blanco | 3,1:1 | Bordes, iconos, foco y texto grande |
| Marca #1AA39A | Turquesa 50 #E9FBFA | 2,9:1 | Prohibido (no llega a 3:1) |
Fíjate en la última fila: el color de marca, que cumple 3:1 sobre blanco, deja de cumplirlo sobre su propio tono 50. Las combinaciones se validan pareja a pareja, nunca color a color.
Error frecuente
Validar todos los colores solo contra el blanco y después usarlos sobre fondos grises. El gris #767676 cumple 4,5:1 sobre blanco (4,54:1), pero sobre el gris claro #F5F5F5 de muchas tarjetas y pies de página baja a 4,2:1 y deja de cumplir. Si tu interfaz tiene varios fondos, la matriz necesita una columna por fondo.
Colores semánticos y estados
Los colores de error, éxito, aviso e información necesitan, como mínimo, dos variantes cada uno: una oscura para texto e iconos sobre fondo claro y otra muy clara para el fondo de los mensajes.
- Error: rojo #C62828 (5,6:1 sobre blanco) para texto e iconos; un rosa muy claro #FDECEA de fondo, sobre el que el mismo rojo da 4,9:1.
- Éxito: verde #2E7D32 (5,1:1 sobre blanco). Sobre el fondo verde claro #E8F5E9 baja a 4,6:1: cumple, pero sin margen.
- Aviso: el ámbar es el color más difícil. Un ámbar #F2C14E como texto sobre blanco no cumple; como fondo, con texto #1A1A1A, da 10,4:1. Si necesitas texto ámbar, oscurécelo hacia el marrón: #8A5A00 da 5,9:1 sobre blanco.
- Información: un azul #1565C0 da 5,7:1 sobre blanco.
Recuerda lo que vimos en la lección sobre 1.4.1: un buen contraste no basta si el estado se comunica solo por el color. Cada mensaje lleva su icono y su texto («Error», «Guardado correctamente»).
Estados de los componentes
Cada color interactivo necesita su familia de estados: normal, hover (al pasar el ratón), foco, activo, visitado y deshabilitado. Todos, salvo el deshabilitado, deben mantener el contraste. Una práctica habitual y segura es oscurecer un tono en hover (del 700 al 800, por ejemplo) en lugar de aclararlo. El color del indicador de foco necesita 3:1 contra lo que lo rodea, como vimos en la lección sobre 1.4.11; el diseño detallado del foco lo trabajarás en el curso de diseño de interfaces.
Documentar y mantener la paleta
Una paleta accesible se degrada si no se documenta. Buenas prácticas:
- Nombrar los colores por su función (texto principal, texto secundario, enlace, borde de campo, fondo de error), no por su apariencia. Así nadie usa «el gris claro» para un texto porque «queda bien».
- Anotar el ratio junto a cada combinación permitida en la guía de estilo y en la biblioteca de Figma.
- Repetir la matriz para el tema oscuro, con sus propias variantes de acento (lo verás en la lección sobre modo oscuro).
- Revisar cada color nuevo antes de incorporarlo: una campaña de verano con un amarillo nuevo es la forma más rápida de romper una paleta.
/* Incorrecto: nombres por apariencia, sin información de uso */
:root { --gris-claro: #999999; --turquesa: #1AA39A; }
/* Correcto: nombres por función, con el ratio documentado */
:root {
--color-texto: #1A1A1A; /* 17,4:1 sobre blanco */
--color-texto-secundario: #595959; /* 7,0:1 sobre blanco, 6,4:1 sobre #F5F5F5 */
--color-enlace: #13766E; /* 5,5:1 sobre blanco */
--color-boton-fondo: #1AA39A;
--color-boton-texto: #1A1A1A; /* 5,6:1 sobre el fondo del botón */
--color-borde-campo: #767676; /* 4,5:1 sobre blanco; mínimo exigido, 3:1 */
}Llevar estos valores a tokens de diseño compartidos entre Figma y el código es tarea de los sistemas de diseño, que se tratan en el nivel 7.
Ejemplo
Una entidad financiera detecta en su auditoría 140 incidencias de contraste repartidas por la web y la app. Al analizarlas, casi todas proceden de cuatro colores: un gris de textos secundarios, el color de marca usado en enlaces, un naranja de ofertas y el gris de los bordes de los campos. Corregir esos cuatro tokens en el sistema de diseño elimina la mayoría de las incidencias de una vez, sin revisar pantalla a pantalla.
Pruébalo tú
Abre la web de tu organización e inspecciona con el navegador el color del texto principal, el de los enlaces, el del botón principal y el de un texto secundario (fechas, notas, pies de foto). Introduce cada pareja en un comprobador de contraste (el inspector del navegador, WebAIM Contrast Checker o Colour Contrast Analyser) y monta una matriz de cuatro filas: color, fondo, ratio y uso permitido. ¿Hay algún color que solo valga para texto grande y se esté usando en texto normal?
Resumen
- Los fallos de contraste suelen venir de la paleta: corregirla corrige muchas páginas a la vez.
- El color de marca se conserva usándolo donde basta su contraste, invirtiendo la combinación (texto oscuro sobre marca) o creando tonos derivados del mismo tono.
- Organiza cada color en una escala tonal y construye una matriz de combinaciones permitidas, con una columna por cada fondo que uses.
- Los colores semánticos necesitan una variante para texto y otra para fondo; el ámbar es el más difícil y casi nunca sirve como texto.
- Nombra los colores por función, documenta los ratios, repite la matriz para el tema oscuro y revisa cada color nuevo.
Comprueba lo que has aprendido
Esta lección se puede leer libremente. Para hacer su test de 3 preguntas, los ejercicios prácticos con páginas reales, guardar tu avance y optar al examen y al certificado, matricúlate en el curso.