Criar uma paleta de cores acessível com IA, passo a passo

Pedir uma paleta de cores para a IA é fácil e o resultado sai bonito na hora. O problema aparece depois: metade das combinações não passa em contraste, os papéis de cada cor não estão definidos e, quando você vai aplicar num produto de verdade, a paleta linda vira texto que ninguém lê. Este passo a passo resolve isso — com a etapa de acessibilidade no meio, não no fim.

Não precisa ser designer. Se cor e tipografia te assustam um pouco, este texto anda junto com tipografia para quem não é designer.

Passo 1: comece pela função, não pela cor

Antes de abrir qualquer IA, responda em uma linha: que sensação o produto precisa passar e onde ele vai viver? "App financeiro que precisa transmitir confiança e calma" é um briefing. "Quero azul" não é. A IA responde muito melhor a intenção do que a palpite de cor — e você evita a paleta genérica que serve pra qualquer coisa e não combina com nada.

Passo 2: peça a paleta base — e peça direito

Um bom pedido traz contexto, restrição e formato de saída. Em vez de "me dê uma paleta bonita", algo como:

Preciso de uma paleta para um app financeiro que transmita
confiança e calma. Quero:
- 1 cor de marca (primária)
- 1 cor de acento para ações
- uma escala de neutros (do quase branco ao quase preto)
- 1 cor de sucesso, 1 de alerta, 1 de erro
Devolva os valores em HEX, com um nome curto para cada cor.

Repare que você não pediu "as cores" — pediu os papéis. Isso é o que separa uma paleta usável de um punhado de HEX solto.

Passo 3: teste o contraste (a etapa que a IA erra)

Aqui está o pulo do gato. A IA quase sempre entrega combinações que parecem boas mas falham em contraste — e ela não checa isso sozinha de forma confiável. Você precisa medir.

Por que essa etapa cai no seu colo? Porque a IA otimiza a paleta por harmonia visual — tons que combinam entre si —, e harmonia não é a mesma coisa que legibilidade. Duas cores podem ser lindas juntas e, ainda assim, uma sobre a outra formar um texto que cansa a vista em segundos. O contraste é uma medida objetiva, com número; a "beleza" que a IA persegue é subjetiva. Quando os dois brigam, quem decide o que vai para a tela é o número.

A régua é o WCAG. Os alvos que importam:

• 4,5:1 — texto normal sobre o fundo. É o mínimo para o corpo de texto ser legível.
• 3:1 — texto grande (títulos) e elementos de interface (bordas de botão, ícones que carregam significado).

Pegue cada par que você vai usar de fato — texto sobre fundo, texto do botão sobre a cor do botão — e passe num verificador de contraste (há vários gratuitos; procure por "contrast checker"). Peça à IA para ajustar o que não passar: "o texto sobre o acento deu 3,1:1; escureça o acento até passar de 4,5:1 mantendo o tom". Ela corrige rápido quando você aponta o número.

Passo 4: defina os papéis (tokens)

Uma cor sem papel é decoração. Transforme a paleta aprovada em tokens — nomes por função, não por cor:

--fundo:        #0f1115
--superficie:   #1a1d24
--texto:        #e8eaed
--texto-suave:  #a0a4ab
--marca:        #4f7cff
--acento:       #22d3ee
--sucesso:      #22c55e
--alerta:       #f59e0b
--erro:         #ef4444

Nomear por função (--texto, não --cinza-claro) é o que deixa a paleta sobreviver a mudanças: no dia em que a marca virar verde, você troca um valor e o resto continua fazendo sentido. É o mesmo princípio que sustenta consistência num design system com IA.

Passo 5: cheque em situação real

Paleta se prova aplicada, não no swatch. Faça três testes rápidos:

• Tema claro e escuro: se o produto tem os dois, cada token precisa de um valor em cada tema. Uma cor de acento que brilha no escuro pode sumir no claro.
• Daltonismo: simule (há extensões de navegador para isso). Se a única diferença entre "sucesso" e "erro" é a cor, quem não distingue verde de vermelho fica perdido — junte um ícone ou texto ao sinal.
• Estados: hover, foco, desabilitado. O estado de foco precisa ser visível para quem navega por teclado; não deixe a IA "sumir" com ele em nome do minimalismo.

Passo 6: documente as regras de uso

Termine escrevendo, em três linhas, quando usar cada cor: "acento só em ação principal; nunca dois acentos na mesma tela; erro só em mensagem de erro, nunca como enfeite". Sem isso, a paleta linda vira bagunça na segunda tela, porque cada pessoa (ou cada nova conversa com a IA) usa as cores de um jeito.

O resumo honesto

A IA é ótima para o Passo 2 (gerar opções) e para o Passo 4 (converter em tokens quando você dá a estrutura). Ela é fraca no Passo 3 (contraste) e não faz o Passo 1 nem o Passo 6 por você — que são justamente os que decidem se a paleta funciona. Use a velocidade dela onde ela é forte, e assuma você as etapas de julgamento. Uma paleta acessível não é a mais bonita que a IA cospe; é a que qualquer pessoa consegue ler.