Calculadora de Proporção de Contraste de Cor

• Cálculo instantâneo da proporção de contraste: calcule a proporção WCAG entre duas cores na hora, enquanto digita. Nossa calculadora atualiza em tempo real — sem clicar em botão — para você iterar na paleta sem interrupções.
• Calculadora de contraste de cor online e segura: todos os cálculos acontecem localmente no navegador. Seus valores de cor nunca saem do dispositivo, garantindo 100% de privacidade ao usar nossa calculadora online.
• Calculadora de proporção de contraste — sem instalação: use nossa calculadora diretamente em qualquer navegador, sem downloads, plugins ou software de design. Verifique a conformidade WCAG de qualquer dispositivo na hora.
• Verificação completa de conformidade WCAG 2.1 AA e AAA: obtenha resultados instantâneos de aprovado/reprovado para os níveis WCAG 2.1 AA e AAA em texto normal, texto grande e componentes de interface. Inclui prévia de texto ao vivo.

• Conformidade em acessibilidade web: designers e desenvolvedores usam a calculadora para garantir que seus sites atendam aos requisitos WCAG 2.1 AA antes do lançamento. Detectar falhas de contraste cedo evita auditorias caras e problemas legais.
• Seleção de cores de interface e marca: ao criar um design system ou paleta de marca, verifique cada combinação primeiro plano/fundo para conformidade WCAG. Use a calculadora para encontrar o tom mínimo de uma cor de marca que passe no contraste AA sobre fundo branco ou escuro.
• Design de botões e CTA: botões de chamada para ação devem atender à proporção de 3:1 para componentes de interface do WCAG 2.1. Teste a cor do texto do botão contra o fundo do botão antes de publicar em produção.
• Paletas em modo escuro: o modo escuro traz novos desafios de contraste — cores que passam em fundos claros muitas vezes falham em fundos escuros. Use a calculadora para verificar cada par texto/fundo em temas claros e escuros.
• Acessibilidade de formulários e campos: texto de placeholder, rótulos, texto de ajuda e mensagens de erro precisam de contraste suficiente. Verifique cada elemento textual contra seu fundo para usuários com baixa visão.
• Visualização de dados e gráficos: rótulos de gráficos, texto de legenda e anotações de pontos de dados devem ser legíveis contra os fundos do gráfico. Verifique se as cores da sua visualização atendem aos padrões de acessibilidade.

A proporção de contraste de cor é uma medida numérica da diferença de luminância percebida entre duas cores — normalmente uma cor de primeiro plano (texto) e uma cor de fundo. É definida pelas Diretrizes de Acessibilidade para Conteúdo Web (WCAG) e varia de 1:1 (sem contraste — cores idênticas) a 21:1 (contraste máximo — preto puro sobre branco puro). A proporção é calculada com a luminância relativa de cada cor, que considera a forma não linear como o olho humano percebe brilho. Nossa calculadora implementa a fórmula exata do WCAG 2.1, então você obtém o mesmo resultado de qualquer ferramenta oficial de auditoria de acessibilidade.

1. 1. Informe suas cores: digite qualquer cor em formato HEX (#rrggbb), RGB (rgb(r,g,b)) ou HSL (hsl(h,s%,l%)) nos campos de primeiro plano e fundo, ou clique na amostra para abrir o seletor nativo. A calculadora aceita HEX abreviado (#rgb) e variantes com alfa. Todo o processamento acontece localmente no navegador.
2. 2. Cálculo instantâneo em tempo real: a proporção atualiza na hora enquanto você digita — sem clicar em botão. A calculadora converte cada cor em luminância relativa pela fórmula de linearização sRGB do WCAG, então calcula a proporção como (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância mais clara e L2 a mais escura.
3. 3. Revise a conformidade WCAG: o painel de resultados mostra o status aprovado/reprovado para WCAG 2.1 AA e AAA em três contextos: texto normal, texto grande e componentes de interface. Uma prévia de texto ao vivo mostra exatamente como a combinação fica em diferentes tamanhos.

• AA - Texto normal (4,5:1): proporção mínima para corpo de texto, rótulos e qualquer texto menor que 18pt (ou 14pt em negrito). É o requisito padrão para conformidade WCAG 2.1 Nível AA, a base legal na maioria das jurisdições.
• AA - Texto grande (3:1): texto grande é definido como 18pt (24px) ou mais, ou 14pt (aproximadamente 18,67px) em negrito ou mais. Exige proporção mínima menor porque é mais fácil de ler com pouco contraste.
• AA - Componentes de interface (3:1): objetos gráficos e componentes de interface como campos de formulário, botões, indicadores de foco e ícones devem ter proporção de 3:1 em relação a cores adjacentes, conforme o Critério de Sucesso 1.4.11 do WCAG 2.1.
• AAA - Aprimorado (7:1): o Nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. A conformidade AAA é recomendada para conteúdo crítico (documentos legais, informações médicas, serviços governamentais), mas não é obrigatória para conformidade web geral.

A fórmula de proporção de contraste do WCAG se aplica apenas a cores opacas — cores semitransparentes devem ser avaliadas contra o fundo realmente renderizado. A fórmula também não considera renderização de fontes, suavização de bordas ou calibração de tela, que podem afetar o contraste percebido na prática. Além disso, os requisitos de contraste WCAG não se aplicam a texto decorativo, texto que faz parte de logotipo ou texto em componentes de interface inativos. Sempre teste seus designs com usuários reais e tecnologias assistivas além da verificação automatizada de contraste.