Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Grade de Contraste de Cores

Desenvolvedor

ANUNCIADO Remover?

ENTRADA

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Grade de Contraste de Cores

Insira as cores da sua marca ou sistema de design e gere uma matriz completa de contraste WCAG mostrando a relação de contraste para cada combinação possível de texto/fundo. Veja imediatamente quais pares de cores passam nos níveis AA, AAA ou falham os requisitos de acessibilidade — essencial para construir sistemas de design e guias de estilo acessíveis.

Como usar

Insira cores hexadecimais, um por linha (com rótulos opcionais como "Primário #3B82F6"), ou selecione uma paleta pré-definida. Clique Geração de Grade criar a matriz de contraste. Cada célula mostra o nível de contraste com a cor real do texto sobre o fundo real, codificada por níveis de conformidade com as diretrizes WCAG.

Características

Matriz de Contraste N×N – Toda combinação de primeiro plano/fundo testada e exibida em uma grade visual
Códigos de Cor WCAG – Verde para AAA (≥7:1), amarelo para AA (≥4,5:1) e vermelho para falha (<4,5:1)
Pré-visualização de Cor em Tempo Real – Cada célula renderizada com texto de corante real em cor de fundo real
Texto grande Também indica conformidade com o texto grande em tamanho AA (≥3:1).
Estatísticas de Resumo – Total pares testados, aprovados nas categorias AAA e AA, e falhas em um rápido resumo
Paletas de Preset – Carregamento rápido de paletas de cores do Tailwind, Material Design ou monocromático
Até 20 Cores Suporte paletas de 2 a 20 cores
Exclusivamente do lado do cliente Todas as cálculos ocorrem no seu navegador.

ANUNCIADO Remover?

 Perguntas frequentes

Quais são os níveis de contraste da WCAG?

As diretrizes de acessibilidade para conteúdo web (**WCAG**), os padrões de contraste definem a relação entre cores necessária para garantir a legibilidade do texto. O padrão AAA (≥7:1) é o mais rigoroso, garantindo que o texto seja lido por usuários com deficiências visuais moderadas. O padrão AA (≥4,5:1) é o mínimo exigido para textos de tamanho normal. O AA Grande (≥3:1) aplica-se ao texto com tamanho igual ou superior a 18 pontos (ou 14 pontos em negrito). A maioria das leis e padrões de acessibilidade exige pelo menos conformidade com o padrão AA para conteúdo web.
Por que preciso de uma grade de contraste em vez de verificar pares individualmente?

Uma grade de contraste mostra todas as combinações de cores possíveis na sua paleta ao mesmo tempo, revelando problemas que você perderia ao verificar pares um por vez. Sistemas de design geralmente possuem 8 a 15 cores que podem ser usadas em diversas combinações de fundo/texto. Uma grade com 10 cores testa 100 pares simultaneamente, mostrando instantaneamente quais combinações são acessíveis e quais não o são. Isso é essencial para criar documentação abrangente sobre acessibilidade para equipes de design.
Como é calculado o **rapport de contraste**?

A relação de contraste WCAG utiliza luminância relativa, calculada com base em valores lineares do sRGB linearizados. Cada canal de cor é convertido da codificação gamma do sRGB para luz linear usando a fórmula: se o valor do sRGB for igual ou menor que 0,03928, divida por 12,92; caso contrário, eleve (valor + 0,055) / 1,055 à potência de 2,4. A luminância relativa é então calculada como 0,2126 × R + 0,7152 × G + 0,0722 × B. O contraste é dado pela fórmula (luminância mais clara + 0,05) / (luminância mais escura + 0,05), sempre resultando em um valor entre 1:1 e 21:1.