Verificador de Contraste de Cores A11y

O contraste de cores é um aspecto essencial da acessibilidade em seu aplicativo. Selecionar uma cor de primeiro plano e de fundo com contraste grande o suficiente garantirá que seu aplicativo seja legível para todos os usuários. Quanto mais cedo você entender as especificações de contraste de cores, melhores decisões você tomará, não apenas em termos de seus aplicativos da web, mas também de sua marca como um todo.

Nota

0:1

O WCAG define dois níveis para contraste de cores: nível AA (o nível mínimo necessário para um contraste válido) e nível AAA (o nível aprimorado e melhor nível de acessibilidade). Há também 3 tipos de conteúdo (texto de corpo, texto em grande escala e objetos gráficos e componentes da interface do usuário) para os quais as diretrizes do WCAG definiram notas de contraste específicas. Idealmente, devemos sempre ter como objetivo ter pelo menos um nível AA em todos os três tipos de conteúdo. Também é importante observar que não há nível AAA para o último tipo de conteúdo (objetos gráficos e componentes ativos da interface do usuário).

Notas válidas de contraste
Tipo de conteúdoNota mínima (nível AA)Nota aprimorado (nível AAA)
Texto de corpo4.5 : 17 : 1
Texto em grande escala3 : 14.5 : 1
Objetos gráficos e componentes da interface do usuário3 : 1

Texto de corpo


WCAG AA:
Inválido
WCAG AAA:
Inválido

The quick brown fox jumped over the...

Texto em grande escala


WCAG AA:
Inválido
WCAG AAA:
Inválido

The quick brown fox jumped over the...

Objetos gráficos e componentes da interface do usuário


WCAG AA:
Inválido

Recursos adicionais:


TOPO

PRECISA DE UM DESENVOLVEDOR?

Eu estou sempre procurando novas oportunidades para programar! Acha que eu posso te ajudar a construir suas ideias, quer uma copia do meu currículo ou precisa atualizar algumas linhas de código? Entre em contato abaixo!


2024 ❖ Designed & developed by Leonardo Oliveira