Verificador de Contraste: Calculadora de Proporção de Contraste WCAG

O Que Esta Ferramenta Faz e Principais Recursos

O Contrast Checker é uma ferramenta web que ajuda a calcular a taxa de contraste WCAG entre duas cores. Ele fornece resultados em tempo real e classifica o contraste das suas cores de acordo com os padrões WCAG (AA, AA Grande, AAA).

Guia de Uso Passo a Passo

1. Abra a ferramenta Contrast Checker.
2. Escolha a cor do primeiro plano (texto) clicando no seletor de cores ou digitando o código hexadecimal no campo de texto.
3. Escolha a cor de fundo clicando no seletor de cores ou digitando o código hexadecimal no campo de texto.
4. Veja a taxa de contraste e a classificação exibidas em tempo real.

Fórmula Subjacente / Lógica Técnica

A taxa de contraste é calculada usando a seguinte fórmula:

Taxa de Contraste = (L1 + 0.05) / (L2 + 0.05)

Onde L1 e L2 são os valores de luminância relativa das cores de primeiro plano e de fundo, respectivamente.

Exemplos Práticos do Mundo Real

• Exemplo 1: Primeiro plano: #000000 (preto), Fundo: #ffffff (branco) Taxa de Contraste: 21.00, Classificação: AAA
• Exemplo 2: Primeiro plano: #ffffff (branco), Fundo: #000000 (preto) Taxa de Contraste: 21.00, Classificação: AAA
• Exemplo 3: Primeiro plano: #808080 (cinza), Fundo: #ffffff (branco) Taxa de Contraste: 4.50, Classificação: AA

Comparação ou Matriz de Decisão / Lista de Verificação

Taxa de Contraste	Classificação WCAG
≥ 7.00	AAA
≥ 4.50	AA
≥ 3.00	AA Grande

Erros Comuns e Como Evitá-los

• Erro: Usar cores com baixas taxas de contraste. Como Evitar: Sempre verifique a taxa de contraste e a classificação antes de usar cores em seus designs.
• Erro: Ignorar as diretrizes WCAG para contraste de cores. Como Evitar: Use o Contrast Checker para garantir que seus designs atendam aos padrões WCAG de acessibilidade.