Pular para o conteúdo principal
Tools Star Hub
Ferramentas para desenvolvedores categoria

Verificador de contraste de cores

Verifique o contraste WCAG entre a cor do texto e a do fundo, com aprovado/reprovado para AA e AAA.

Carregando ferramenta…

Esta ferramenta roda no seu navegador. Dados, arquivos e valores gerados ficam neste dispositivo. Favoritos e ferramentas recentes, se você usar, guardam apenas nomes de ferramentas no armazenamento local — nunca senhas, documentos ou conteúdo de QR codes. Veja a política de privacidade.

Por enquanto, o guia detalhado desta ferramenta (como usar, exemplos e perguntas frequentes) está em inglês.

What this tool does

Compare two solid colors and show the WCAG 2 contrast ratio for normal and large text. Designers checking a button label against its background use it before they ship the pair. Black on white is 21:1, and a photograph behind the text is outside the calculation.

How to use

  1. Pick a foreground color and a background color, or type HEX values.
  2. Read the contrast ratio and the AA/AAA results for normal and large text.
  3. Swap the colors if you need the inverse pair.

Examples

  • Black on white

    The ratio is 21:1, which meets every listed WCAG contrast criterion.

  • Similar greys

    A pair such as #777777 on #999999 fails normal-text AA because the ratio is well below 4.5:1.

How it works

The tool uses WCAG 2 relative luminance. A pass means the pair meets the selected WCAG contrast criterion. Contrast is only one part of accessibility. Font size, weight, spacing and keyboard access still matter. The checker does not claim a design is universally accessible.

Limitations

The result is the WCAG 2 contrast ratio of two colors the parser can read. A pass is not a full accessibility audit. Font size is not read from a stylesheet, and a color the parser rejects produces no ratio.

See the disclaimer for what these tools do not cover.

FAQ

Is the Color Contrast Checker free?
Yes. Checking a foreground and background pair against WCAG contrast ratios is free, with no account.
Does a pass mean my UI is accessible?
No. It only means that color pair meets that contrast threshold. Other requirements still apply.
Which ratios are AA and AAA?
Normal text uses 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 for AA and 4.5:1 for AAA. The page marks each of those four results separately.
Does a background photo count?
No. The ratio uses the two solid colors you enter. A photograph behind the text, or a translucent layer, is outside the calculation.

Ferramentas relacionadas