Cómo construir un sistema de marca que aguante en pantalla

Un sistema de marca aguanta en pantalla cuando la escala tipográfica se lee en un viewport de 320 píxeles, cuando cada color se especifica como par con su razón de contraste medida y cuando el modo oscuro se diseña en lugar de invertirse. WCAG fija el suelo: 4,5:1 en texto y 3:1 en texto grande y gráficos de interfaz.

Puntos clave

• El criterio 1.4.3 de WCAG exige 4,5:1 en texto y 3:1 en texto grande, definido como 18 puntos o 14 en negrita — unos 24 px y 18,5 px (W3C).
• El criterio 1.4.10, Reflujo, nivel AA, exige que el contenido funcione a 320 píxeles CSS de ancho sin scroll en dos dimensiones (W3C).
• El criterio 1.4.11 fija 3:1 para componentes de interfaz y gráficos con significado, y exime a los logotipos (W3C).
• La Directiva (UE) 2019/882 obliga a los Estados miembros a aplicar sus medidas desde el 28 de junio de 2025, con el comercio electrónico dentro del ámbito (EUR-Lex).
• La adopción del modo oscuro es baja: el Web Almanac de 2022 encontró prefers-color-scheme en el 8 % de las páginas, frente al 34 % de prefers-reduced-motion (HTTP Archive, 26 de septiembre de 2022).

Qué significa aguantar en pantalla

La identidad de impresión falla en pantalla por un motivo concreto: el medio no se queda quieto. Quien lee puede ampliar al 400 %, forzar el tamaño de fuente, imponer espaciado, cambiar a tema oscuro o llegar desde un viewport de 320 píxeles. Ninguno es un caso extremo.

Un sistema de marca para pantalla no es un conjunto de capturas. Son reglas que sobreviven a que el lector cambie las condiciones: escala tipográfica en unidades relativas, color en pares, espaciado sobre un ritmo fijo y un comportamiento documentado por preferencia.

Eso cambia lo que son las guías. WCAG 2.2, Recomendación del W3C desde el 5 de octubre de 2023, no es un anexo pegado al diseño: es la hoja de restricciones contra la que se dibuja, igual que un logo se dibuja contra su reproducción más pequeña.

Una escala tipográfica que funciona a 320 píxeles CSS

Reflujo, el criterio 1.4.10, es lo primero que suele fallar. Exige presentar el contenido sin pérdida de información ni funcionalidad y sin scroll en dos dimensiones a 320 píxeles CSS de ancho, que el W3C describe como un viewport de 1.280 píxeles al 400 %.

El criterio 1.4.10 de WCAG, Reflujo, nivel AA, exige que el contenido funcione sin scroll en dos dimensiones a 320 píxeles CSS de ancho en desplazamiento vertical y 256 en horizontal. Equivale a un viewport de 1.280 píxeles al 400 % de zoom. Fuente: W3C Web Accessibility Initiative.

En la práctica elimina tres costumbres. La tipografía de display en píxeles fijos para un lienzo de 1.440, que desborda. Las tablas y tarjetas con anchos mínimos mayores que el viewport. Y el tracking de titular ajustado en grande, que se cierra en un bloque ilegible al bajar de escala.

Construye la escala con una razón pequeña y un mínimo y un máximo por paso, para que el display se comprima más rápido que el texto de lectura, que ya está en la base.

Tipografía que sobrevive al redimensionado y al reespaciado

Otros dos criterios afectan a la tipografía. El 1.4.4 exige ampliar el texto hasta el 200 % sin tecnología asistiva y sin pérdida de contenido ni funcionalidad. El 1.4.12, Espaciado del texto, exige no perder contenido con interlineado de 1,5 veces el tamaño de fuente, párrafos a 2 veces, letras a 0,12 y palabras a 0,16.

Los dos prueban el contenedor, no la tipografía. Se rompen los botones de alto fijo, la navegación de una línea y las tarjetas con desbordamiento recortado. Diseña componentes que crezcan en vertical y ambos se resuelven casi solos.

Las tipografías variables ayudan más de lo que se les reconoce. Las OpenType font variations, anunciadas en septiembre de 2016 por Google, Microsoft, Apple y Adobe dentro de OpenType 1.8, permiten que un archivo lleve un rango continuo de peso y ancho, y el sistema mantiene ajustes ópticos sin ocho archivos estáticos.

El Web Almanac de 2022 mostró que el píxel sigue dominando: el 71 % de las páginas usaba px en font-size, frente al 15 % de em y el 6 % de rem.

El color como pares, no como muestras

Una paleta de diez muestras no es un sistema, porque un color no tiene contraste por sí solo. La unidad es el par: figura sobre fondo, con la razón medida al lado.

Escribe la paleta como matriz de combinaciones permitidas, marcando las que fallan como prohibidas. Cada par lleva un rol —texto de lectura, texto secundario, estado deshabilitado, anillo de foco, borde, icono— y una razón. Lo que no está en la matriz no es combinación de marca.

Especifica los valores base en sRGB, normalizado como IEC 61966-2-1:1999: es lo que asume el navegador sin perfil. Las variantes de gamut amplio van encima, pero el par en sRGB es el que debe pasar.

