Como fazer um guia de marca de uma página, com os pares de cores que passam no contraste

A maioria dos guias de marca responde à pergunta que o cliente faz, “quais são as nossas cores?”, e pula a que o desenvolvedor faz em seguida: “em quais delas eu posso colocar texto?”. Um guia de uma página consegue responder às duas, e a segunda resposta é a parte que impede que a marca seja mal usada.

O que um guia mínimo precisa ter

Quatro coisas, e cada uma está lá porque alguém mais adiante vai agir com base nela:

• O logo, como arquivo. O guia aponta para ele; não o redesenha.
• A paleta, com cada cor nomeada pela sua função e informada como valor hex, para que ninguém precise capturá-la de um PDF com conta-gotas.
• Uma combinação de fontes: uma para títulos e outra para o corpo. Listar três opções garante que nenhuma delas seja seguida.
• Uma matriz de combinações aprovadas, a seção que a maioria dos modelos deixa de fora.

Matriz de combinações aprovadas é uma grade que mostra cada cor da marca como texto sobre cada uma das outras, com o contraste medido e um aprovado ou reprovado em cada célula. Ela transforma uma paleta em orientação, porque cinco códigos hex não dizem nada a um desenvolvedor sobre qual cor pode levar texto sobre qual. Os guias publicados da UCLA, do GOV.UK, do sistema Carbon da IBM e da Scope têm uma, com as reprovações marcadas; a UCLA as rotula como DNP, de “does not pass” (não passa).

O que um guia de uma página pode deixar de fora é texto de tom de voz gerado e uma declaração de missão escrita por uma ferramenta. Um campo vazio para isso é mais honesto do que enchimento.

Monte o guia com a ferramenta

1. Abra o Brand sheet generator e escolha um ponto de partida. I have a logo (tenho um logo) lê até quatro cores distintas direto da imagem (PNG, JPEG, WebP ou SVG). Start from scratch (começar do zero) abre com uma paleta de quatro cores que você pode substituir.
2. Digite o nome em Brand name (nome da marca).
3. Em Palette, defina cada cor pela amostra ou pelo campo hex e renomeie-a. Add leva a paleta a até seis cores, e Remove, a no mínimo duas. Se você começou de um logo, confira os nomes: as cores recebem os rótulos Primary, Ink, Surface e Accent na ordem em que foram encontradas, não pela função que exercem.
4. Em Typography, escolha uma combinação. Os filtros no topo (All, Modern, Editorial, Technical, Warm, Classic, Expressive) estreitam a lista, e Explore all 16 pairings mostra o resto. Todas as fontes estão no Google Fonts, sob a licença OFL.
5. Leia Approved combinations (combinações aprovadas). A linha embaixo do título conta os pares reprovados. A tabela tem quatro colunas: Text on background, WCAG, APCA e Use instead. Embaixo da tabela, aparece o nome de qualquer par de cores que se confunde na simulação de daltonismo.
6. Exporte pela barra inferior: PDF para um documento A4 para enviar, PNG para o guia como uma única imagem para colocar numa apresentação, e Tokens para as cores em JSON no padrão W3C DTCG. Save here guarda o guia neste dispositivo.

Inclua as cores que você suspeita que vão reprovar. Uma matriz sem as cores problemáticas não é um guia.

Uma matriz de quatro cores, passo a passo

A paleta inicial da ferramenta é um bom caso de teste porque parece segura: Primary #2563EB, Ink #0F172A, Surface #FFFFFF e Accent #F59E0B.

Cada célula é uma razão de contraste WCAG: (luminância da mais clara + 0.05) ÷ (luminância da mais escura + 0.05). As luminâncias relativas das quatro cores são 0.1532, 0.0088, 1 e 0.4389. Quatro cores dão 4 × 3 = 12 células, porque “Ink sobre Surface” e “Surface sobre Ink” são linhas separadas. A razão é a mesma nos dois sentidos, então aqui estão os seis pares distintos:

