Texto no verificador de antecedentes

• Análise instantânea de legibilidade de texto: O texto no verificador de antecedentes atualiza todos os valores a cada pressionamento de tecla - nenhum botão para pressionar. Insira qualquer cor de primeiro plano e de fundo e obtenha a taxa de contraste WCAG, status de aprovação/reprovação AA/AAA e uma visualização de texto ao vivo imediatamente. Troque cores ou experimente pares predefinidos com um clique.
• Tamanho e peso de fonte ajustáveis: alterne entre escalas de texto padrão WCAG - texto pequeno (normal), texto grande, negrito pequeno e negrito grande - ou defina tamanhos de fonte personalizados de 12px a 48px e espessuras de fonte de 400 a 700. Veja exatamente como a legibilidade muda conforme você ajusta esses parâmetros, com uma visualização de texto ao vivo no tamanho selecionado.
• Cálculos compatíveis com WCAG 2.1: Todos os cálculos de contraste usam a fórmula oficial de luminância relativa e valores de limite das WCAG 2.1. O verificador avalia a conformidade AA (4,5:1 para texto normal, 3:1 para texto grande) e conformidade AAA (7:1 para texto normal, 4,5:1 para texto grande) com emblemas claros de aprovação/reprovação.
• 100% gratuito - sem necessidade de inscrição: o texto no verificador de antecedentes é totalmente gratuito, sem inscrição, sem assinatura e sem limites de uso. Todos os cálculos são executados localmente no seu navegador - suas cores e texto nunca saem do seu dispositivo. Nenhum anúncio bloqueando a interface.

• Conformidade com acessibilidade da Web: os desenvolvedores front-end usam o texto no verificador de antecedentes para verificar se suas opções de cores atendem aos requisitos WCAG AA ou AAA antes do envio. Teste o corpo do texto, os títulos e os rótulos dos botões em seus tamanhos e pesos reais de fonte para garantir que nenhum problema de acessibilidade chegue à produção.
• Validação de cores do sistema de design: os mantenedores do sistema de design usam o texto no verificador de plano de fundo para validar cada par de cores em sua biblioteca de tokens de design. Teste combinações primárias, secundárias, de texto e de plano de fundo em diferentes escalas de texto para garantir acessibilidade consistente em toda a biblioteca de componentes.
• Auditoria e remediação WCAG: Os auditores de acessibilidade usam o texto do verificador de antecedentes para documentar e corrigir falhas de contraste. A visualização ao vivo e os emblemas claros de aprovação/reprovação facilitam a demonstração de problemas às partes interessadas e o teste de alterações de cores propostas antes de implementá-las.
• Design móvel e responsivo: os designers móveis usam o texto no verificador de plano de fundo para testar a legibilidade em diferentes tamanhos de tela. Texto pequeno (14px) em planos de fundo móveis precisa de uma taxa de contraste mais alta de 4,5:1, enquanto títulos grandes de 24px podem usar o limite de 3:1 - o verificador lida com ambos os cenários.
• Email e publicação digital: designers de email e editores digitais usam o texto no verificador de antecedentes para garantir que seus boletins informativos e artigos sejam legíveis. Com cores de fundo e tamanhos de texto variados nas seções, o verificador ajuda a manter a acessibilidade ao usar as cores da marca.
• Painel e visualização de dados: analistas de dados e designers de painel usam o texto no verificador de plano de fundo para verificar se os rótulos, legendas e anotações permanecem legíveis nos planos de fundo do gráfico. O modo de tamanho de fonte personalizado permite testar os tamanhos exatos usados ​​nas visualizações de dados.

O contraste do texto no fundo mede a diferença no brilho percebido entre o texto e seu fundo. As WCAG (Diretrizes de Acessibilidade para Conteúdo da Web) definem uma fórmula de taxa de contraste que quantifica essa diferença em uma escala de 1:1 (sem contraste, por exemplo, texto preto sobre fundo preto) a 21:1 (contraste máximo, por exemplo, texto preto sobre fundo branco). A proporção mínima aceitável depende do tamanho do texto e se o texto está em negrito - nosso texto no verificador de antecedentes avalia todos esses fatores automaticamente.

1. Insira suas cores: Digite ou escolha uma cor de primeiro plano (texto) e uma cor de fundo usando as entradas de cores ou o seletor de cores. Todo o processamento é executado localmente no seu navegador - suas cores nunca saem do seu dispositivo. Use os botões predefinidos para pares de cores comuns ou o botão de troca para trocar primeiro e segundo plano.
2. Selecione o tamanho e a espessura do texto: Escolha entre as escalas de texto padrão WCAG - Texto Pequeno (normal), Texto Grande, Negrito Pequeno ou Negrito Grande - ou alterne para o modo Personalizado para controle preciso do tamanho da fonte (12px-48px) e da espessura (400-700). O verificador usa automaticamente os valores de limite WCAG corretos com base na sua seleção.
3. Leia os resultados: A taxa de contraste é exibida com destaque na parte superior com um indicador de qualidade codificado por cores (excelente, bom, moderado ou ruim). Os crachás de aprovação/reprovação para WCAG AA e AAA mostram se o seu texto atende aos requisitos de acessibilidade. A visualização do texto ao vivo permite que você veja exatamente a aparência do seu texto no tamanho e peso selecionados.

• Texto pequeno (normal): corpo do texto, rótulos e legendas abaixo de 18pt (24px) de espessura normal ou abaixo de 14pt (18,67px) em negrito. Requer uma taxa de contraste de 4,5:1 para conformidade com AA e 7:1 para conformidade com AAA. Esta é a categoria de texto mais comum na web.
• Texto grande: texto com pelo menos 18pt (24px) de espessura normal ou pelo menos 14pt (18,67px) de espessura em negrito. Os títulos normalmente são qualificados como texto grande. Requer uma taxa de contraste de 3:1 para conformidade com AA e 4,5:1 para conformidade com AAA. Texto grande tem requisitos mais baixos porque é mais fácil de ler.
• Tamanhos personalizados: o verificador usa a definição WCAG para determinar qual limite se aplica. Se a combinação de tamanho e espessura da fonte personalizada atender à definição de texto grande (24px regular ou 18,67px em negrito), os limites de texto grande mais tolerantes serão usados ​​automaticamente.

Comece com alto contraste: texto preto sobre fundo branco (21:1) é a combinação mais legível. Embora as cores da marca sejam importantes, sempre teste-as em relação ao seu plano de fundo. Um erro comum é usar texto cinza claro em fundos brancos - mesmo cinza médio (#767676) em branco atinge apenas uma proporção de 4,0:1, o que não atende ao requisito AA de 4,5:1 para texto normal.

Considere o tamanho do texto ao escolher as cores: você pode usar taxas de contraste mais baixas para títulos grandes (mínimo 3:1 AA) enquanto mantém um contraste mais alto para o corpo do texto (mínimo 4,5:1 AA). Isso permite mais flexibilidade de design para exibição de texto, mantendo o conteúdo principal acessível. Sempre forneça cores de texto sugeridas com a recomendação preto/branco do verificador quando a cor de fundo for muito clara ou escura.

Teste com conteúdo real: use a visualização de texto editável para testar sua cópia real. O verificador permite digitar qualquer texto e vê-lo renderizado no tamanho e peso selecionados, fornecendo uma representação real de como seu conteúdo será exibido para os usuários.