Localizador de Nomes de Cores WCAG

• Verificação instantânea de conformidade WCAG: o Localizador avalia mais de 250 cores nomeadas em relação ao seu fundo a cada tecla digitada. Cada cor exibe sua relação de contraste WCAG exata e seu nível de conformidade (AAA, AA, AA Large ou Reprovado) - sem botão a pressionar e sem recarregar a página.
• Mais de 250 cores nomeadas de 3 fontes: inclui as 148 cores nomeadas do CSS, mais de 50 nomes de cores X11 estendidos e mais de 80 aproximações Pantone - oferecendo a paleta mais ampla possível de cores de texto acessíveis para escolher para qualquer cor de fundo.
• 100 % privado - sem upload: todos os cálculos de contraste acontecem localmente no seu navegador. Seus valores de cor nunca saem do seu dispositivo e nunca são enviados a servidor algum - seguro para projetos de clientes e sistemas de marca proprietários.
• Grátis e sem limites: verifique ilimitadas cores de fundo sem cadastro, sem assinatura e sem cotas de uso. O Localizador de Nomes de Cores WCAG é completamente grátis para sempre, sem anúncios bloqueando a interface.

• Desenvolvimento frontend acessível: desenvolvedores frontend usam o Localizador para escolher cores de texto que atendam aos requisitos de acessibilidade. Insira a cor de fundo do seu design e veja instantaneamente quais cores nomeadas do CSS atendem WCAG AA ou AAA - depois copie o valor HEX diretamente para sua folha de estilos.
• Auditoria de conformidade WCAG AA/AAA: auditores de acessibilidade usam o Localizador para identificar rapidamente alternativas de cor de texto acessíveis para qualquer fundo. Os selos de aprovado/reprovado codificados por cor e a exibição da relação de contraste facilitam verificar se as escolhas de cor de texto atendem aos padrões legais de acessibilidade.
• Seleção de tokens de cor de design system: responsáveis por design systems usam o Localizador para validar tokens de cor de texto. Ao testar cada token em relação a todos os tokens de fundo, eles podem documentar quais combinações atendem WCAG AA/AAA e quais exigem valores de token alternativos por acessibilidade.
• Acessibilidade em apps móveis: desenvolvedores de apps móveis usam o Localizador para escolher cores de texto para apps iOS e Android. A ferramenta funciona com qualquer cor de fundo HEX - basta inserir o fundo do seu app e explorar nomes de cores acessíveis com suas relações de contraste exatas.
• Testes de acessibilidade para baixa visão: designers que testam acessibilidade para baixa visão usam o Localizador para verificar se suas escolhas de cor atendem aos requisitos de contraste aprimorado (AAA). O modo de filtro AAA mostra apenas as cores mais contrastantes, adequadas para usuários com deficiência visual moderada.
• Design de conteúdo web e e-mail: criadores de conteúdo web e designers de e-mail usam o Localizador para garantir que seu texto seja legível sobre diversas cores de fundo. Com mais de 250 cores nomeadas de várias fontes, oferece mais opções acessíveis do que adivinhar valores de cor manualmente.

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem relações de contraste mínimas para garantir que o texto seja legível por usuários com deficiência visual, incluindo baixa visão e deficiência na visão de cores. O Localizador de Nomes de Cores WCAG ajuda você a identificar quais cores nomeadas (de fontes CSS, X11 e Pantone) oferecem contraste suficiente sobre qualquer cor de fundo. A relação de contraste é calculada usando a fórmula de luminância relativa da WCAG 2.1, produzindo um valor entre 1:1 (sem contraste) e 21:1 (máximo - preto sobre branco).

1. Insira sua cor de fundo: digite um valor HEX (por exemplo, #1E3A5F) ou use o seletor de cores para escolher uma cor visualmente. Você também pode clicar em uma das 16 predefinições de fundo (Branco, Preto, Marinho, Bege, etc.) para testes rápidos. Todo o processamento roda localmente no seu navegador - seus dados de cor nunca saem do seu dispositivo.
2. Explore as cores acessíveis: a ferramenta avalia instantaneamente as mais de 250 cores nomeadas da nossa base em relação ao seu fundo. Cada cor exibe sua relação de contraste, um selo de conformidade (AAA, AA, AA Large ou Reprovado) e uma pré-visualização visual da cor sobre o seu fundo. Use as abas de filtro para mostrar apenas as cores conformes AA+ ou AAA.
3. Copie qualquer cor: clique em qualquer cartão de cor para copiar seu valor HEX para a área de transferência. As cores são ordenadas por relação de contraste (da maior para a menor), facilitando encontrar rapidamente a cor de texto mais contrastante para seu design.

• AAA (7:1): contraste aprimorado para texto normal. O padrão WCAG mais alto, recomendado para usuários com deficiência visual moderada. Apenas as cores mais contrastantes atingem esse nível. Ideal para corpo de texto em seções críticas de leitura ou ao projetar com foco em acessibilidade.
• AA (4,5:1): contraste mínimo para texto normal. É o padrão legal exigido pela maioria das regulamentações de acessibilidade, incluindo a Section 508 e a ADA. Todo corpo de texto abaixo de 18 pt (ou 14 pt em negrito) deve atingir esse nível. É o nível WCAG mais comumente buscado para conteúdo web.
• AA Large (3:1): contraste mínimo para texto grande (≥18 pt ou ≥14 pt em negrito) e componentes de interface. Também se aplica a elementos não textuais como ícones, bordas e objetos gráficos, conforme o critério de sucesso 1.4.11 da WCAG 2.1.
• Reprovado (<3:1): não atende a nenhum requisito de contraste de texto WCAG. Cores nesse nível não devem ser usadas para texto ou elementos de interface essenciais sobre este fundo. Considere usá-las apenas para fins decorativos.

Nosso Localizador de Nomes de Cores WCAG usa a fórmula padrão de luminância relativa da WCAG 2.1, que considera a sensibilidade variável do olho humano a diferentes comprimentos de onda de luz. A fórmula primeiro converte cada cor em seus componentes sRGB lineares e depois aplica os pesos de luminância padrão (vermelho: 0,2126; verde: 0,7152; azul: 0,0722). A relação de contraste é calculada como (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância da cor mais clara e L2 a da mais escura. Isso fornece uma medição matematicamente precisa do contraste percebido, variando de 1:1 (cores idênticas) a 21:1 (preto contra branco).