Logo do XTools
XTools

Verificador de contraste

Verifique o contraste de texto e fundo em relação a WCAG AA e AAA
  • Os arquivos não saem do seu dispositivo
  • Roda no navegador
  • Grátis, sem cadastro, sem marca d’água

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Como usar Verificador de contraste

Confira um par de cor de texto e de fundo em relação ao WCAG 2 (AA e AAA para texto normal, texto grande e componentes de interface) e veja o contraste de luminosidade APCA do rascunho do WCAG 3. Quando um par falha, ela sugere as cores aprovadas mais próximas.

  1. 1

    Informe a Cor do texto e a Cor de fundo como HEX, rgb(), hsl(), oklch() ou um nome de cor, ou clique em uma amostra para abrir o seletor de cor.

  2. 2

    Leia a Taxa de contraste e o resultado Aprovado ou Reprovado de cada verificação AA e AAA.

  3. 3

    Olhe a Pré-visualização, digite seu próprio Texto de exemplo e use Trocar cores para testar o inverso.

  4. 4

    Em Cores aprovadas mais próximas, clique em Aplicar em uma sugestão Ajustar texto ou Ajustar fundo para AA (4,5:1) ou AAA (7:1).

  5. 5

    Depois que você muda uma cor, o URL da página guarda as duas cores, então você pode copiá-lo para compartilhar o resultado.

Perguntas frequentes

De qual taxa de contraste eu preciso?

O WCAG AA pede 4,5:1 para texto normal e 3:1 para texto grande (24 px ou mais, ou 18,66 px em negrito) e componentes de interface, como ícones e bordas de campos. O AAA pede 7:1 e 4,5:1.

Por que 4,497:1 aparece como 4,49 em vez de 4,50?

A taxa nunca é arredondada para cima além de um limiar, então um par que fica logo abaixo de 4,5:1 não parece aprovado.

Posso testar texto semitransparente?

Sim. Use o controle Opacidade do texto; o texto translúcido é misturado sobre o fundo antes de a taxa ser medida.

O que é o número APCA?

O APCA vem do rascunho do WCAG 3 e dá um contraste de luminosidade (Lc) que depende de qual cor é o texto; valores negativos significam texto claro sobre fundo escuro. Ainda é um rascunho, então as taxas do WCAG 2 continuam sendo o alvo usual de conformidade.

Como as cores sugeridas são escolhidas?

Só a luminosidade é alterada (em OKLCH), então o matiz e a sensação da sua cor permanecem. Se nenhuma direção atinge o alvo, ela diz Não alcançável só mudando a luminosidade; tente ajustar a outra cor.