Pular para o conteúdo principal
Tooletto

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
Loading tool…

Como seletor e conversor de cor

  1. 1

    Escolha uma cor

    Use a amostra, ou digite um valor HEX ou RGB diretamente.

  2. 2

    Copie qualquer formato

    HEX, RGB, HSL, HSV e CMYK são todos exibidos de uma vez.

  3. 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.