Skip to main content

Verificador de Razão de Contraste da WCAG Verifique as razões de contraste da WCAG entre cores de primeiro plano e segundo plano.

Verificador de Razão de Contraste illustration
🎨

Verificador de Razão de Contraste

Verifique as razões de contraste da WCAG entre cores de primeiro plano e segundo plano.

1

Definir Cores

Insira as cores do primeiro plano (texto) e de fundo.

2

Verificar Conformidade

Veja a razão de contraste e os resultados de aprovação/reprovação da WCAG AA/AAA.

3

Ajustar & Trocar

Modifique as cores até atingir o nível de conformidade desejado.

Loading tool...

What Is Verificador de Razão de Contraste?

Um verificador de razão de contraste WCAG avalia a acessibilidade de combinações de cores calculando a razão de contraste entre as cores do primeiro plano (texto) e do segundo plano de acordo com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1. A ferramenta computa a razão de contraste baseada na luminância e testa contra quatro limites WCAG: AA para texto normal (≥4,5:1), AA para texto grande (≥3,0:1), AAA para texto normal (≥7,0:1) e AAA para texto grande (≥4,5:1). Ultrapassar esses limites garante que o texto seja legível para usuários com vários níveis de deficiência visual, incluindo baixa visão e daltonismo. A ferramenta fornece uma pré-visualização do texto ao vivo mostrando como a combinação de cores realmente se parece em diferentes tamanhos, juntamente com indicadores claros de passar/falhar para cada nível WCAG. Essa é uma ferramenta essencial para qualquer desenvolvedor ou designer da web comprometido em criar experiências digitais acessíveis e inclusivas.

Why Use Verificador de Razão de Contraste?

  • Verificação instantânea de conformidade com a WCAG AA e AAA
  • Visualização prévia do texto em várias tamanhos mostra legibilidade no mundo real
  • Indicadores claros de aprovação/reprovação com limites de razão necessários
  • Botão de troca para testar rapidamente combinações de cores invertidas
  • Testa quatro níveis de conformidade: AA/AAA para texto normal e grande

Common Use Cases

Acessibilidade na Web

Verifique se as combinações de texto/fundo atendem aos requisitos da WCAG 2.1 para conformidade com a ADA e AODA.

Auditoria do Sistema de Design

Teste todas as combinações de cores em um sistema de design para conformidade com acessibilidade.

Avaliação da Cor da Marca

Verifique se as cores da marca podem ser usadas para combinações de texto/fundo que atendam aos padrões de acessibilidade.

Conformidade Legal

Garanta que o conteúdo digital atenda às leis de acessibilidade que fazem referência aos critérios da WCAG.

Technical Guide

A razão de contraste é calculada usando a fórmula de luminância relativa WCAG 2.1. Primeiro, cada canal de cor é linearizado: se sRGB ≤ 0,03928, linear = sRGB/12,92; caso contrário, linear = ((sRGB + 0,055)/1,055)^2,4. Luminância relativa L = 0,2126×R + 0,7152×G + 0,0722×B. A razão de contraste = (L_claro + 0,05) / (L_escuro + 0,05). A razão varia de 1:1 (nenhuma contraste, mesma cor) para 21:1 (preto sobre branco). WCAG 2.1 define quatro limites: Nível AA exige ≥4,5:1 para texto normal (<18pt ou <14pt negrito) e ≥3:1 para texto grande (≥18pt ou ≥14pt negrito). Nível AAA exige ≥7:1 para texto normal e ≥4,5:1 para texto grande. Esses limites são baseados em pesquisas sobre acuidade visual e garantem legibilidade para usuários com visão 20/40 ou baixa visão moderada.

Tips & Best Practices

  • 1
    Aimie para uma razão de contraste mínima de 4,5:1 para texto do corpo - isso é o mínimo para a conformidade com a WCAG AA
  • 2
    Texto grande (18px+ ou 14px+ em negrito) tem um requisito mais baixo de 3:1 para AA
  • 3
    A conformidade AAA (7:1) garante legibilidade para usuários com deficiências visuais mais graves
  • 4
    Use o botão Trocar para testar se as cores funcionam bem em ambas as orientações
  • 5
    Projetos no modo escuro precisam das mesmas razões de contraste - teste ambos os modos

Related Tools

Frequently Asked Questions

Q O que é a razão de contraste da WCAG?
É uma medida numérica (1:1 a 21:1) da diferença de brilho entre duas cores. A WCAG especifica razões mínimas para garantir legibilidade do texto para pessoas com deficiências visuais.
Q Qual é a diferença entre AA e AAA?
AA é o padrão mínimo de acessibilidade (4,5:1 para texto normal). AAA é uma acessibilidade melhorada (7:1 para texto normal). A maioria das regulamentações exige AA; AAA é uma prática recomendada.
Q O que conta como texto grande?
A WCAG define texto grande como 18pt (24px) ou maior para peso regular, ou 14pt (18,67px) ou maior para peso em negrito. O texto grande tem requisitos de contraste mais baixos.
Q A cor sozinha determina a acessibilidade?
Não. A razão de contraste é um fator. Você também deve garantir que a cor não seja o único meio de transmitir informações (use ícones, padrões, rótulos também) e teste com simulações de daltonismo.

About This Tool

Verificador de Razão de Contraste is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.