ImageColorPicker.com

Verificador de contraste de cor

Teste a proporção de contraste entre cores de primeiro plano e de fundo para garantir acessibilidade.

Verifique suas cores

Teste combinações de cores para garantir que atendem aos padrões de acessibilidade WCAG para legibilidade do texto.

20.75 para 1
Contraste
AAA
Resultado do texto
Excelente

Comparado: #000000 sobre #FFFFEB

Texto

16px, Regular (400)

Conta como texto normal.

  • AA (WCAG 1.4.3): pelo menos 4.5:1

    Aprovado

  • AAA (WCAG 1.4.6): pelo menos 7:1

    Aprovado

Componentes de UI e gráficos

Ícones, bordas de campos, indicadores de foco e outras partes que você precisa ver para usar a interface.

  • AA (WCAG 1.4.11): pelo menos 3:1

    Aprovado
20.75 para 1. Texto: cumpre AA, cumpre AAA. Componentes de UI: cumpre.
Como isso é verificado
Cores comparadas (após mistura)
Texto #000000 sobre fundo #FFFFEB
Luminância relativa
Texto 0.0000, fundo 0.9877
Fórmula
(L1 + 0.05) / (L2 + 0.05) onde L1 é a luminância da cor mais clara e L2 da mais escura.
Razão exata
20.7556 para 1, mostrado como 20.75 para 1. O valor mostrado é truncado, não arredondado, portanto nunca parece melhor do que é. O valor exato é o que é comparado com o requisito.

Tamanho do texto: 16px, Regular (400)

Conta como texto normal. Texto grande tem pelo menos 24px (18pt), ou pelo menos 18.67px (14pt) quando em negrito (peso 700 ou mais). Os tamanhos são mostrados truncados, não arredondados.

Conta como texto normal. Texto grande tem pelo menos 24px (18pt), ou pelo menos 18.67px (14pt) quando em negrito (peso 700 ou mais). Os tamanhos são mostrados truncados, não arredondados.

Aa
Título de pré-visualização

A rápida raposa marrom salta sobre o cão preguiçoso

Exemplo de texto pequeno (12px)

Texto
#000000
Fundo
#ffffeb

Padrões WCAG

Nível AA

Proporção mínima de contraste de 4.5:1 para texto normal e 3:1 para texto grande. Necessário para a maioria dos sites.

Nível AAA

Proporção de contraste aprimorada de 7:1 para texto normal e 4.5:1 para texto grande. Recomendado para acessibilidade ideal.

Verificador de contraste de cor

Calcule a taxa de contraste entre cores de texto e de fundo.

Escolha uma cor usando o Selector de cor para o texto e a cor de fundo ou insira uma cor no formato hexadecimal RGB (por exemplo, #259 ou #2596BE). Você pode ajustar o controle deslizante para selecionar a cor. As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) têm uma diretriz específica para ajudar a determinar se o texto é legível para usuários com visão. Este critério usa um algoritmo específico para mapear combinações de cores em proporções comparáveis. Usando esta fórmula, a WCAG afirma que uma proporção de contraste de cor de 4.5:1 entre o texto e seu fundo é adequada para texto normal (corpo), e texto grande (18+ pt normal, ou 14+ pt negrito) deve ter pelo menos uma proporção de contraste de cor de 3:1.

Principais características

  • Cálculo de proporção de contraste em tempo real
  • Verificação de conformidade WCAG AA & AAA
  • Deslizadores HSL para ajustes finos
  • Vários formatos de visualização

Ferramentas avançadas

  • Correção automática de cores
  • Amostras de texto e fundo
  • Detecção de nome de cor
  • Exportar resultados

Perguntas frequentes

Para a conformidade WCAG AA, textos normais exigem uma razão de contraste mínima de 4,5:1, enquanto textos grandes (18pt ou 14pt em negrito) exigem 3:1.

O WCAG AAA exige razões de contraste mais altas: 7:1 para textos normais e 4,5:1 para textos grandes, em comparação com 4,5:1 e 3:1 do AA, respectivamente.

Use nosso recurso de correção automática para ajustar a cor do texto ou do fundo sem perder a intenção do design, ou ajuste as cores manualmente com os controles deslizantes HSL, que mostram com indicadores visuais as faixas ideais para a conformidade AA/AAA.

As zonas verdes e as marcações AA/AAA mostram as faixas ideais para atingir a conformidade WCAG. As dicas de direção (Mais claro/Mais escuro) orientam você a um contraste melhor, de acordo com a sua combinação atual de cores.

Sim, você pode inserir qualquer código de cor HEX ou usar o seletor de cores para escolher cores personalizadas. A URL é atualizada automaticamente, para que você possa compartilhar combinações específicas de cores.