Início
Tom Utilities

Verificador de contraste de cores

Utilitários para desenvolvedores

Meça as taxas de contraste WCAG e veja se o texto atende AA e AAA para texto normal e grande.

Como usar

Check a pair of colors

Pick a foreground and background color. The tool shows the contrast ratio and pass or fail badges for each WCAG level.

  1. Choose the text color.
  2. Choose the background color.
  3. Aim for at least 4.5:1 for normal text.

WCAG thresholds

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA.

Perguntas frequentes

What counts as large text?

WCAG defines large text as at least 18pt (24px) or 14pt (18.66px) when bold.

Is a higher ratio better?

Yes. A ratio of 21:1 is the maximum, achieved by black text on a white background.

Ferramentas relacionadas

Gerador de paleta de cores Gere paletas de tons claros, escuros, análogos, complementares e tríade a partir de qualquer cor. Conversor de cores Converte cores entre HEX, RGB e HSL com uma amostra de pré-visualização ao vivo. Gerador de gradientes CSS Crie gradientes CSS lineares ou radiais com visualização ao vivo e CSS pronto para copiar. Gerador de UUID / GUID Gera UUIDs aleatórios da versão 4 e os copia um a um ou em massa. Gerador de hash Calcula resumos MD5, SHA-1, SHA-256 e SHA-512 de qualquer texto. Conversor de timestamp Converte entre timestamps Unix, ISO 8601 e datas locais legíveis.