Color en diseño web: sistema de tokens, contraste WCAG y modo oscuro

Casi todos los proyectos web empiezan con una paleta de marca que alguien diseñó pensando en papel, en un rótulo o en una presentación. Cinco colores bonitos, con su referencia Pantone y su CMYK. Y casi siempre, cuando los llevamos a pantalla, aparece la misma escena: el naranja corporativo, tan reconocible en la fachada, no se lee como texto sobre blanco; el gris elegante de los textos secundarios se queda en un susurro en el móvil a pleno sol.

No es que la paleta esté mal. Es que una paleta de marca y un sistema de color web son dos cosas distintas. La primera dice qué colores representan a la marca. El segundo decide qué color tiene cada cosa en la interfaz, en cada estado, en modo claro y oscuro, y con qué contraste. Pasar de una a otro es uno de los trabajos más finos de un proyecto web.

Si estás todavía eligiendo los colores de tu marca, empieza por cómo elegir los colores de tu marca. Esta guía arranca justo después: cuando ya tienes la paleta y quieres que funcione en una web.

01De la paleta de marca al sistema de color

Una web necesita más colores de los que parece. Además de los de marca, hacen falta fondos y superficies, varios niveles de texto, bordes, colores de acción con sus estados (normal, encima, pulsado, desactivado, foco), y colores de estado para mensajes de éxito, aviso, error e información. En una web corporativa normal no es raro llegar a 30 o 40 valores de color.

Lo que pone orden en todo eso es pensar en tres capas:

1. 01Escalas de color. Cada color de marca se convierte en una escala de 9 a 11 tonos, del más claro al más oscuro (por convención, del 50 al 900 o 950). Así tienes variantes para fondos suaves, bordes, textos y estados sin salir del mismo tono.
2. 02Neutros. Una escala de grises, a menudo ligeramente teñida con el color de marca para que no resulte fría. Es la que más se usa: fondos, textos, bordes, separadores.
3. 03Colores funcionales. Verde, ámbar, rojo y azul para éxito, aviso, error e información, ajustados para que convivan con la marca.

Para construir escalas uniformes, el espacio de color OKLCH (disponible en CSS en todos los navegadores actuales) es muy cómodo: su luminosidad es perceptualmente uniforme, así que dos tonos de la misma luminosidad se ven igual de claros aunque sean de colores distintos. Con HSL eso no ocurre, y un amarillo y un azul con la misma «L» se perciben muy diferentes.

02Tokens de color: nombres que describen la función

Un token es una variable con nombre que guarda un valor de diseño. La clave de un buen sistema de color está en separar los tokens en dos niveles:

• →Primitivos: describen el color. naranja-600, gris-900. No dicen dónde se usan.
• →Semánticos: describen la función. color-accion, texto-principal, superficie-elevada, borde-campo. Apuntan a un primitivo.

Los componentes solo usan tokens semánticos. Un botón no es «naranja-600»; es «color-accion». Esto tiene dos ventajas enormes: si un día la marca ajusta su naranja, se cambia en un sitio; y el modo oscuro se reduce a reasignar los semánticos a otros primitivos. Si quieres ver el concepto completo, aplicado también a tipografía y espaciado, lo explicamos en design tokens explicados.

:root {
  /* Primitivos */
  --naranja-500: #E8743B;
  --naranja-700: #C2551C;
  --naranja-800: #A84A18;
  --gris-50: #F7F7F5;
  --gris-600: #5C6370;
  --gris-900: #1F2A37;
  /* Semánticos */
  --superficie: var(--gris-50);
  --texto-principal: var(--gris-900);
  --texto-secundario: var(--gris-600);
  --color-accion: var(--naranja-700);
  --color-accion-hover: var(--naranja-800);
  --color-marca-decorativo: var(--naranja-500);
}
.boton { background: var(--color-accion); color: #fff; }
.boton:hover { background: var(--color-accion-hover); }

Fíjate en el detalle: el naranja de marca (naranja-500) se reserva para uso decorativo, y la acción usa un tono más profundo de la misma escala. Ahora verás por qué.

03Contraste WCAG 2.2: los números que importan

Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2, del W3C) fijan contrastes mínimos entre un color y su fondo. Se expresan como una razón que va de 1:1 (mismo color) a 21:1 (negro sobre blanco). Estos son los criterios que afectan al color en nivel AA, el que se toma como referencia en España y en la Unión Europea:

Algunas cifras de referencia que ayudan a calibrar el ojo: el gris #767676 sobre blanco da 4,54:1, justo el mínimo para texto. El naranja #E8743B del ejemplo anterior da 3,00:1 sobre blanco: vale para un titular grande o para el borde de un campo, pero no para texto normal ni para el texto blanco de un botón. Su versión #C2551C llega a 4,56:1 y ya sirve para botones y enlaces. Mismo tono, mismo carácter, una luminosidad algo más baja.

Más allá del texto

El contraste afecta a más cosas que a los párrafos. Revisa también:

• →Campos de formulario: un borde gris claro (#D0D5DD sobre blanco da 1,47:1) hace que el campo desaparezca. Un borde de al menos 3:1 lo hace visible.
• →Indicador de foco: el contorno que aparece al navegar con teclado necesita contraste suficiente y un grosor visible. Un anillo de 2 px en el color de acción con 2 px de separación funciona bien.
• →Enlaces dentro de texto: si se distinguen solo por el color, añade subrayado. Es la forma más clara y cumple el criterio 1.4.1.
• →Estados de error: el rojo no basta; acompáñalo de un icono y un mensaje.

Texto sobre fotografía

Es el caso más delicado y el más frecuente en las portadas: un titular blanco sobre una foto. El contraste cambia en cada punto de la imagen, así que lo que cuenta es la zona más clara que queda detrás de las letras. Lo que funciona, por orden de preferencia:

1. 01Elegir o reencuadrar la foto para que el texto caiga sobre una zona oscura y tranquila: un cielo al atardecer, una pared en sombra, un fondo desenfocado.
2. 02Un degradado suave desde el lado del texto, de negro al 50–60 % de opacidad a transparente. Oscurece solo donde hace falta y conserva la luz del resto de la imagen.
3. 03Una capa uniforme sobre toda la foto, de un 35 a un 50 % de opacidad, cuando la imagen es muy variada.
4. 04Sacar el texto de la foto en móvil y colocarlo debajo, sobre la superficie neutra. Muchas veces es la solución más elegante.

Para comprobarlo, mide el contraste con el cuentagotas sobre el punto más claro detrás del texto, no sobre el tono medio de la imagen.

04Cómo repartir el color en una página

Con el sistema definido, toca decidir cuánto color usar y dónde. Una pauta de interiorismo que funciona muy bien en web es la proporción 60-30-10: alrededor del 60 % de la superficie en un color dominante (normalmente el fondo neutro), un 30 % en un color secundario (superficies, bloques, imágenes) y un 10 % en el color de acento.

Ese 10 % es valioso precisamente porque es escaso. Si el color de acción es el único elemento naranja de la pantalla, el botón se encuentra sin buscarlo. Si el naranja también está en titulares, iconos, fondos y separadores, el botón se pierde entre todos ellos. En el estudio aplicamos una regla práctica: el color de acción se reserva para lo que se puede pulsar.

05Modo oscuro: reasignar, no invertir

Cada vez más personas usan el sistema operativo en modo oscuro, y una web que respeta esa preferencia transmite cuidado. El navegador la comunica mediante la consulta prefers-color-scheme, y con tokens semánticos el modo oscuro se reduce a reasignar valores. Para profundizar en las decisiones de interfaz del modo oscuro, en modo oscuro bien diseñado entramos al detalle; aquí van las pautas esenciales para una web.

1. 01Fondo gris muy oscuro en lugar de negro puro. #121212, el valor que propone Material Design, es un buen punto de partida. Sobre negro absoluto, el texto blanco produce un halo molesto para muchas personas con astigmatismo.
2. 02Texto en gris claro, no blanco puro. Un #E6E6E6 sobre #121212 da 15:1, de sobra para leer con comodidad.
3. 03Colores de acción más claros y menos saturados. El naranja #E8743B, que en claro solo servía como decorativo, sobre #121212 da 6,24:1 y funciona perfectamente como color de acción.
4. 04Elevación con luz, no con sombra. En oscuro las sombras apenas se ven; las superficies elevadas (tarjetas, menús, modales) se aclaran un poco respecto al fondo.
5. 05Imágenes e ilustraciones revisadas: logotipos en versión negativa, ilustraciones con fondo transparente, fotos que no deslumbren.

:root {
  color-scheme: light dark;
  --superficie: light-dark(#F7F7F5, #121212);
  --superficie-elevada: light-dark(#FFFFFF, #1E1E1E);
  --texto-principal: light-dark(#1F2A37, #E6E6E6);
  --texto-secundario: light-dark(#5C6370, #9AA0A6);
  --color-accion: light-dark(#C2551C, #E8743B);
}
body { background: var(--superficie); color: var(--texto-principal); }

La función light-dark() elige automáticamente el primer valor en modo claro y el segundo en oscuro, siempre que se declare color-scheme. Si necesitas que el usuario pueda cambiar de modo manualmente con un botón, se combina con un atributo en el elemento raíz que fuerce color-scheme: light o dark.

06Checklist para revisar el color de tu web

1. 01Todos los textos de párrafo llegan a 4,5:1 con su fondo, también sobre imágenes y degradados.
2. 02Los botones tienen contraste suficiente en texto y en el propio botón respecto al fondo.
3. 03Los campos de formulario tienen bordes de al menos 3:1.
4. 04El foco de teclado es visible en todos los elementos interactivos.
5. 05Los enlaces en texto se distinguen por algo más que el color.
6. 06Errores, avisos y confirmaciones combinan color, icono y texto.
7. 07El color de acción no se usa en elementos que no se pueden pulsar.
8. 08En modo oscuro, nada queda invisible: logotipos, iconos, gráficos y bordes.
9. 09Los colores están definidos como tokens y los componentes usan los semánticos.

07Un color que se lee y se reconoce

Un buen sistema de color hace dos cosas a la vez: deja que la marca se reconozca y garantiza que cualquier persona pueda leer y usar la web. Cuando se piensa con tokens desde el principio, ambas cosas conviven sin tensión, y el modo oscuro, las campañas o un ajuste futuro de marca se resuelven en minutos.

En SIMA trabajamos el color en la frontera entre la identidad de marca y el diseño web: partimos de la paleta, construimos las escalas y entregamos los tokens listos para desarrollo. Si quieres que revisemos cómo se comporta el color de tu web o preparar el de una nueva, escríbenos.