Verificador de Contraste de Cor

Todas as ferramentas
Verificador de Contraste de Cor
Verifique o rácio de contraste WCAG entre uma cor de texto e de fundo — veja as classificações de aprovação/reprovação AA/AAA para texto normal, texto grande e componentes de interface, com pré-visualização em direto e sugestões de cores acessíveis.
Cor do texto
Tinte
Cor de fundo
Tinte
Rácio de contraste
--:1
Texto normal
Texto de corpo abaixo de 18px (ou abaixo de 14px a negrito)
AA AAA
Texto grande
18px+ regular, ou 14px+ a negrito
AA AAA
Componentes de interface
Ícones, bordas, controlos de formulário e gráficos
AA AAA
Pré-visualização em direto

The quick brown fox

O texto grande é confortável de ler quando o contraste é suficiente.

Este é um parágrafo de amostra de texto de corpo normal. Um bom contraste de cor mantém o seu conteúdo legível para todos, incluindo pessoas com baixa visão ou daltonismo. uma ligação de amostra.

Letras pequenas e legendas são as mais difíceis de ler — precisam do maior contraste.
Botão de amostra Botão de amostra
Sugestão

Tudo é calculado em direto no seu browser usando a fórmula de luminância relativa WCAG 2.x — sem envios, sem registo, completamente gratuito.

Partilhar
Ferramentas Relacionadas
Simulador de Daltonismo

Veja a sua imagem ou paleta como as pessoas com protanopia, deuteranopia, tritanopia ou acromatopsia a veem — corre inteiramente no seu browser, nada é enviado.
Conversor de Códigos de Cor

Converta cores entre HEX, RGB, RGBA, HSL, HSLA e HSV — escolha uma cor, ajuste o alfa e copie qualquer formato instantaneamente.
Exportador de Paletas

Cole ou importe um conjunto de cores e exporte-as instantaneamente para variáveis CSS, SCSS, configuração Tailwind, JSON ou amostras SVG — o passo final para qualquer paleta.
Pesquisas populares
verificador de contraste de cor razão de contraste wcag verificador de contraste de acessibilidade verificador de contraste de texto teste de contraste aa aaa verificar contraste de cor online

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.