Algo errado nesta ferramenta?

Sobre «Contraste WCAG Online»

Esta ferramenta mede a relação de contraste entre duas cores (tipicamente texto em primeiro plano e fundo) e diz se o par atende os padrões WCAG (Web Content Accessibility Guidelines) para legibilidade. Resultados pass/fail são mostrados para níveis AA e AAA em tamanhos de texto normal e grande.

Conformidade com WCAG é cada vez mais um requisito legal: sites governamentais, plataformas educacionais, ferramentas do setor público, e muitos sites comerciais na Europa e América do Norte devem atender WCAG 2.1 AA no mínimo. Contraste ruim é o problema de acessibilidade mais comumente sinalizado.

Use ao escolher cores de texto durante design, auditar um site existente para problemas de acessibilidade, ou encontrar tons alternativos que atinjam AAA sem mudar o design geral demais.

Como usar esta ferramenta

Como verificar contraste de cores pelo WCAG

  1. Cor de primeiro plano

    "Foreground" é a cor do texto ou ícone em hex (#RGB ou #RRGGBB). O `#` inicial é opcional e o campo não diferencia maiúsculas.

  2. Cor de fundo

    "Background" é a superfície atrás do primeiro plano — fundo da página, preenchimento de botão etc. Mesmos formatos hex. Os dois campos aparecem lado a lado.

  3. Executar

    Resultado: contrastRatio (ex. 4,56) mais wcagNormalText e wcagLargeText com as bandas pass/fail. Texto normal: ≥ 4,5 (AA) / 7 (AAA); texto grande: ≥ 3 (AA) / 4,5 (AAA).

  4. Ler os níveis

    AA é o requisito legal/normativo mais comum; AAA é mais rigoroso e frequentemente irreal para texto corrido. "Large text" significa 18pt+ regular ou 14pt+ bold; abaixo disso trate como contraste de texto normal.

Ferramentas parecidas