Vibe coding para checar contraste de cor antes de lançar o app

Contraste de cor é um dos poucos critérios de design que sai em número. Você coloca a cor do texto e a cor do fundo, e recebe uma razão entre as duas. As normas de acessibilidade fixam um piso para essa razão em texto de tamanho normal, e aceitam um valor mais baixo para texto grande. Como é conta, um agente consegue levantar o problema sozinho, e você consegue conferir a resposta dele em vez de confiar no olho.

Martin estava fechando a identidade visual do Fumava, o app dele para parar de fumar, com agentes rodando em painéis enquanto ele acompanhava o que voltava. A paleta tem laranja. Antes de existir tela montada, um dos agentes parou na combinação mais previsível de todas, botão laranja com texto branco em cima, e avisou que ali tinha problema.

O alerta veio como estimativa, e ele deixou isso claro

O laranja como fundo de botão tem uma armadilha.

Ele disse que texto branco por cima "provavelmente não passa no critério de acessibilidade", e que a razão de contraste "fica na faixa" de 2,5 para 1, contra um mínimo de 4,5 para 1.

Repare no jeito como o agente falou: "provavelmente", "fica na faixa". Nada ali descreve uma medição. É palpite treinado, do tipo que aponta a direção certa sem fechar o valor. Quem lê rápido guarda o 2,5 como se fosse resultado de conta, e aí um chute vira laudo dentro do seu projeto.

O agente também explicou por que valia parar naquele momento, e não na véspera de lançar: contraste ruim é o tipo de coisa que se espalha por muitas telas antes de alguém notar. Enquanto a paleta ainda é um documento, o conserto é uma linha de regra. Depois de construída a interface, o conserto é abrir tela por tela atrás de botão.

A verificação chegou depois, e era pior que a estimativa

Mais tarde, depois de calcular, o agente voltou com o resultado.

Armadilha do laranja confirmou e era pior.

Pior num sentido específico: "Reprova até no critério frouxo de texto grande". A estimativa de 2,5 para 1 já ficava longe do mínimo de 4,5 para 1 exigido em texto de tamanho normal, e o valor real derrubava também a régua mais permissiva, aquela que existe justamente para título e número grande na tela.

A estimativa apontou para o lado certo e errou o valor. Número que um agente te entrega no meio do vibe coding serve para você ir verificar, não para você registrar como fato. Se for aplicar isso na sua paleta, pegue os valores exatos das suas cores, jogue num verificador de contraste e leia o que a conta responder. O mesmo problema apareceu em vibe coding para lancar app primeiro no android.

O laranja ficou, o texto em cima dele mudou

Com texto preto por cima, a mesma cor de fundo "passa o nível mais alto". O laranja continuou sendo o laranja da marca, e a mudança caiu sobre a tipografia: botão laranja "leva texto preto", e a combinação com branco ficou "marcado com proibido" no design system.

A direção dessa regra é o que interessa, porque escrever ao contrário publica conselho errado dentro do seu próprio projeto. Preto sobre laranja passa, branco sobre laranja fica barrado.

Na maioria dos casos, acessibilidade não exige abrir mão da cor da marca; exige escolher a combinação certa em cima dela. Ninguém pediu um laranja mais escuro nem um laranja mais apagado, e a decisão caiu sobre a outra metade do par, o texto.

A decisão também ficou escrita no design system, que é onde o próximo agente vai ler. É a etapa vizinha de a lista de proibições que ele deu ao agente no começo do projeto, pelo mesmo motivo.

Como checar contraste de cor no seu vibe coding antes de lançar

O momento de perguntar isso é o dia em que você fecha a paleta, com as cores ainda soltas num documento e nenhuma tela construída em cima delas. Depois disso o preço sobe a cada tela que você monta.

- Peça ao agente a checagem de contraste par a par nas combinações que você vai usar de verdade, começando pelo botão principal. - Trate o número que ele devolver como bandeira levantada, e confirme num verificador de contraste com os valores exatos das suas cores. - Escreva o resultado no design system como par obrigatório, com a combinação reprovada marcada como proibida.

Pergunta que termina em número é a que vale fazer primeiro no vibe coding, porque você consegue conferir a resposta em vez de acreditar nela.

Dá para acompanhar o alerta, a conta e a regra final na live em que ele define a identidade do Fumava. O intervalo entre o aviso e a confirmação é o que interessa: são dois momentos distantes um do outro, e é nesse intervalo que um palpite vira decisão, se ninguém for conferir.