Verificador de contraste de cor WCAG
Insira uma cor de primeiro plano (texto) e de fundo e obtenha o ratio de contraste WCAG 2.1 exato, com resultados de aprovado/reprovado para AA e AAA, texto normal e grande, além de uma pré-visualização em tempo real. As cores podem ser inseridas em hex ou rgb(), ou escolhidas com o seletor de cor ao lado de cada campo.
Um pequeno jabuti xereta viu dez cegonhas felizes
Exemplo de texto em tamanho normal, para comparação.
Perguntas frequentes
Como o ratio de contraste é calculado?
Usando a fórmula real de luminância relativa WCAG 2.1 nos canais sRGB de cada cor, depois comparando a luminância mais clara e mais escura como (L1 + 0,05) / (L2 + 0,05). O resultado varia de 1:1 (cores idênticas) a 21:1 (preto puro sobre branco puro).
Qual é a diferença entre AA e AAA?
AA é o nível de conformidade WCAG padrão no qual a maioria dos requisitos de acessibilidade (incluindo muitas normas legais) se baseia: 4,5:1 para texto normal, 3:1 para texto grande. AAA é um nível mais estrito e opcional: 7:1 para texto normal, 4,5:1 para texto grande.
O que conta como "texto grande"?
A WCAG define texto grande como 18pt (24px) em peso normal ou maior, ou 14pt (cerca de 18,66px) em negrito ou maior. O texto grande tem um requisito de contraste menor porque traços maiores e mais grossos permanecem legíveis em contraste mais baixo.
Posso inserir cores em RGB em vez de hex?
Sim, tanto o campo de primeiro plano quanto o de fundo aceitam formatos hex (#3b82f6) ou rgb(59, 130, 246), ou você pode usar o seletor de cor ao lado de cada campo.