Acessibilidade: Perceptível - Contraste e Cores (WCAG 2.2)

Este exemplo demonstra os critérios de WCAG 2.2 relacionados ao contraste e cores, com um tema claro/escuro.


Critério 1.4.3: Contraste Mínimo (AA)

Este critério garante que o contraste entre o texto e o fundo seja suficiente para que pessoas com baixa visão consigam ler o conteúdo.

O contraste mínimo exigido é de 4.5:1 para texto normal e 3:1 para texto grande (18pt ou 14pt em negrito).

Exemplos de Texto e Fundo:

Texto Normal (Contraste Suficiente): Este texto possui um bom contraste em relação ao fundo claro.

Texto Normal (Baixo Contraste): Este texto pode ser difícil de ler para algumas pessoas devido ao baixo contraste.

Texto Grande (Contraste Suficiente): Títulos e textos maiores também precisam de contraste adequado.


Critério 1.4.1: Uso da Cor (A)

A cor não deve ser o único meio visual de transmitir informação, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual.

Se a cor for usada para indicar algo, deve haver um método alternativo (como texto, ícones ou padrões) para transmitir a mesma informação.

Exemplos:


Critério 1.4.11: Contraste de Conteúdo Não Textual (AA)

Este critério se aplica a componentes da interface de usuário e objetos gráficos.

As representações visuais de componentes da interface do usuário (botões, caixas de seleção, etc.) e objetos gráficos essenciais para a compreensão do conteúdo devem ter um contraste de no mínimo3:1 contra cores adjacentes.

Exemplos Visuais:

Passe o mouse sobre os círculos para ver os "estados" (não obrigatório por WCAG, mas bom para demonstrar interatividade e contraste).

Botão
Ícone
Campo

Os exemplos acima são ilustrativos para demonstrar a ideia de contraste.

Exemplo Prático: Formulário de Contato Acessível

Este formulário demonstra como aplicar os princípios de contraste e uso da cor em elementos interativos.