Verificador de acessibilidade para visao de cores

Mede contraste WCAG, simula deficiencias de visao de cor e destaca areas de baixo contraste em capturas.

Este verificador avalia tanto a conformidade de contraste quanto o comportamento de um par de cores para usuarios com diferentes deficiencias de visao de cor.

Significado dos selos:

  • AA normal: indica se a relacao de contraste atende ao WCAG AA para texto de tamanho normal. O limite e 4.5:1.
  • AAA normal: indica se a relacao de contraste atende ao WCAG AAA para texto de tamanho normal. O limite e 7:1.

Por que isso importa:

  • "Normal" significa texto comum, labels pequenos e a maior parte da interface.
  • Texto grande tem limites menores no WCAG: AA large passa com 3:1 e AAA large com 4.5:1.
  • Assim, uma combinacao pode falhar em AAA normal e ainda ser aceitavel para titulos grandes ou texto em destaque.

Campos:

  • Cor de primeiro plano: texto, icone ou cor principal posicionada por cima
  • Cor de fundo: cor da superficie ao fundo
  • Imagem de design: captura opcional para analisar regioes com contraste local insuficiente
  • Nivel WCAG: controla o limite usado para marcar areas de risco na imagem

Como ler o resultado:

  • Os cards Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia mostram a aparencia do par em cada simulacao.
  • A relacao de contraste e recalculada apos cada simulacao para mostrar se uma combinacao segura na visao normal piora para outros usuarios.
  • A analise da captura marca blocos cujo contraste local fica abaixo do limite WCAG escolhido.

Exemplos de resultados

1 Exemplos

Verificar uma paleta de botao para acessibilidade visual

Compara cores com WCAG e simulacoes antes de fechar um tema de UI.

Color vision accessibility report
Ver parâmetros de entrada
{ "foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA" }

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/webp

Fatos principais

Categoria
Design e cor
Tipos de entrada
color, file, select
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Verificador de Acessibilidade para Visão de Cores é uma ferramenta essencial para designers e desenvolvedores que precisam garantir que suas interfaces sejam legíveis para todos os usuários. Ele calcula a relação de contraste WCAG entre as cores de primeiro plano e fundo, simula como essas cores aparecem para pessoas com diferentes tipos de daltonismo e permite o envio de capturas de tela para identificar automaticamente áreas de baixo contraste no design.

Quando usar

  • •Ao definir a paleta de cores de um novo site ou aplicativo para garantir conformidade com as diretrizes de acessibilidade.
  • •Durante auditorias de acessibilidade para verificar se botões, textos e ícones possuem contraste suficiente contra seus fundos.
  • •Ao revisar mockups e capturas de tela de interfaces complexas para identificar rapidamente regiões com problemas de legibilidade.

Como funciona

  • •Insira a cor de primeiro plano (texto ou ícone) e a cor de fundo usando códigos hexadecimais ou o seletor de cores.
  • •Opcionalmente, faça o upload de uma imagem do seu design e selecione o nível de conformidade desejado (WCAG AA ou AAA).
  • •A ferramenta calcula a relação de contraste e exibe selos de aprovação para textos normais e grandes.
  • •Visualize simulações em tempo real para Protanopia, Deuteranopia, Tritanopia e Acromatopsia, além de uma análise na imagem enviada destacando falhas de contraste local.

Casos de uso

Validação de temas de UI (Dark Mode e Light Mode) para garantir que as cores de texto e fundo mantenham a legibilidade em ambos os modos.
Teste de acessibilidade de materiais gráficos e banners digitais antes da publicação em redes sociais ou campanhas de e-mail.
Ajuste de cores de botões de chamada para ação (CTA) para garantir que se destaquem e sejam acessíveis a usuários daltônicos.

Exemplos

1. Validação de paleta de cores para botões primários

