Verificador de Contraste de Cor
Verifique proporções de contraste de cor para conformidade WCAG 2.1. Valide padrões AA e AAA instantaneamente.
O que é a proporção de contraste WCAG?
A proporção de contraste WCAG mede a diferença de luminância entre cores de primeiro plano e fundo. Varia de 1:1 a 21:1.
Quais são os requisitos WCAG AA e AAA?
WCAG AA requer mínimo de 4.5:1 para texto normal e 3:1 para texto grande. AAA requer 7:1 e 4.5:1 respectivamente.
O que conta como texto grande?
Texto grande é definido como 18pt (24px) ou maior, ou 14pt (18.66px) negrito ou maior.
Por que o contraste de cor é importante?
Contraste adequado garante legibilidade para pessoas com deficiências visuais e melhora a legibilidade para todos.
Como calculo a proporção de contraste?
É calculada usando valores de luminância relativa. A fórmula é (L1 + 0.05) / (L2 + 0.05).
Qual é o contraste mínimo para elementos UI?
WCAG requer mínimo de 3:1 para componentes UI e objetos gráficos.
Posso usar qualquer combinação de cores?
Nem todas as combinações atendem padrões de acessibilidade. Use este verificador para validar.
O que é luminância relativa?
É o brilho percebido de uma cor, de 0 (preto) a 1 (branco). Calculada usando espaço de cor sRGB.
Devo verificar contraste em imagens?
Texto em imagens deve atender os mesmos requisitos. Para imagens decorativas não se aplica.
Quais ferramentas ajudam com contraste?
Use ferramentas de desenvolvedor do navegador, plugins de design ou verificadores online como este.
Como usar Verificador de Contraste de Cor
Verifique instantaneamente se o contraste do texto e da interface atinge os limites AA e AAA do WCAG 2.1, tudo no seu navegador. Informe duas cores e a proporção é calculada localmente — nada sai do dispositivo.
- Digite ou cole a cor do texto no campo Foreground Color, em qualquer formato aceito, como HEX ou RGB.
- Preencha o campo Background Color com a cor atrás do texto para calcular a proporção de contraste.
- Leia a proporção resultante e os selos de aprovação AA e AAA para texto normal e texto grande.
- Ajuste qualquer uma das cores até superar 4,5:1 no texto corrido ou 3:1 no texto grande e em componentes de interface.
- Troque os valores de Foreground Color e Background Color para testar a combinação inversa, como texto claro sobre tema escuro.
AAA (7:1) é um ótimo alvo para leituras longas, mas 4,5:1 (AA) é o piso exigido pela maioria das diretrizes de acessibilidade.
Ferramentas relacionadas
- Seletor de Cores Selecione qualquer cor da tela com o conta-gotas. Copie códigos HEX, RGB, HSL instantaneamente. Ferramenta online gratuita.
- Gerador de Paleta de Cores Crie paletas de cores bonitas e harmoniosas instantaneamente com nosso gerador online gratuito. Suporta modos monocromático, análogo, complementar, triádico, split-complementar e tetradício. Ajuste cores com controles HSL, bloqueie favoritos e exporte como CSS, Tailwind, JSON ou SVG. 100% baseado em navegador, seus dados nunca saem do seu dispositivo.
- Simulador de Daltonismo Simulador gratuito de daltonismo online. Teste designs para Protanopia, Deuteranopia, Tritanopia e outros tipos. 100% privado, funciona no navegador.
- GIF Extrair Quadros Extrai e baixa quadros individuais de animações GIF como PNG ou sprite sheet. Ferramenta online gratuita com visualização e exportação ZIP.
- GIF Invertido Inverte a ordem de reprodução de animações GIF online gratuitamente. Carregue, visualize e baixe instantaneamente.
- Alterador de Velocidade GIF Altere a velocidade da animação GIF online. Acelere ou desacelere arquivos GIF instantaneamente.
- Vídeo para GIF Converta vídeo em GIF animado online. Ajuste qualidade, taxa de quadros e resolução diretamente no seu navegador sem enviar ficheiros.
- Criador de Memes Criador de memes grátis online. Adicione legendas clássicas em cima e embaixo a qualquer imagem, arraste o texto e baixe seu meme em PNG ou JPEG na hora.