D
DevMe
CorNovo

Contrast Checker

Check color contrast ratios for WCAG 2.1 AA/AAA accessibility compliance.

Ferramentas relacionadas

C
Color Picker
Pick colors and get HEX, RGB, HSL, and HSB values instantly.
H
HEX to RGB
Convert HEX color codes to RGB, RGBA, HSL and CSS color values.
P
Palette Generator
Generate color palettes from a base color including tints, shades and complementary colors.

O que esta ferramenta faz

O Contrast Checker calcula a razão de contraste entre cor de texto e fundo. A ferramenta recebe dois valores de cor e entrega feedback de contraste WCAG AA e AAA. Use quando precisar verificar textos, botões, links e estados de interface para contraste legível e acessível.

Extensões e formatos relacionados

Estes são os formatos e valores diretamente relacionados ao fluxo do Contrast Checker: dois valores de cor vira feedback de contraste WCAG AA e AAA.

Valor de cor CSS

HEX / RGB / HSL

Formatos de cor usados em CSS, tokens de design e sistemas de interface para representar cores visíveis.

Padrão de contraste acessível

WCAG

Diretrizes usadas para avaliar se cores de primeiro plano e fundo têm legibilidade suficiente.

Como usar esta ferramenta

  1. 1Cole ou informe dois valores de cor no Contrast Checker.
  2. 2Ajuste as opções disponíveis quando a ferramenta oferecer controles adicionais.
  3. 3Revise feedback de contraste WCAG AA e AAA e copie ou baixe o resultado.

Casos de uso comuns

  • Usar dois valores de cor para verificar textos, botões, links e estados de interface para contraste legível e acessível.
  • Gerar feedback de contraste WCAG AA e AAA sem instalar ferramentas externas.
  • Conferir rapidamente dois valores de cor antes de colar em código, documentação ou integrações.
  • Manter dados sensíveis no navegador durante tarefas rápidas de desenvolvimento.

Perguntas frequentes

Para que serve o Contrast Checker?

Ele serve para verificar textos, botões, links e estados de interface para contraste legível e acessível, convertendo ou analisando dois valores de cor para gerar feedback de contraste WCAG AA e AAA.

Que entrada posso usar no Contrast Checker?

Use dois valores de cor. O resultado esperado é feedback de contraste WCAG AA e AAA.

O Contrast Checker envia meus dados para o servidor?

Não. As ferramentas do DevMe são projetadas para processar os dados no navegador sempre que possível.