Saltar para o conteúdo
Começar

Verificação do contraste de cores

O Do4U verifica o contraste das cores da tua marca e do teu site. Introduzes as tuas cores, uma por linha, e indicas para que serve cada cor: texto, fundo, destaque (por exemplo, um botão) ou contorno. O código calcula a relação de contraste de cada par com a fórmula da WCAG e mostra que níveis atinge: AA e AAA para texto normal e grande, e 3:1 para contornos, ícones e áreas de botões. Os valores não são arredondados para cima. Para cada par que falha recebes a cor mais próxima que passa, uma vez mais escura e uma vez mais clara, no mesmo tom. O Do4U cria também uma paleta ajustada e volta a verificá-la no seu conjunto. Exportas a paleta como propriedades personalizadas CSS, variáveis SCSS ou JSON, e a exportação é feita no teu navegador. Tudo corre em código, sem IA, e é grátis.

Experimenta agora Preços

Grátis e sem conta: Calculadora da relação de contraste →

Para quem é

Para designers, programadores, agências e donos de sites que escolhem as cores da marca ou criam um guia de estilo e querem texto e botões que todos consigam ler.

Utilizações típicas

  • Verificar uma nova paleta da marca antes de começar o design
  • Encontrar um cinzento para texto secundário que ainda passe no AA
  • Verificar as cores de botões, ligações e contornos com o fundo da página
  • Exportar as cores ajustadas como variáveis CSS para a tua folha de estilos

Exemplo

Entrada

#1a1a1a text #777777 text Secundário #ffffff background #cccccc border

Resultado

#1a1a1a sobre #ffffff: 17.4:1, passa no AA e no AAA #777777 sobre #ffffff: 4.47:1, falha o AA para texto normal (passa para texto grande). Mais escura: #767676 → 4.54:1. Mais clara: não é possível #cccccc sobre #ffffff: 1.6:1, falha o contraste não textual de 3:1. Mais escura: #949494 → 3.03:1 Exportação (ajustada): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Um exemplo fixo, abreviado. Os resultados reais são gerados por IA: verifica-os.

Preço e limites

Preço
grátis, até 30 verificações por dia
Disponível com
Grátis, Com pacote
Limite de entrada
Até 3 000 carateres por ficheiro

Privacidade

Processado nos nossos próprios servidores na UE (Polónia). As entradas e os resultados são eliminados após 7 dias (Grátis) ou 30 dias (pacotes), ou logo depois de veres o resultado se escolheres não os guardar. As imagens são eliminadas logo após o processamento.

Na API

Nome da ferramenta: contrast_check. Cria uma tarefa com POST /api/v1/jobs e obtém o resultado com GET /api/v1/jobs/{id}. Encontras a tua chave de API na tua conta.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Documentação completa da API →

Perguntas e respostas

Como é calculada a relação de contraste?

Com a fórmula da WCAG 2.2: primeiro a luminância relativa de cada cor, depois (L1 + 0.05) / (L2 + 0.05), em que L1 é a cor mais clara. O resultado fica entre 1:1 e 21:1. Os valores são comparados sem arredondamento, por isso 4.49:1 não atinge 4.5:1, e a apresentação nunca arredonda para cima.

Que pares são verificados?

O texto é verificado sobre cada fundo e sobre as cores de destaque, com 4.5:1 e 7:1 para texto normal e 3:1 e 4.5:1 para texto grande. As cores de destaque e de contorno são verificadas sobre o fundo com 3:1 para o contraste não textual. Uma cor sem função é comparada com todas as outras cores.

Como são encontradas as cores sugeridas?

Só muda a luminosidade, no espaço de cores OKLCH; o tom mantém-se. O Do4U procura a cor mais próxima que passa, uma vez mais escura e uma vez mais clara, e volta a verificá-la como código hexadecimal. Se nenhuma cor puder passar com um fundo, diz-o.

O meu texto fica guardado?

Só o tempo necessário: 7 dias no plano Free, 30 dias com um pacote – ou nunca, se preferires não guardar. O tratamento é feito nos nossos próprios servidores na UE (Polónia).

Posso usar o resultado de imediato?

Os resultados são gerados por IA. Lê-os com atenção antes de os publicares ou enviares.

Ferramentas relacionadas

  • Verificação de acessibilidade

    Verifica uma página quanto a barreiras comuns e explica como as corrigir.

  • Feedback de design a partir de uma captura de ecrã

    Carrega uma captura de ecrã de uma página ou aplicação e recebe observações numeradas e concretas sobre o tamanho dos botões, o contraste, o texto em imagens, a hierarquia e o espaçamento, cada uma com uma moldura na imagem. Uma avaliação por IA, não uma medição.

  • Textos alternativos

    Descrições curtas de imagens para leitores de ecrã e motores de pesquisa.

Todas as ferramentas →