Cómo hacer un manual de marca de una página, con las combinaciones de color que pasan

La mayoría de los manuales de marca responden la pregunta que hace un cliente, “¿cuáles son nuestros colores?”, y se saltan la que hace después un desarrollador: “¿sobre cuáles de estos puedo poner texto?”. Un manual de una página puede responder las dos, y la segunda respuesta es la que evita que la marca se use mal.

Lo que necesita un manual mínimo

Cuatro cosas, y cada una está ahí porque alguien más adelante va a actuar en función de ella:

• El logo, como archivo. El manual remite a él; no lo rediseña.
• La paleta, con cada color nombrado según su función y dado como valor hexadecimal, para que nadie tenga que sacarlo con un cuentagotas de un PDF.
• Una combinación tipográfica: una fuente para títulos y otra para el texto. Si pones tres opciones, te aseguras de que nadie siga ninguna.
• Una matriz de combinaciones aprobadas, que es la sección que la mayoría de las plantillas deja fuera.

Una matriz de combinaciones aprobadas es una cuadrícula que muestra cada color de la marca como texto sobre cada uno de los demás, con el contraste medido y un pasa o no pasa en cada celda. Convierte una paleta en una guía, porque cinco códigos hexadecimales no le dicen nada a un desarrollador sobre cuál puede llevar texto sobre cuál. Los manuales publicados de UCLA, GOV.UK, el sistema Carbon de IBM y Scope incluyen una, con los fallos marcados; UCLA los etiqueta como DNP, por “does not pass” (no pasa).

Lo que un manual de una página puede omitir son los textos de voz de marca generados y una declaración de misión escrita por una herramienta. Un campo vacío para eso es más honesto que un relleno.

Crea el manual con la herramienta

1. Abre el Brand sheet generator y elige un punto de partida. I have a logo (tengo un logo) extrae hasta cuatro colores distintos directamente de la imagen (PNG, JPEG, WebP o SVG). Start from scratch (empezar desde cero) abre con una paleta de cuatro colores que puedes sobrescribir.
2. Escribe el nombre en Brand name (nombre de la marca).
3. En Palette (paleta), define cada color con su muestra o con su campo hexadecimal, y cámbiale el nombre. Add (añadir) lleva la paleta hasta seis colores y Remove (quitar) la baja hasta dos. Si empezaste desde un logo, revisa los nombres: los colores se etiquetan Primary, Ink, Surface y Accent en el orden en que se encontraron, no según la función que cumplen.
4. En Typography (tipografía), elige una combinación. Los filtros de arriba (All, Modern, Editorial, Technical, Warm, Classic, Expressive) acotan la lista, y Explore all 16 pairings muestra el resto. Todas las fuentes están en Google Fonts bajo la licencia OFL.
5. Lee Approved combinations (combinaciones aprobadas). La línea bajo el título cuenta los pares que fallan. La tabla tiene cuatro columnas: Text on background, WCAG, APCA y Use instead. Debajo de la tabla se señala cualquier par de colores que se confunda en la simulación de daltonismo.
6. Exporta desde la barra inferior: PDF para un documento A4 que puedas enviar, PNG para el manual como una sola imagen que puedas meter en una presentación, y Tokens para los colores como JSON en formato W3C DTCG. Save here (guardar aquí) conserva el manual en este dispositivo.

Incluye los colores que sospechas que van a fallar. Una matriz a la que le quitaste los colores incómodos no es una guía.

Una matriz de cuatro colores, resuelta

La paleta inicial de la herramienta es un buen caso de prueba porque parece segura: Primary #2563EB, Ink #0F172A, Surface #FFFFFF y Accent #F59E0B.

Cada celda es una relación de contraste WCAG: (luminancia más clara + 0.05) ÷ (luminancia más oscura + 0.05). Las luminancias relativas de los cuatro colores son 0.1532, 0.0088, 1 y 0.4389. Cuatro colores dan 4 × 3 = 12 celdas, porque “Ink sobre Surface” y “Surface sobre Ink” son filas distintas. La relación es la misma en los dos sentidos, así que estos son los seis pares distintos:

