ToolStack

Verificador de Contraste

Verifique na hora a razão de contraste WCAG entre cores de texto e fundo.

100% privado — tudo roda no seu navegador

Publicidade

Como usar

  1. 1

    Defina a cor do texto e a cor de fundo com os seletores ou digitando códigos hex.

  2. 2

    A razão de contraste WCAG é calculada na hora.

  3. 3

    Confira os quatro selos para ver quais níveis WCAG são atendidos.

  4. 4

    Use Inverter para verificar a combinação inversa.

Exemplos

Texto escuro sobre branco

Entrada

Texto #111827 · Fundo #FFFFFF

Saída

17,74 : 1 — AA e AAA aprovados para todos os tamanhos

Cinza de baixo contraste

Entrada

Texto #9CA3AF · Fundo #FFFFFF

Saída

2,54 : 1 — reprovado em AA para texto normal

Perguntas frequentes

Qual razão de contraste devo buscar?

A WCAG recomenda pelo menos 4,5:1 para texto normal (AA) e 7:1 para AAA. Texto grande (18 pt ou 14 pt em negrito) precisa de pelo menos 3:1.

Como a razão é calculada?

Com a fórmula WCAG 2.x (L1 + 0,05) / (L2 + 0,05), em que L1 e L2 são as luminâncias relativas da cor mais clara e da mais escura. A razão vai de 1:1 a 21:1.

O daltonismo é verificado?

Não — a razão mede apenas a diferença de luminosidade. Cores aprovadas podem ainda ser difíceis de distinguir para pessoas com daltonismo.

Ferramentas relacionadas

Conversor de CoresConverta entre os formatos HEX, RGB, HSL, HSV e HWB em qualquer direção.Gerador de Cores CSSTransforme uma cor base em uma escala de 10 tons e exporte como variáveis CSS.Seletor de CorEscolha qualquer cor e copie os valores HEX, RGB, HSL e HSV na hora.HEX para RGBConverta códigos HEX em valores RGB na hora — grátis e privado.RGB para HEXConverta valores RGB em um código HEX na hora — grátis e privado.Gerador de GradientesCrie gradientes CSS lineares e radiais visualmente e copie o código CSS.