Iniciação rápida
-
Pick cores
Use o seletor de cores ou digite # RRGGBB.
-
Leia os resultados
Ver proporção e WCAG AA / AAA pass / fail.
Verificador de contraste de cor
Digite as cores de primeiro plano e fundo hexagonais para calcular a relação de contraste e a conformidade AA / AAA.
Privacidade: processado localmente, nunca carregado.
↓ Colar na área de entrada abaixo para ver os resultados instantaneamente
检查前景色与背景色的对比度是否符合 WCAG 2.x 建议。
前景色
背景色
Aa
对比度
17.4
WCAG AA
通过
WCAG AAA
通过
AA 大文本
通过
Notas
WCAG 阈值
AA 正文 ≥4.5:1，大文本 ≥3:1; AAA 正文 ≥7:1，大文本 ≥4.5:1。
Digite as cores de primeiro plano e fundo hexagonais para calcular a relação de contraste e a conformidade AA / AAA.
Níveis do WCAG
Texto normal AA precisa de ≥ 4,5; texto grande (18pt + ou 14pt negrito) precisa de ≥ 3: 1.
Características e casos de uso
Verifique as proporções de contraste WCAG para pares de primeiro plano / fundo e níveis de conformidade AA / AAA.
Use ao finalizar sistemas de design, legibilidade de botões, afinação do modo escuro e auto-auditorias a11y.
Fluxo de trabalho típico
Quando os designers precisam verificar se as cores da interface atendem aos padrões de acessibilidade, eles primeiro inserem a cor do texto (por exemplo, #333333) e a cor de fundo (por exemplo, #FFFFFF) na ferramenta. Ele exibe instantaneamente a relação de contraste (4,68: 1) e a classificação WCAG (AAA). Isso é mais eficiente do que cálculos manuais ou ajustes de tentativa e erro, especialmente para ciclos de desenvolvimento ágeis.
Ao implementar o modo escuro, os desenvolvedores podem testar esquemas de cores em lote. Por exemplo, verifique o texto principal (#E0E0E0) contra o cinza escuro (#121212) e o preto puro (#000000). A ferramenta mantém o histórico para facilitar a comparação. Nota: AA requer ≥ 4,5: 1 contraste (texto normal), AAA requer ≥ 7: 1.
Exemplos
Exemplo
Input
#1a1a1a on #ffffff
Output
ratio ~16.1, AA pass
FAQ
Suporte RGB / HSL?
Hex apenas por enquanto; use a ferramenta de conversão de cores primeiro.
Como verificar o contraste em fundos gradientes?
Para os gradientes CSS, teste o texto contra as duas extremidades e as cores do meio. Se o gradiente tiver várias cores, use a relação de contraste mais baixa como referência. Na prática, considere usar cores sólidas ou sobreposições semi-transparentes em áreas de gradiente para manter a legibilidade.