Verificador de contraste de cores

Verifique o contraste de primeiro plano/fundo em relação às WCAG AA e AAA. Veja a atualização da proporção conforme você escolhe as cores.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Verifique o contraste do primeiro plano/fundo de acordo com as diretrizes WCAG AA e AAA.
Executa no seu navegador
Grátis para usar

Como usar

Escolha as cores do texto (primeiro plano) e do fundo.
Leia a relação de contraste e os resultados AA/AAA.
Ajuste até passar do nível desejado.

How this tool works

Escolha as cores do texto (primeiro plano) e do fundo.
Leia a relação de contraste e os resultados AA/AAA.
Ajuste até passar do nível desejado.

Recommended settings

Use as opções padrão primeiro e depois ajuste se necessário

Supported formats

Text / on-page input

File size and limits

Visualizações multicamadas muito complexas podem parecer mais lentas em telefones mais antigos.

Privacy

Os geradores de cores e CSS são executados inteiramente no seu navegador. Pré-visualizações e conversões nunca carregam seus estilos.

Common use cases

Use o Color Contrast Checker sempre que precisar: Verifique o contraste do primeiro plano/fundo de acordo com as diretrizes WCAG AA e AAA.

Troubleshooting

A visualização parece diferente depois de colar

Verifique se há CSS concorrentes em sua página (redefinições, cores herdadas). Copie primeiro a regra gerada em uma folha de estilo isolada.

Perguntas frequentes

Isso carrega meu CSS?

Não. Geradores e conversores são executados em seu navegador com visualização ao vivo.

Eu preciso de uma conta?

Não. Abra a ferramenta, ajuste os controles e copie o CSS.