Developer ToolsVerificador de Acessibilidade de Cor UI
Verifique se combinações de cores de UI atendem aos padrões de acessibilidade WCAG. Valide taxas de contraste para conformidade AA e AAA em tempo real.
Verificador de Combinação de Cores
Pré-visualização
Texto normal (14px)
Texto grande (18px+)
Referência das Diretrizes WCAG
Padrão WCAG AA
- • Texto normal: taxa de contraste mínima de 4,5:1
- • Texto grande (18px+ ou 14px+ em negrito): mínimo 3:1
- • Exigido para a maioria das conformidades legais
- • Abrange a maioria das necessidades de acessibilidade
WCAG AAA Aprimorado
- • Texto normal: taxa de contraste mínima de 7:1
- • Texto grande: mínimo 4,5:1
- • O mais alto padrão de acessibilidade
- • Recomendado para interfaces críticas
Ferramentas Relacionadas
Sobre Esta Ferramenta
Como Funciona
- Calcula taxas de contraste entre cores de primeiro plano e fundo
- Avalia a conformidade com as diretrizes de acessibilidade WCAG 2.1
- Testa requisitos de tamanho de texto normal e grande
- Fornece visualizações em tempo real de combinações de cores
- Suporta códigos de cor hexadecimais de 3 e 6 dígitos
Casos de Uso Comuns
- Designers UI/UX garantindo esquemas de cores acessíveis
- Desenvolvedores validando escolhas de cores de interface
- Auditores de acessibilidade verificando padrões de conformidade
- Designers de marca criando paletas de cores inclusivas
- Designers web atendendo a requisitos legais de acessibilidade
Perguntas Frequentes
O que é acessibilidade de cor e por que é importante?
A acessibilidade de cor garante que as combinações de cores ofereçam contraste suficiente para pessoas com deficiências visuais, incluindo daltonismo e baixa visão. É essencial para tornar sites e aplicativos utilizáveis por todos.
Quais são os padrões WCAG AA e AAA?
WCAG AA exige uma taxa de contraste de 4,5:1 para texto normal e 3:1 para texto grande. AAA é mais rigoroso, exigindo 7:1 para texto normal e 4,5:1 para texto grande. AA é o padrão legal para a maioria dos requisitos de conformidade.
Como sei se minha combinação de cores atende aos padrões de acessibilidade?
Insira suas cores de primeiro plano (texto) e fundo na ferramenta. Ela calculará a taxa de contraste e mostrará se atende aos padrões AA ou AAA para texto normal e grande.
O que conta como "texto grande" nas diretrizes de acessibilidade?
Texto grande é definido como 18pt (24px) ou maior para texto regular, ou 14pt (18,67px) ou maior para texto em negrito. Esses tamanhos têm requisitos de contraste mais baixos (3:1 para AA, 4,5:1 para AAA).
Posso testar várias combinações de cores ao mesmo tempo?
Sim! Use o botão "Adicionar à lista de comparação" para salvar combinações de cores e comparar vários pares lado a lado. Isso é útil ao projetar esquemas de cores.
Quais formatos de cor a ferramenta suporta?
A ferramenta suporta códigos de cor hexadecimais em formatos de 6 dígitos (#000000) e 3 dígitos (#000). Você pode inserir cores manualmente ou usar o seletor de cores para seleção visual.
Por que algumas cores visualmente diferentes têm a mesma taxa de contraste?
As taxas de contraste são calculadas com base na luminância (brilho) e não no matiz (cor). Cores com a mesma luminância terão taxas de contraste idênticas.
O que fazer se as cores da minha marca não atendem aos padrões de acessibilidade?
Você tem várias opções: ajustar o brilho/escuridão de uma cor, adicionar uma borda ou contorno ao texto, usar as cores apenas para texto grande ou reservá-las para elementos decorativos.
Os padrões de acessibilidade se aplicam a todos os elementos do site?
Os requisitos de contraste se aplicam a texto, imagens de texto e componentes de interface como botões e campos de formulário. Eles não se aplicam a elementos decorativos, logotipos ou componentes inativos/desabilitados.
Quão precisos são os cálculos de contraste?
A ferramenta usa a fórmula oficial WCAG 2.1 para calcular luminância relativa e taxas de contraste. Os cálculos são matematicamente precisos.
Posso usar esta ferramenta para design de aplicativos móveis?
Com certeza! As diretrizes WCAG se aplicam a aplicativos móveis e a sites. Muitas plataformas móveis (iOS, Android) fazem referência aos padrões WCAG em suas diretrizes de acessibilidade.
E se eu precisar testar cores que não sejam códigos hex?
Atualmente, a ferramenta suporta códigos de cor hexadecimais. Para RGB, HSL ou outros formatos, você pode usar nossa ferramenta Color Picker Converter para converter entre formatos primeiro.