O que é Modo de alto contraste?

Teste como o seu conteúdo web aparece em diferentes configurações de alto contraste. Cole HTML ou uma captura de tela de URL para visualizar modos de contraste conformes com WCAG, incluindo o Alto Contraste do Windows, cores invertidas e temas de contraste personalizados.

Escolha temas prontos (Alto Contraste do Windows, Invertido, Amarelo no Preto) ou defina cor de texto e fundo manualmente. A taxa de contraste atualiza ao vivo e indica quais níveis WCAG — AA, AAA, texto normal, texto grande — sua combinação passa. O HTML do preview pode ser exportado já com os estilos inline aplicados.

Como usar

1. Passo 1 — Cole o HTML ou texto simples no editor.
2. Passo 2 — Selecione um modo de contraste entre os predefinidos: Alto Contraste do Windows (preto/branco), Invertido, Amarelo sobre Preto ou cores personalizadas.
3. Passo 3 — Revise a visualização ao vivo para verificar a legibilidade. Use o verificador de taxa de contraste para confirmar a conformidade WCAG AA/AAA dos elementos de texto.

Quando usar

• Auditar uma landing antes de lançar a campanha para garantir WCAG AA.
• Confirmar que indicadores de foco e botões só de ícone sobrevivem ao Alto Contraste do Windows.
• Achar uma cor de corpo de texto que bata 4,5:1 contra o fundo da marca.

Resultado

Um desenvolvedor cola o HTML da sua barra de navegação e muda para o modo Alto Contraste do Windows. Ele percebe que os botões com apenas ícones ficam invisíveis sobre o fundo preto, então adiciona rótulos de texto visíveis.

Perguntas frequentes

Qual taxa de contraste o WCAG AA exige?

4,5:1 para texto de corpo e 3:1 para texto grande (18pt regular ou 14pt em negrito acima). AAA aperta para 7:1 e 4,5:1. O verificador rotula cada combinação com os níveis que ela passa ou falha.

Por que os ícones somem no Alto Contraste do Windows?

O Windows substitui as cores por tokens do sistema e ignora imagens de fundo. Ícones desenhados como background-image ou SVG só com fill ficam invisíveis. Use SVG inline com currentColor no stroke ou inclua um rótulo de texto visível.

Amarelo no preto é mesmo um tema de acessibilidade?

Sim. É um dos temas originais de Alto Contraste do Windows e ainda é usado por muitas pessoas com baixa visão porque o amarelo continua nítido mesmo com degeneração macular. Alguns preferem ao branco puro sobre preto.

Passar WCAG AA significa que a página é acessível?

Contraste é apenas uma parte do WCAG. A página também precisa de navegação por teclado, HTML semântico, textos alternativos, rótulos em formulários, indicadores de foco e respeitar movimento reduzido. A taxa aqui só fala de cor.

Por que meu laranja de marca falha sobre fundo branco?

Cores médias saturadas (laranja, amarelo, lima) costumam ficar abaixo de 3:1 sobre branco porque a luminância é alta demais. Escureça o laranja no corpo de texto ou reserve-o para fundos e títulos grandes, onde 3:1 já basta.

Ferramentas relacionadas