HomeCasa Prompts

Paleta de modo escuro acessível com verificação de contraste WCAG

Cria uma paleta de modo escuro com tokens semânticos a partir das cores da marca, com tabela de contraste WCAG por par de cores, correções das falhas e código CSS pronto a usar. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 5 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Avançado · Texto · Pendente de revisão editorial

Pensado para:

Prompt

Atua como designer de design systems especializado em cor e acessibilidade (WCAG 2.2).

Contexto:
- Cores da marca (hex): {{cores_marca}}
- Produto: {{produto}}
- Superfície base do modo escuro: {{superficie}}
- Nível de conformidade pretendido: {{nivel_wcag}}
- Componentes que a paleta deve cobrir: {{componentes}}

Entregáveis:
1. Princípios do modo escuro para este produto: porque evitar o preto puro exceto em ecrãs OLED, como exprimir a elevação com superfícies mais claras e como dessaturar as cores da marca para não vibrarem.
2. Tabela de tokens semânticos com valor claro e escuro: fundo, superfícies 1 a 3, texto principal, secundário e desativado, contornos, primário e respetivos estados (hover, pressed), anel de foco, sucesso, aviso, erro, informação e as respetivas cores «on» (texto sobre essa cor).
3. Tabela de contraste por par (texto sobre fundo, texto sobre superfícies, texto sobre primário, contornos e foco sobre fundo): rácio calculado com a fórmula de luminância relativa da WCAG 2.x, requisito aplicável (4,5:1 texto normal, 3:1 texto grande e componentes não textuais; 7:1 e 4,5:1 no nível AAA) e resultado.
4. Para cada par que falhe, um valor alternativo que cumpra e mantenha a intenção da marca.
5. Cores para gráficos (4 a 6 séries) distinguíveis em fundo escuro e que não dependam apenas da tonalidade.
6. Implementação: variáveis CSS, prefers-color-scheme e interruptor manual com preferência guardada.

Restrições:
- Mostra a fórmula e os valores intermédios. Indica claramente que os rácios têm de ser verificados com uma ferramenta de contraste antes da aprovação.
- Nunca transmitas informação apenas pela cor; propõe ícones ou texto de apoio.
- Se faltarem cores essenciais (por exemplo, a cor de erro da marca), pergunta-me primeiro; não apresentes valores inventados como «oficiais».

Formato: tabelas de tokens e de contraste, lista de correções e bloco de código CSS.

Como utilizar

  1. Cola as cores da marca em hexadecimal. 2. Revê a tabela de contraste e confirma cada rácio com um verificador de contraste. 3. Copia as variáveis CSS para o projeto e testa a interface real em modo escuro.

Exemplo de utilização

Cores: #1E5EFF primário, #FF7A00 destaque · Produto: app bancária · Superfície: cinzento-azulado escuro · Nível: AA.

Exemplo de resultado

Contraste sobre a superfície escura #141B2B

Fórmula WCAG 2.x: rácio = (L1 + 0,05) / (L2 + 0,05), com L = 0,2126 R + 0,7152 G + 0,0722 B depois de linearizar cada canal. Luminância da superfície: L ≈ 0,0111.

ParL da corRácioRequisito AAResultado
Texto principal #E6EAF20,820814,3:14,5:1Cumpre
Texto secundário #A9B3C60,44758,1:14,5:1Cumpre
Primário #1E5EFF como texto0,15503,4:14,5:1Não cumpre
Primário ajustado #7FA2FF0,37577,0:14,5:1Cumpre
Sucesso #12B76A0,35046,6:14,5:1Cumpre
Texto branco em botão #1E5EFF—5,1:14,5:1Cumpre

Correção: usa #7FA2FF em links e texto de marca no modo escuro; mantém #1E5EFF só como fundo de botão com texto branco. Confirma todos os rácios com um verificador de contraste antes de aprovar.

:root { --surface-1: #FFFFFF; --text: #101828; --primary-text: #1E5EFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF;
  }
}
[data-theme="dark"] { --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF; }

…

Dados-chave

Categoria
Design UI/UX · Acessibilidade
Tipo de resultado
Texto
Nível
Avançado
Pensado para
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
Cores da marca (hex), Produto, Superfície base, Nível WCAG e Componentes
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Posso confiar nos rácios de contraste calculados pela IA?

Usa-os como rascunho. Os modelos de linguagem podem errar cálculos, por isso verifica cada par com uma ferramenta de contraste antes de publicar.

Porque não usar preto puro como fundo?

Texto branco sobre preto puro pode criar halos e cansar a vista, e dificulta mostrar a elevação. Um cinzento muito escuro costuma funcionar melhor; o preto puro faz sentido sobretudo para poupar energia em ecrãs OLED.

Para que serve este prompt?

Cria uma paleta de modo escuro com tokens semânticos a partir das cores da marca, com tabela de contraste WCAG por par de cores, correções das falhas e código CSS pronto a usar.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Cores da marca (hex), Produto, Superfície base, Nível WCAG e Componentes). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível avançado: destina-se a pessoas com experiência no tema, capazes de avaliar e ajustar o resultado.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados