Verificador de Contraste de Cores

O que conta como texto grande

A WCAG define texto grande como pelo menos 18 pontos, cerca de 24 pixels CSS, ou 14 pontos em negrito, cerca de 18,7 pixels. Somente textos nesses tamanhos podem usar o limite inferior de 3:1; textos corridos, legendas e rótulos de formulários precisam de 4,5:1 para AA. As proporções vão de 1:1 para cores idênticas a 21:1 para preto sobre branco. Contornos de botões, bordas de campos de formulário, indicadores de foco e ícones significativos seguem uma regra separada, o contraste não textual, que exige 3:1 em relação às cores adjacentes.

Cores transparentes e isenções

O verificador precisa de cores sólidas. Para textos ou sobreposições semitransparentes, calcule a cor realmente exibida misturando-a com o fundo no misturador de cores, usando a opacidade como peso, e verifique essa cor.

Controles desativados, elementos puramente decorativos e logotipos estão isentos das regras de contraste. O texto de placeholder em um campo de formulário não está, por isso placeholders em cinza-claro estão entre as falhas mais comuns.

Como usar

1. Insira valores #RGB ou #RRGGBB válidos e qualquer porcentagem solicitada.
2. Execute a operação de cor fixa localmente no navegador.
3. Revise as amostras de cor e copie o resultado ou os valores da paleta.

Privacidade e limitações

Os valores de cor ficam neste dispositivo. A saída de contraste é um verificador matemático, não uma garantia geral de conformidade com a WCAG; contexto, renderização de fontes, contraste de elementos não textuais e estados de interface ainda precisam de revisão.