El Web Almanac de 2022 informó de que el hexadecimal de seis dígitos seguía suponiendo el 49 % de las declaraciones de color, con hsl(), lab() y lch() por debajo del 1 % cada una. Fuente: HTTP Archive Web Almanac, capítulo de CSS, 26 de septiembre de 2022.

Las razones de contraste que acotan la paleta

El criterio 1.4.3 fija 4,5:1 para texto e imágenes de texto, con 3:1 en texto grande, definido como al menos 18 puntos o 14 en negrita; con 1pt = 1,333px equivale a unos 24 px y 18,5 px.

Dos consecuencias. Un color de tono medio rara vez pasa 4,5:1 contra blanco y contra su propio tinte, así que casi toda identidad necesita una variante oscura para texto que no es el primario. Y la tolerancia de 3:1 en texto grande hace usable el color de marca en titulares, que es donde debería trabajar.

Los logotipos están exentos del 1.4.3 y del 1.4.11. La exención es estrecha y no es un permiso: cubre la marca en sus propios colores, no la interfaz construida alrededor. La documentación de entrega es donde se escribe esa distinción, porque nadie la redescubre a mitad de sprint.

Contraste no textual en iconos, bordes y estados

El criterio 1.4.11 exige 3:1 frente a los colores adyacentes en dos casos: la información necesaria para identificar componentes de interfaz y sus estados, y las partes de un gráfico necesarias para entender el contenido.

Eso cubre lo que las paletas suelen ignorar: bordes de campo, indicadores de foco, estados de un toggle, series de un gráfico, trazos de icono y el límite de una tarjeta. Un borde gris claro de 1 píxel sobre blanco es el fallo más habitual, heredado de una paleta de papel donde ese gris era textura.

WCAG 2.2 añadió el criterio 2.5.8, Tamaño del objetivo (mínimo), nivel AA: objetivos de puntero de al menos 24 por 24 píxeles CSS salvo excepciones de espaciado. El tamaño de icono es una decisión de marca con suelo.

El modo oscuro es un estado diseñado, no una inversión

Invertir un tema claro produce dos fallos previsibles: los colores de marca que pasaban 4,5:1 sobre blanco fallan sobre casi negro, y el texto blanco puro sobre negro puro produce un halo que dificulta la lectura larga.

Diseña el oscuro como estado propio: desatura y aclara el tono de marca para figura, sustituye sombras por elevación en pasos de fondo más claros y sitúa la superficie más oscura algo por encima del negro puro. Cada par recibe su equivalente oscuro con su razón medida.

El soporte de plataforma es lo bastante antiguo como para no discutirse. WebKit publicó `prefers-color-scheme` y color-scheme en 2019, y su guía es explícita: los filtros sobre secciones amplias cuestan memoria y rendimiento, y colorear directamente es lo preciso.

La adopción es otra historia: prefers-color-scheme aparecía en el 8 % de las páginas del Web Almanac de 2022. Es una decisión de alcance con su coste, no una casilla.

Qué añade el Acta Europea de Accesibilidad

Hasta hace poco esto era un argumento de calidad. La Directiva (UE) 2019/882 lo convierte en argumento de compra en la Unión Europea. Los Estados miembros debían adoptar las medidas antes del 28 de diciembre de 2022 y aplicarlas desde el 28 de junio de 2025, con el comercio electrónico en el ámbito junto a banca, transporte y libros electrónicos.

La Directiva (UE) 2019/882, el Acta Europea de Accesibilidad, se adoptó el 17 de abril de 2019. Su artículo 31 obliga a adoptar las medidas antes del 28 de diciembre de 2022 y a aplicarlas desde el 28 de junio de 2025. Fuente: EUR-Lex.

La referencia técnica en Europa es EN 301 549, cuya V3.2.1 de marzo de 2021 recoge WCAG 2.1. El efecto práctico: la matriz de contraste y la escala tipográfica pasan a ser entregables que el equipo legal del cliente puede pedir, lo que cambia cómo se define el alcance en el mercado español.

Gobernanza: tokens, documentación y revisión

Nada sobrevive sin mecanismo. Los pares de color, los pasos tipográficos y el espaciado se entregan como design tokens y no como un PDF, porque un token es la única forma que nadie puede aproximar a ojo.

La documentación declara tres cosas por decisión: el valor, el rol permitido y la razón o el tamaño que satisface. Añade lo mismo para el movimiento, que tiene sus propios criterios, y el sistema cubre todas las preferencias de la plataforma.

Después fija un ciclo de revisión. Las regresiones de contraste llegan por cambios de componente, no de paleta, así que la comprobación va en el build. Un sistema que nadie verifica se degrada al ritmo al que se publica el producto.

Preguntas frecuentes

Qué hacer a continuación

Empieza por la hoja de restricciones, no por la paleta: la matriz de contraste, la escala tipográfica con mínimo y máximo por paso, y el reflujo a 320 píxeles CSS. Entrégalo como tokens y mete la comprobación de contraste en el build. Después decide si el tema oscuro entra en alcance y, si entra, diséñalo como estado propio con sus pares medidos. Dentro de seis meses la medida útil no será si el sistema parece coherente en una presentación, sino cuántos componentes se salieron de la matriz sin que nadie lo viera.