Verificador de contraste de cores

Foreground Background

The quick brown fox jumps over the lazy dog.Large text and UI components use the lower 3:1 AA threshold.

Executado inteiramente no seu navegador — nada do que você cola é enviado ou armazenado. Contadores anônimos de resultados por execução podem ser usados em pesquisas agregadas; URLs, domínios, IPs e identificadores nunca são incluídos, e nenhuma estatística é divulgada com menos de 100 execuções.

Comentários

Palette audit

Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.

Check

Sobre esta ferramenta

Grátis, sem cadastro. Compare cores de primeiro plano e fundo com WCAG 2.2 AA e AAA, encontre alternativas hexadecimais práticas que passam ou verifique o contraste real renderizado de uma URL ativa.

Verificação WCAG 2.2 color contrast, encontrar mais próximo passing foreground colors, e auditar CSS color tokens em seu navegador.

Recursos

Em paste mode isso stays em o navegador — paste CSS custom propriedades, Tailwind-style nome/value tokens, ou um loose listar de hex colors. Somente o URL mode sends anything para our servidor, e que é o público página address você enter, não um palette.
Loads o página em um metered headless navegador e runs axe-core's color-contrast rule against o real computed styles — o resolved foreground, background, opacity, inherited color, e CSS variables depois o cascade, não um static-HTML color guess. Este é o mesmo Browser-Rendering pipeline o Tester usa, filtered para just contrast constatações.
Pasted colors give você exato math em o pair você tipo. O URL mode loads o real página em um metered headless navegador e reads cada element's real computed color e background depois o CSS cascade, inheritance, opacity, e navegador defaults são resolved — o somente way para get um genuine contrast verdict para um ativo página, since um static-HTML color guess pode ser incorreto.
WCAG AA exige 4.5:1 para normal texto e 3:1 para grande texto e non-text UI components. AAA exige 7:1 para normal texto e 4.5:1 para grande texto.

Como funciona

Loads o página em um metered headless navegador e runs axe-core's color-contrast rule against o real computed styles — o resolved foreground, background, opacity, inherited color, e CSS variables depois o cascade, não um static-HTML color guess. Este é o mesmo Browser-Rendering pipeline o Tester usa, filtered para just contrast constatações.

Limitações

Não. Isso verificações color pairs, não typography, focus states, images de texto, ou (em paste mode) real rendered backgrounds. Trate isso como um design-time verificação e test o finished interface too.
Pasted colors give você exato math em o pair você tipo. O URL mode loads o real página em um metered headless navegador e reads cada element's real computed color e background depois o CSS cascade, inheritance, opacity, e navegador defaults são resolved — o somente way para get um genuine contrast verdict para um ativo página, since um static-HTML color guess pode ser incorreto.

Perguntas frequentes

Qual taxa de contraste eu preciso?

uma WCAG AA exige 4,5:1 para texto comum e 3:1 para texto grande e componentes de tela que não são texto. uma nível máximo exige 7:1 para texto comum e 4,5:1 para texto grande.

Isto comprova que minha página é acessível?

Não. uma ferramenta verifica pares de cores, não tipografia, estados de foco, imagens de texto nem, não modo de colagem, fundos realmente renderizados. use-uma como uma verificação durante o projeto visual e teste também uma tela finalizada.

Para onde vai minha paleta?

não modo de colagem, ela permanece não navegador — cole propriedades personalizadas de CSS, unidades de nome/valor não estilo Tailwind ou uma lista simples de cores hexadecimais. Somente o modo URL envia algo ao nosso servidor, e esse dado é o endereço da página pública informado, não uma paleta.

Como o modo URL difere de colar cores?

como cores coladas fornecem o cálculo exato façuma par digitado. O modo URL carrega uma página efetiva em um navegador sem tela com uso medido e lê uma cor e o fundo efetivamente calculados de cada elemento depois que uma cascata de CSS, uma herançuma, uma opacidade e os padrões façuma navegador são resolvidos — uma única forma de obter um veredicto efetiva de contraste para uma página ativa, pois uma estimativa de cor não HTML estático pode estar errada.

Problemas comuns e como corrigi-los

Erro cor par falha WCAG AA para comum texto Correção: altere primeiro plano ou fundo emé comum texto atingir em pelo menos 4.5:1 contraste, então testar novamente passagem façuma mouse, foco, desativado, e visitado estados.
Erro cor par falha WCAG AA para grande texto Correção: altere cor par emé texto em pelo menos 24px normal ou 18.66px negrito atingir 3:1 contraste.
Aviso O par de cores não atende ao WCAG AAA para texto comum Correção: Ajuste o par de cores até o texto comum atingir contraste de 7:1 quando o nível AAA for um requisito do projeto.
Aviso cor par falha WCAG AAA para grande texto Correção: ajuste cor par emé qualificado grande texto atingir 4.5:1 contraste quando AAA é obrigatório.
Aviso cor par falha não-texto contraste orientação Correção: aumente contraste de essenciais ícones, foco indicadores, controle limites, e gráficos objetos para em pelo menos 3:1 em relação uma adjacentes cores.