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

Localizador de Pares de Cores Acessíveis

DesenvolvedorMatemática

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Encontrador de Pares de Cores Acessíveis

Localizador de Pares de Cores Acessíveis

Encontre cores de texto que atendam aos padrões de acessibilidade WCAG para qualquer cor de fundo. Insira uma cor de fundo e a ferramenta busca no espaço de cores HSL para gerar um paleta de cores de texto que garantam conformidade com o nível AA ou AAA de contraste. Visualize cada par com texto amostral, verifique combinações específicas de cores e exporte pares acessíveis como propriedades CSS personalizadas.

Como usar

Escolha ou insira uma cor de fundo usando o seletor de cores ou entrada hexadecimal. A ferramenta analisa automaticamente o espaço de cores e exibe uma grade com sugestões de cores de texto que atendem ao seu nível WCAG selecionado. Clique em qualquer amostra para visualizá-la como texto sobre o fundo. Para verificar uma combinação específica, insira as cores de fundo e de texto e veja badges de verificação instantânea para níveis AA Normal, AA Grande e AAA. Exportar suas combinações escolhidas como propriedades personalizadas CSS para uso direto em seus folhas de estilo.

Características

Cálculo de Contraste WCAG – Cálculo preciso de luminância relativa e relação de contraste conforme à especificação WCAG 2.1
Busca de grade HSL – Procura sistematicamente tons, saturação e luminosidade para identificar todos os cores de fundo que passam.
Visualização de Texto ao Vivo Veja amostras de texto normal e grande renderizado em seu fundo escolhido com cada cor sugerida.
Conformidade AA e AAA Troque entre **AA Normal** (4,5:1), **AA Grande** (3:1) e **AAA** (7:1) níveis de contraste.
Verificador de Pares Específicos – Entre com qualquer duas cores para obter resultados de aprovação/desaprovação instantâneos para todos os níveis da WCAG.
Cores de Ajuste por Tom Sugestões organizadas por família de tons para navegação fácil
Formulação de Iluminação Exibição – Mostra o cálculo de luminância relativa conforme a WCAG e os valores para transparência
Exportação CSS – Copie pares acessíveis como propriedades de estilo personalizadas prontas para o seu folha de estilos

ANUNCIADO Remover?

 Perguntas frequentes

O que é a proporção de contraste WCAG e por que ela é importante?

As diretrizes de acessibilidade para conteúdo web (WCAG), os padrões definem as razões mínimas de contraste entre cores do texto e fundo para garantir a legibilidade para pessoas com deficiências visuais. A razão de contraste varia de 1:1 (sem contraste) até 21:1 (máximo, preto em branco). O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA exige 7:1 para texto normal. Cumprir esses padrões garante que seu site seja acessível a aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres com deficiência de visão colorida, além de pessoas com baixa visão.
Qual é a diferença entre conformidade AA e AAA?

AA é o nível de acessibilidade recomendado mínimo e exige uma proporção de contraste de 4,5:1 para texto normal e 3:1 para texto grande (18 pt ou bold acima de 14 pt). AAA é o nível mais alto, exigindo 7:1 para texto normal e 4,5:1 para texto grande. A maioria das organizações almeja a conformidade com AA, pois oferece boa acessibilidade enquanto permite flexibilidade de design razoável. AAA é ideal para conteúdo crítico, como texto principal em sites governamentais ou de saúde. O texto grande possui requisitos menores porque letras maiores são inerentemente mais fáceis de ler.
Como é calculada a luminância relativa?

A luminância relativa mede a brilho percebido de um cor em uma escala de 0 (preto) a 1 (branco). A fórmula da WCAG primeiro converte os valores sRGB (0-255) para RGB linear dividindo por 255 e aplicando uma correção de gamma. Para valores ≤ 0,04045, divida por 12,92. Para valores maiores, adicione 0,055, divida por 1,055 e eleve ao poder de 2,4. A luminância final é calculada como 0,2126 vezes o vermelho mais 0,7152 vezes o verde mais 0,0722 vezes o azul. Esses pesos refletem como os olhos humanos percebem a luminosidade, com o verde contribuindo mais.
Posso usar este ferramenta para seleção de cores da marca?

Sim, insira a cor de fundo da sua marca e a ferramenta mostrará todas as cores de texto que atendem aos padrões de acessibilidade. Isso é especialmente útil durante o desenvolvimento ou redesign de uma marca quando você precisa garantir que seu paleta de cores funcione para design web acessível. Você também pode verificar pares de cores existentes da marca para verificar se eles passam pelos requisitos do WCAG. A funcionalidade de exportação via CSS permite copiar pares acessíveis diretamente para seus folhas de estilo, economizando tempo de desenvolvimento e garantindo conformidade desde o início.