# Verificador de acessibilidade para visao de cores Mede contraste WCAG, simula deficiencias de visao de cor e destaca areas de baixo contraste em capturas. > Página canônica: https://elysiatools.com/pt/tools/color-vision-accessibility-checker - **Categoria:** Design - **Palavras-chave:** daltonismo, acessibilidade, wcag, contraste ## Visão geral 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. ## Entradas - **Cor de primeiro plano** (color) - **Cor de fundo** (color) - **Imagem de design** (file) - **Nivel WCAG** (select) ## 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. ## Perguntas frequentes ### 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. ## Ferramentas relacionadas - [Verificador de acessibilidade](https://elysiatools.com/pt/tools/accessibility-checker): Detecta problemas comuns de WCAG 2.1 em HTML, paginas ou imagens de design e retorna orientacoes praticas - [Extrator de paleta de cores da imagem](https://elysiatools.com/pt/tools/image-color-palette-extractor): Envia uma imagem, extrai cores dominantes e exporta tokens prontos para codigo com checagem de contraste - [Analisador de imagem VP8](https://elysiatools.com/pt/tools/vp8-image-analyzer): Analisa imagens WebP/VP8 com Sharp, gera um displacement map em escala de cinza e renderiza relevo 3D com Three.js - [Gerador de heatmap de acessibilidade](https://elysiatools.com/pt/tools/accessibility-heatmap-generator): Gera um heatmap de acessibilidade focado em contraste a partir de captura ou HTML e sugere cores de ajuste - [Extrator de Canais de Imagem](https://elysiatools.com/pt/tools/image-channel): Extrai, manipula e analisa canais de cores individuais (RGB, Alpha, Luminância) com opções de processamento profissional - [Extrator de Cores de Imagem](https://elysiatools.com/pt/tools/image-color-extractor): Extrai cores dominantes de imagens usando vários algoritmos incluindo clustering k-means e análise de histograma - [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons - [Graduação de Cor Cinematográfica](https://elysiatools.com/pt/tools/image-cinematic-color): Aplique graduação de color cinematográfico profissional às suas imagens. ## Exemplos - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Rust](https://elysiatools.com/pt/samples/web-image-processing-rust): Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato ## Conteúdo relacionado - [Geradores de efeitos CSS, paletas e tokens de design](https://elysiatools.com/pt/hubs/design-generate): Ferramentas reunidas para efeitos visuais em CSS, construcao de paletas e geracao de tokens de design em um unico hub. - [Ferramentas de auditoria de acessibilidade web e cores acessiveis](https://elysiatools.com/pt/hubs/web-accessibility-audits): Revise problemas WCAG, ordem de leitor de tela, falhas de contraste, risco para deficiencia de visao de cores e escolhas de cor acessivel em um unico hub para fluxos de acessibilidade web. - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de limpeza, acabamento e preparo em lote de imagens](https://elysiatools.com/pt/hubs/image-utility): Reune em um so hub ferramentas para limpar imagens, recortar bordas, adicionar margem ou moldura, redimensionar e comprimir em lote, aplicar marca d agua e dar acabamento visual.