Verificador de contraste de cores de texto
Compare cores opacas de texto SRGB com limites de contraste não arredondados WCAG.
Seus dados
Seus resultados
Pronto quando você precisarSeus resultados aparecerão aqui.
Como funciona
Calcule a luminância relativa da WCAG sRGB e compare a razão de contraste não arredondada com limiares de texto normais e grandes. Uma pré-visualização e relatório de texto mantêm as cores fornecidas sem alterar a paleta do site.
Algumas informações úteis
Opaque 3/6 dígitos sRGB Hex apenas. Sem alfa, gradientes, cores largas, imagens, testes anti-aliasing ou de contraste não-texto. WCAG tem exceções, um par de cores não estabelece acessibilidade de uma página.
Quando usar esta ferramenta
O contraste de texto depende da diferença na luminância relativa entre um primeiro plano e fundo, não simplesmente se duas cores parecem diferentes. Forneça duas cores hexóticas opacas para ver sua relação e separar os resultados do limiar normal e grande texto. Decisões usam o valor não arredondado, porque arredondamento pode mover um valor quase limitado através de um limiar exibido. A prévia ilustra o par fornecido sem mudar a paleta deste site. Um par passante não estabelece a acessibilidade de uma página: tamanho de texto real, peso, exceções e o fundo renderizado ainda precisa de revisão.
- Verifique um texto proposto e um par sólido.
- Investigue uma proporção perto de um limiar AA.
- Guarde um relatório curto para uma revisão de design.
Como usar o verificador de contraste de cores de texto
Digite duas cores hex opacas.
Use #RGB ou #RRGGBB para texto e fundo. Transparência e valores de gama larga não são suportados.
Revisão normal e texto grande separadamente
Leia a proporção, resultados AA e AAA. Aplique o status de texto grande somente quando o tamanho e o peso atuais atenderem à definição.
Inspecione a prévia e informe.
Use a prévia como ilustração e baixe o relatório de texto. Verifique o fundo da página, tratamento de fontes e qualquer exceção aplicável separadamente.
Texto preto no branco
Entradas
Texto #000000, fundo #ffffff.
Resultado
A proporção é 21:1 e atende aos limiares AA/AAA normais e grandes.
O que significa?
Isso verifica o par fornecido, não audita layout, interação, indicadores de foco ou um site inteiro.
Erros comuns para evitar
Comparando uma proporção arredondada
Um número arredondado pode obscurecer uma falha logo abaixo do limite. Decisões usam a razão subjacente.
Chamando qualquer texto grande
O texto deve atender à definição tamanho/peso. Uma etiqueta semântica não se qualifica.
Ignorando o fundo real
Um gradiente, imagem ou camada translúcida pode tornar um par diferente das cores sólidas inseridas.
Perguntas frequentes.
Definições, casos de borda e próximos passos práticos para esta ferramenta. Procure todas as ferramentas FAQs
Quais formatos de cor são suportados?
Opaco de três ou seis dígitos com um "#". Valores curtos são expandidos. Alfa, chamado de cores, gradientes e valores de gama larga não são aceitos.
O que é AA de texto normal?
Para o par fornecido, a razão mínima testada é 4.5:1. Reveja as exceções do critério e o contexto de texto renderizado separadamente.
O que qualifica como texto grande?
Pelo menos 18 pontos, equivalentes a 24 pixels CSS, ou em negrito pelo menos 14 pontos, sobre 18.67 CSS pixels. Uma etiqueta nesta ferramenta não muda seu texto renderizado.
Por que 4.5 exibido perto de um limite ainda falha?
A classificação usa a proporção não arredondada. Um valor bem abaixo de 4.5 não atinge esse limiar mesmo que uma pequena rodada de exibição para cima.
Quais são os limiares da AAA?
Os cheques exibidos usam 7:1 para texto normal e 4.5:1 para texto grande. Estes são resultados de par de cores, não uma avaliação de conformidade geral.
Inverter o primeiro plano e o fundo mudam a proporção?
Não. A proporção compara mais leve e mais escura de forma simétrica. O efeito visual e o contexto de leitura ainda podem ser diferentes.
Pode testar botões, ícones ou indicadores de foco?
Essa ferramenta explica o contraste de texto. Critérios de não texto e estados de interação exigem sua própria revisão em vez de uma conclusão geral desses resultados de texto.
Um resultado passante significa que o site está acessível?
Não. Conteúdo, acesso ao teclado, estrutura, etiquetas, foco, movimento e muitos outros requisitos não são inspecionados por um cálculo de duas cores.
Fontes e método
Use as referências abaixo para verificar definições e orientação da plataforma. O escopo e os limites do modelo são explicados acima. Leia nossos padrões editoriais.