Verificador de contraste de cor
Uma predefinição de Seletor e conversor de cor
Verifique se uma cor de texto é legível sobre seu fundo contra os limites WCAG 2.1. Contraste é a falha de acessibilidade mais comum na web, e também é a mais fácil de corrigir — geralmente escurecendo uma cor um pouco.
- Os arquivos nunca saem do seu dispositivo
- Grátis, sem cadastro
- Sem marcas d'água
- Funciona offline depois de carregado
Como seletor e conversor de cor
- 1
Escolha uma cor
Use a amostra, ou digite um valor HEX ou RGB diretamente.
- 2
Copie qualquer formato
HEX, RGB, HSL, HSV e CMYK são todos exibidos de uma vez.
- 3
Verifique o contraste
Defina um fundo para ver se o texto passa WCAG AA e AAA.
Por que contraste é a falha de acessibilidade mais comum na web
Auditorias automatizadas de acessibilidade consistentemente encontram contraste de cor insuficiente como a violação individual mais frequente em sites escaneados, à frente de todas as outras categorias de problemas de acessibilidade combinadas — e diferente de muitos problemas de acessibilidade, que exigem mudanças estruturais ou de marcação semântica para corrigir, uma falha de contraste geralmente é resolvida escurecendo ou clareando ligeiramente uma cor, sem precisar de nenhuma mudança na estrutura, marcação ou layout da página de jeito nenhum. Essa combinação — extremamente comum, mas comparativamente barata de corrigir uma vez identificada — é precisamente por que vale a pena usar um verificador de contraste dedicado diretamente em um emparelhamento de cor específico antes de publicá-lo, em vez de confiar em uma auditoria de acessibilidade completa para detectá-lo depois.
Os limites AA e AAA, e qual realmente se aplica
WCAG define dois níveis de conformidade com limites numéricos distintos, e qual se aplica depende tanto do nível ao qual um projeto se comprometeu quanto do tamanho do texto específico sendo verificado. O nível AA — o nível ao qual a maioria dos requisitos legais de acessibilidade e políticas organizacionais se referem — exige uma relação de 4.5:1 para texto de tamanho normal mas relaxa para 3:1 para texto grande, definido como 18pt ou 14pt em negrito e acima, já que glifos maiores permanecem legíveis com menos contraste que os pequenos. O nível AAA, um padrão mais rigoroso, eleva esses mesmos limites para 7:1 e 4.5:1 respectivamente. A maioria dos projetos mira em AA como a linha de base prática; AAA é reservado para conteúdo especificamente voltado a usuários com deficiência visual mais significativa, onde o limite mais rigoroso vale a restrição de design adicional que impõe.
Perguntas frequentes
Qual é a diferença entre HEX, RGB e HSL?
HEX e RGB descrevem a mesma coisa em notação diferente — quanto vermelho, verde e azul misturar. HSL reformula isso como matiz, saturação e luminosidade, o que é muito mais fácil de raciocinar: para clarear uma cor você muda um número em vez de adivinhar três.
O que a relação de contraste significa?
Compara a luminância relativa de duas cores em uma escala de 1 (idêntico) a 21 (preto sobre branco). WCAG exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande no nível AA, subindo para 7:1 e 4.5:1 no AAA.
Por que minha cor falha no contraste quando parece boa para mim?
Porque a relação é calculada a partir da luminância relativa, não de quão diferentes duas cores parecem. Duas cores vívidas de brilho similar — laranja sobre vermelho, digamos — parecem distintas mas carregam quase nenhum contraste de luminância, e se tornam ilegíveis para qualquer um com baixa visão ou em uma tela sob o sol.
A conversão para CMYK é precisa para impressão?
É a conversão aritmética padrão, que é um ponto de partida em vez de um resultado com gestão de cor. Trabalho de impressão real precisa de um perfil ICC para a impressora e o papel específicos, porque CMYK não consegue reproduzir de jeito nenhum muitas cores RGB brilhantes.
Você também pode precisar
Gerador de código QR
Crie códigos QR para links, texto, WiFi e mais
Extrator de paleta de cores
Extraia as cores dominantes de uma imagem
Formatador de CSS
Embeleze ou minifique folhas de estilo
Gerador de código de barras
Códigos de barras Code 128 como SVG escalável
Gerador de Faturas
Crie e baixe uma fatura profissional em PDF
Gerador de senhas
Crie senhas e frases-senha aleatórias fortes
Criador de Currículo
Monte um currículo limpo e compatível com ATS e baixe em PDF
Gerador de UUID
Gere UUID v4 e v7 em massa