Verifique a relação de contraste entre duas cores para garantir conformidade com WCAG 2.1. Teste para níveis AA e AAA tanto para texto normal quanto grande.
Insira ou selecione sua cor de texto/primeiro plano usando o seletor de cores ou digitando um valor HEX. Esta é normalmente sua cor de texto.
Insira ou selecione sua cor de fundo. Use o botão de troca para inverter rapidamente o primeiro plano e o fundo se necessário.
Verifique a proporção de contraste e os selos de conformidade WCAG. Selos verdes indicam aprovação, vermelho indica reprovação. Busque pelo menos conformidade AA para todo o texto.
Use a seção de visualização para ver como sua combinação de cores fica com texto real em diferentes tamanhos antes de implementá-la em seu design.
O WCAG (Diretrizes de Acessibilidade para Conteudo Web) define requisitos de contraste para garantir que o conteudo seja legivel por pessoas com deficiencias visuais. O nivel AA exige 4.5:1 para texto normal e 3:1 para texto grande. O nivel AAA exige 7:1 e 4.5:1 respectivamente.
A luminancia relativa mede o brilho percebido de uma cor usando a formula: L = 0.2126R + 0.7152G + 0.0722B. Os coeficientes refletem a sensibilidade do olho humano, sendo o verde o mais proeminente. Os valores sao linearizados do sRGB antes do calculo.
A formula da taxa de contraste e: (L1 + 0.05) / (L2 + 0.05), onde L1 e a luminancia da cor mais clara e L2 da mais escura. O deslocamento de 0.05 evita divisao por zero e considera a luz ambiente.
Texto grande e definido como 18pt (24px) em peso normal ou 14pt (18.5px) em negrito. Texto grande tem requisitos de contraste mais baixos porque seu tamanho maior o torna naturalmente mais legivel, mesmo com menos contraste.
Aproximadamente 8% dos homens e 0.5% das mulheres tem deficiencia na visao de cores. Texto com baixo contraste tambem e dificil de ler para usuarios idosos, sob luz solar intensa ou em displays de baixa qualidade. Bom contraste beneficia a todos.
Uma proporção de contraste mede a diferença na luminância (brilho) entre duas cores. Varia de 1:1 (sem contraste, mesma cor) a 21:1 (contraste máximo, preto sobre branco). Proporções mais altas significam melhor legibilidade e acessibilidade.
Este é um texto de parágrafo regular. Um bom contraste garante a legibilidade para todos os usuários, incluindo aqueles com deficiências visuais.
Este é um texto pequeno que requer um contraste ainda melhor para a legibilidade.
Taxa de contraste
Clique em qualquer par para usá-lo como cores de primeiro plano/fundo
Predefinições salvas é um recurso para Apoiadores.
Histórico de ferramentas é um recurso para Apoiadores.
Notas de ferramentas é um recurso para Apoiadores.