UX/UI Designer
Contexto
Um designer está criando um novo design system e precisa garantir que o botão primário escuro com texto branco seja acessível.
Problema
Verificar se a combinação de cores atende ao padrão WCAG AA e se continua legível para usuários com daltonismo.
Como usar
Insira `#ffffff` como cor de primeiro plano e `#1f2937` como cor de fundo, selecionando o nível WCAG AA.
Configuração de exemplo
Foreground: #ffffff, Background: #1f2937, WCAG Level: AA
Resultado
A ferramenta confirma que o contraste atende ao nível AA Normal. Os cards de simulação mostram que a legibilidade se mantém alta para Deuteranopia e Protanopia.

2. Auditoria de contraste em uma landing page

Desenvolvedor Front-end
Contexto
A equipe de QA relatou que alguns textos sobre imagens de fundo na landing page estão difíceis de ler.
Problema
Identificar rapidamente quais áreas exatas da página não possuem contraste suficiente.
Como usar
Faça o upload da captura de tela da landing page no campo 'Imagem de design' e defina o nível WCAG como AA.
Configuração de exemplo
Design Image: landing_page.webp, WCAG Level: AA
Resultado
O relatório gera uma análise da imagem com blocos destacados nas áreas onde o contraste local falha em atingir a proporção de 4.5:1, orientando os ajustes de CSS.

Testar com amostras

image, png, jpg
Exemplos de Processamento de Imagem Windows C++
Exemplos de processamento de imagem Windows C++ incluindo ler/salvar imagens, redimensionamento e conversão de formato usando Windows Imaging Component
preferred input family image
image
Exemplos de Processamento de Imagem Web Rust
Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato
preferred input family image
image
Processamento de Imagem macOS Objective-C - Exemplos
Exemplos de processamento de imagem macOS Objective-C incluindo leitura/escrita de imagem, redimensionamento de imagem e conversão de formato
preferred input family image
image
Exemplos de Processamento de Imagem Web Python
Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato
preferred input family image
image

Hubs relacionados

Ferramentas de Image para Convert
Explore 100 ferramentas de image para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Image
Explore 40 ferramentas de image para fluxos de utility e encontre utilitários próximos com rapidez.
Ferramentas de Validation para Validate
Explore 16 ferramentas de validation para fluxos de validate e encontre utilitários próximos com rapidez.

FAQ

O que significa WCAG AA e AAA?

São níveis de conformidade de acessibilidade. O nível AA exige uma relação de contraste de 4.5:1 para textos normais, enquanto o AAA exige 7:1, garantindo maior legibilidade.

Quais tipos de daltonismo a ferramenta simula?

A ferramenta simula Protanopia (dificuldade com vermelho), Deuteranopia (dificuldade com verde), Tritanopia (dificuldade com azul) e Acromatopsia (visão em tons de cinza).

Por que o contraste muda nas simulações de daltonismo?

Porque a percepção de luminosidade e cor varia de acordo com a deficiência visual. Uma combinação segura na visão normal pode se tornar ilegível para usuários daltônicos.

Posso analisar uma interface inteira de uma vez?

Sim, você pode enviar uma captura de tela (PNG, JPEG ou WEBP) e a ferramenta marcará os blocos onde o contraste local estiver abaixo do limite WCAG escolhido.

Qual é a diferença entre texto normal e texto grande no WCAG?

O texto grande é mais fácil de ler, por isso o WCAG permite limites de contraste menores. Para o nível AA, o texto grande passa com 3:1, enquanto o texto normal exige 4.5:1.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-vision-accessibility-checker

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
foreground color Sim -
background color Sim -
designImage file (Upload necessário) Não -
wcagLevel select Não -

Os parâmetros de tipo arquivo precisam ser carregados primeiro via POST /upload/color-vision-accessibility-checker para obter filePath, depois filePath deve ser passado ao campo de arquivo correspondente.

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-color-vision-accessibility-checker": {
      "name": "color-vision-accessibility-checker",
      "description": "Mede contraste WCAG, simula deficiencias de visao de cor e destaca areas de baixo contraste em capturas.",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-vision-accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Suporta links de arquivos URL ou codificação Base64 para parâmetros de arquivo.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]