Par	Cálculo	Relación	Veredicto
Ink y Surface	1.05 ÷ 0.0588	17.85:1	AA
Ink y Accent	0.4889 ÷ 0.0588	8.31:1	AA
Primary y Surface	1.05 ÷ 0.2032	5.16:1	AA
Primary y Ink	0.2032 ÷ 0.0588	3.45:1	Solo texto grande
Primary y Accent	0.4889 ÷ 0.2032	2.40:1	No pasa
Surface y Accent	1.05 ÷ 0.4889	2.14:1	No pasa

Por eso la línea sobre la tabla dice “6 of 12 pairings fail AA for body text” (6 de 12 pares no pasan AA para texto). La mitad de las combinaciones de la paleta no puede llevar texto corrido, y la que sorprende es el acento: el ámbar sobre el fondo blanco de la página mide 2.14:1, muy lejos del 4.5:1 que necesita el texto corrido. Funciona bien como relleno de una etiqueta o de un botón con texto oscuro encima. No es un color de texto sobre blanco.

Las relaciones se truncan, no se redondean. 1.05 ÷ 0.2032 es 5.167 y se muestra como 5.16:1, así que un par a 4.499 nunca puede aparecer como 4.50 y parecer que pasa.

La columna de sustitutos

Marcar un par como fallido es la mitad de una guía. La otra mitad es qué usar en su lugar, y “elige otro color” no es una respuesta cuando el color es la marca.

Cada fila que falla lleva un sustituto, cuando se encuentra uno, que se obtiene fijando el tono del color del texto y buscando en su luminosidad el valor más cercano que supere 4.5:1. La celda significa “este color sobre aquel”, así que siempre se reemplaza el color del texto, nunca el fondo. El sustituto se sigue reconociendo como el color de la marca, porque el tono es lo que hace reconocible un color y la luminosidad es lo que mueve la medición. Esa separación se explica a fondo en cómo mejorar el contraste de color sin cambiar el color de tu marca.

El PDF lleva la misma tabla con tres veredictos, AA, Large only y DNP, y el hexadecimal del sustituto donde lo haya. La columna APCA se queda en pantalla.

Dónde se queda corta una matriz que pasa

Una matriz llena de aprobados es una paleta que no va a fallar por contraste. No es una marca accesible, y vale la pena imprimir tres límites en el propio manual:

• “Texto grande” tiene una definición. WCAG considera grande el texto de 24px o más, o de 18.66px o más en negrita. Los pares de “solo texto grande” van en títulos, no en pies de foto.
• La cifra APCA se calcula para 16px en peso regular. Predice mejor si el texto corrido es legible, y por eso va junto a la relación WCAG en lugar de reemplazarla.
• El contraste es un solo criterio. WCAG 1.4.1 exige por separado que el color nunca sea la única forma de mostrar información, algo que ninguna auditoría de paleta puede comprobar. La línea de daltonismo bajo la tabla es un recordatorio de eso, y cómo crear una paleta apta para daltónicos va más allá.

Otras formas de hacerlo

Ningún sistema operativo tiene un método integrado para hacer un manual de marca ni su matriz. A mano, es una hoja de cálculo: una fila y una columna por color, la diagonal vacía y cada celda restante medida en un verificador de contraste como el Contrast checker. El número de celdas crece rápido. Cuatro colores dan 4 × 3 = 12 mediciones; seis dan 6 × 5 = 30. Encontrar a mano un sustituto para cada fallo significa ajustar la luminosidad y volver a medir hasta que pase.

Cómo comprobar que no se subió nada

El logo que añades se lee en un canvas dentro de la pestaña, y el PDF y el PNG también se generan ahí. El código que escribe cada exportación se descarga la primera vez que presionas el botón, y en el panel Network de las herramientas para desarrolladores aparece como una solicitud de script que entra. Observa ese mismo panel mientras añades tu logo y exportas: nada sale llevando la imagen ni la paleta.

Siguiente paso

Abre el Brand sheet generator con la paleta exactamente como te la entregaron y lee primero las filas que fallan. Ahí es donde el documento se gana su lugar.