Par	Conta	Razão	Veredito
Ink e Surface	1.05 ÷ 0.0588	17.85:1	AA
Ink e Accent	0.4889 ÷ 0.0588	8.31:1	AA
Primary e Surface	1.05 ÷ 0.2032	5.16:1	AA
Primary e Ink	0.2032 ÷ 0.0588	3.45:1	Só texto grande
Primary e Accent	0.4889 ÷ 0.2032	2.40:1	Reprovado
Surface e Accent	1.05 ÷ 0.4889	2.14:1	Reprovado

Assim, a linha acima da tabela mostra “6 of 12 pairings fail AA for body text” (6 de 12 pares reprovam no AA para texto de corpo). Metade das combinações da paleta não serve para texto de corpo, e a que surpreende as pessoas é o destaque: âmbar sobre o fundo branco da página mede 2.14:1, longe dos 4.5:1 de que o texto de corpo precisa. Ele funciona bem como preenchimento de um selo ou de um botão com texto escuro por cima. Não é uma cor de texto sobre branco.

As razões são truncadas, não arredondadas. 1.05 ÷ 0.2032 é 5.167, exibido como 5.16:1, de modo que um par em 4.499 nunca aparece como 4.50 e parece passar.

A coluna de substitutos

Marcar um par como reprovado é metade de um guia. A outra metade é o que usar no lugar, e “escolha outra cor” não é resposta quando a cor é a marca.

Cada linha reprovada traz um substituto, quando é possível encontrar um, obtido mantendo o matiz da cor do texto e buscando na luminosidade dela o valor mais próximo que passe de 4.5:1. A célula significa “esta cor sobre aquela”, então é sempre a cor do texto que é substituída, nunca o fundo. O substituto continua sendo lido como a cor da marca, porque o matiz é o que torna uma cor reconhecível e a luminosidade é o que move a medição. Essa separação é explicada em detalhe em como corrigir o contraste de cores sem mudar a cor da marca.

O PDF traz a mesma tabela com três vereditos, AA, Large only e DNP, e o hex substituto sempre que houver um. A coluna APCA fica só na tela.

Onde uma matriz aprovada para

Uma matriz cheia de aprovações é uma paleta que não vai reprovar por contraste. Não é uma marca acessível, e vale imprimir três limites no próprio guia:

• “Texto grande” tem definição. O WCAG considera texto grande a partir de 24px, ou a partir de 18.66px em negrito. Pares “só texto grande” vão em títulos, não em legendas.
• O número do APCA é calculado para 16px em peso regular. Ele prevê melhor se o texto de corpo é legível, e por isso fica ao lado da razão WCAG em vez de substituí-la.
• Contraste é um critério só. O WCAG 1.4.1 exige separadamente que a cor nunca seja a única forma de transmitir uma informação, e nenhuma auditoria de paleta consegue verificar isso. A linha sobre daltonismo embaixo da tabela é um lembrete disso, e como montar uma paleta segura para daltônicos vai além.

Outras formas de fazer

Não existe método nativo do sistema operacional para fazer um guia de marca ou a sua matriz. À mão, é uma planilha: uma linha e uma coluna por cor, a diagonal vazia e cada célula restante medida num verificador de contraste como o Contrast checker. O número de células cresce rápido. Quatro cores dão 4 × 3 = 12 medições; seis dão 6 × 5 = 30. Encontrar um substituto para cada reprovação à mão significa ajustar a luminosidade e medir de novo até passar.

Como confirmar que nada foi enviado

O logo que você adiciona é lido num canvas na aba, e o PDF e o PNG também são gerados ali. O código que escreve cada exportação é baixado na primeira vez que você pressiona o botão, o que aparece no painel Network das ferramentas de desenvolvedor como uma requisição de script chegando. Observe o mesmo painel enquanto adiciona o logo e exporta: nada sai levando a imagem ou a paleta.

Próximo passo

Abra o Brand sheet generator com a paleta exatamente como ela foi entregue a você e leia primeiro as linhas reprovadas. É nelas que o documento justifica a sua existência.