Como criar paleta legível com contraste medido.
Atribua função às cores e teste pares reais de primeiro plano e fundo. Conjunto bonito não garante texto legível ou estados interativos acessíveis.
Adapte o fluxo à sua tarefa.
Escolha cores por função, forneça valores exatos e teste pares previstos de frente e fundo. Inclua estados interativos e outras superfícies quando necessário. Separe gosto do contraste medido e revise em componentes reais.
- O que você fornece
- Atributos da marca e restrições de acessibilidade.
- O que você recebe
- Paletas candidatas com contrastes conferidos.
Veja a entrada e o resultado.
Entrada e saída ilustrativas · exemplo didático, não uma execução real do WebAct
Exemplo campo
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
Exemplo completo
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
Carregue esta entrada no prompt e copie para o WebAct para testar a tarefa. Seu resultado pode ser diferente da ilustração.
Decisões e solução de problemas.
Um par de texto com alto contraste garante interface acessível?
Não. Outros estados, controles e sinais que não dependem de cor exigem revisão. Testar pares é só parte da avaliação.
Por que cor de destaque funciona para decoração mas falha em texto pequeno?
O contraste com o fundo pode ser insuficiente. Mude a função ou ajuste o par.
Referência para este fluxo de trabalho.
Teste com sua própria fonte.
Substitua o exemplo pelo seu material no prompt. Mantenha os requisitos necessários e copie a tarefa para o WebAct.
Personalizar e copiar a tarefa ↑