🛠️ Ferramenta de Navegador

Verificador de Contraste de Cores

Verifique as proporções de contraste de cores para conformidade com a acessibilidade web. Teste combinações de cores de texto e fundo de acordo com as diretrizes WCAG com pré-visualização em tempo real, classificações de acessibilidade e sugestões de melhoria.

Verificador de Contraste de Cores

Crie combinações de cores acessíveis com confiança

Cor do texto

#000000

Cor de fundo

#f0f4f8

Pré-visualização

Texto normal

This is an example of normal body text that would appear on your website or application.

Texto grande

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

Relação de contraste

19.00:1

PONTUAÇÃO

Texto normal

AAA

Texto grande

AAA

Diretrizes WCAG 2.1: AA exige 4,5:1 para texto normal, 3:1 para texto grande. AAA exige 7:1 para texto normal, 4,5:1 para texto grande.

Dicas e sugestões

✦Maintain a contrast ratio of at least 4.5:1 for normal text.
✦Use 3:1 or higher for large text (18pt or 14pt bold).
✦Consider using darker text on lighter backgrounds or vice versa.
✦For full WCAG AAA compliance, aim for a ratio of 7:1.
✦Adjust brightness or saturation slightly to improve contrast.

Ferramentas Relacionadas

COR Tools

View All →

Conversor Gratuito de Cores Hex para Pantone

Converta cores hexadecimais para as cores Pantone mais próximas com nossa ferramenta online gratuita. Apresenta correspondência de cores Delta E precisa, navegue por mais de 40 cores Pantone populares e obtenha comparações de cores instantâneas. Perfeito para designers, impressores e profissionais de cor.

Conversor Gratuito de Cores HSV para Pantone

Converta cores HSV (Matiz, Saturação, Valor) para suas correspondências Pantone mais próximas instantaneamente. Encontre a cor Pantone perfeita com nossa ferramenta abrangente de correspondência de cores, com comparações visuais e ciência de cores precisa.

Conversor Gratuito de Cores RGB para Pantone

Converta cores RGB para as suas correspondências Pantone mais próximas com o nosso algoritmo avançado de correspondência de cores. Navegue por cores Pantone selecionadas, compare diferenças de cores e obtenha códigos de cores precisos para projetos de design.

Conversor Online Gratuito de CMYK para Pantone

Converta cores CMYK para as suas correspondências Pantone mais próximas usando ciência de cores avançada. Navegue por uma coleção selecionada de cores Pantone populares com comparação de cores em tempo real e funcionalidade de cópia.

Criador de Colagens de Paleta de Cores

Crie colagens visuais impressionantes combinando suas imagens com paletas de cores extraídas. Faça upload de qualquer imagem para extrair automaticamente suas cores dominantes e criar belas composições com layouts, estilos e proporções de tela personalizáveis.

Gerador de Gradientes CSS Online Gratuito

Crie gradientes CSS lineares e radiais impressionantes com nosso gerador de gradientes fácil de usar. Escolha cores, defina direções e copie o código CSS instantaneamente para seus projetos web.

View 5 more tools

Como Verificar o Contraste de Cores

Selecione a Cor do Texto

Clique no primeiro seletor de cores para escolher a cor do seu texto ou insira um código hexadecimal diretamente.

Escolha a Cor de Fundo

Use o segundo seletor de cores para selecionar a cor de fundo para o teste de contraste.

Revise os Resultados do Contraste

Verifique a proporção de contraste calculada e veja as classificações AA/AAA para texto normal e grande.

Pré-visualize seu Design

Veja a pré-visualização ao vivo para ver como sua combinação de cores fica com o conteúdo de texto real.

Características Principais

Teste de Contraste em Tempo Real

Calcule instantaneamente as proporções de contraste ao selecionar diferentes combinações de cores de texto e fundo.

Classificações de Conformidade WCAG

Obtenha classificações AA e AAA para texto normal e grande de acordo com as Diretrizes de Acessibilidade para Conteúdo Web.

Painel de Pré-visualização ao Vivo

Veja exatamente como suas combinações de cores ficarão com texto de amostra em tamanhos normal e grande.

Indicador Visual de Pontuação

Visualize o desempenho do seu contraste com um gráfico circular intuitivo mostrando pontuações de 0 a 100.

Seletores de Cores Interativos

Escolha cores facilmente com ferramentas de seleção de cores integradas para cores de texto e de fundo.

Dicas de Acessibilidade

Obtenha sugestões práticas para melhorar o contraste e atender aos padrões de acessibilidade.

O que é um Verificador de Contraste de Cores?

Um verificador de contraste de cores é uma ferramenta que mede a diferença de luminância entre as cores do texto e do fundo. Ele calcula as proporções de contraste de acordo com os padrões WCAG (Diretrizes de Acessibilidade para Conteúdo Web) para garantir que o conteúdo seja legível para usuários com deficiência visual, incluindo daltonismo e baixa visão.

Por Que Usar Nosso Verificador de Contraste de Cores?

Conformidade WCAG

Garanta que seus designs atendam aos padrões internacionais de acessibilidade com classificações AA e AAA precisas.

Feedback em Tempo Real

Veja resultados instantâneos ao ajustar as cores, tornando mais fácil encontrar combinações conformes.

Sistema de Pontuação Visual

Compreenda o desempenho do contraste rapidamente com nosso sistema intuitivo de pontuação de 0 a 100.

Não Requer Instalação

Teste combinações de cores instantaneamente em seu navegador sem baixar nenhum software.

Perguntas Frequentes

Qual é uma boa proporção de contraste?

Para texto normal, procure pelo menos 4.5:1 para conformidade AA ou 7:1 para AAA. Texto grande (18pt ou 14pt em negrito) precisa de 3:1 para AA ou 4.5:1 para conformidade AAA.

O que significam as classificações AA e AAA?

AA é o nível padrão de conformidade de acessibilidade exigido pela maioria das regulamentações. AAA é o nível mais alto, proporcionando acessibilidade aprimorada para usuários com deficiências visuais mais graves.

Como a proporção de contraste é calculada?

A proporção de contraste é calculada usando a luminância relativa das cores, conforme definido pelas diretrizes WCAG. Ela varia de 1:1 (sem contraste) a 21:1 (contraste máximo).

O que é considerado texto grande?

Texto grande é definido como 18 pontos (24px) ou maior, ou 14 pontos (18.66px) ou maior se em negrito. Texto grande tem requisitos de contraste mais flexíveis.

Por que o contraste de cores é importante?

Um bom contraste de cores garante que o conteúdo seja legível para todos, incluindo usuários com deficiência visual, daltonismo ou aqueles que visualizam o conteúdo sob luz solar intensa ou em telas de baixa qualidade.

Posso usar isso para qualquer formato de cor?

A ferramenta aceita códigos de cores hexadecimais. Você pode converter de outros formatos (RGB, HSL, etc.) para hexadecimal usando conversores online ou ferramentas de design.