Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
Que contraste precisam botões e campos de entrada em websites?
Botões, campos de entrada e gráficos significativos precisam de razão de contraste de pelo menos 3:1 com o seu ambiente. Este limite vem do padrão WCAG. Garante que um visitante com visão fraca reconhece onde clicar e onde escrever — um campo branco com limite cinzento-claro em fundo branco é praticamente invisível.
Elementos de controlo têm de se destacar
Enquanto a regra de contraste conhecida afecta o texto, aqui trata-se de tudo o que é visível e que carrega uma função: o limite do campo de entrada, a zona do botão, o ícone de lupa da procura, o visto na caixa de selecção. O design moderno muito reduzido é a armadilha mais comum — limites de campo cinzento-claro em fundo branco parecem elegantes mas estão frequentemente bem abaixo de 3:1. Um visitante com visão decrescente então não vê um formulário com campos reconhecíveis: Não sabe para onde com o cursor. Também ícones sem descrição de texto — como o menu hambúrguer — têm de se distinguir do fundo com pelo menos 3:1, senão a navegação não existe para ele.
Assim o nosso núcleo de medição mede o contraste dos elementos de controlo
O nosso núcleo de medição escolhe uma amostra dos elementos de controlo da sua página — campos de entrada, botões, botões de link estilizados — e fotografa cada um com ambiente no navegador. Dos pontos de imagem calcula a luminosidade de limite, preenchimento e ambiente e daí a razão de contraste actual da borda do elemento. Se limites medidos estão abaixo de 3:1, o relatório marca isto conscientemente como caso de verificação comprovado e não imediatamente como violação: Um campo aparentemente fraco pode ser transportado visualmente por um contentor circundante — isso um humano avalia no padrão ouro baseado na foto de ecrã fornecida. O critério conta como aprovado apenas com amostra suficientemente grande e completamente clara; objectos puramente gráficos como diagramas permanecem assunto humano de verificação.
Beispiele
Eingabefeld mit blassem Rahmen
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rahmen, Symbole und Fokusrahmen brauchen 3:1 zum Hintergrund, sonst ist das Feld nicht als Feld erkennbar.
- Verifique os seus formulários: Cada campo de entrada precisa de um limite ou preenchimento que se destaque claramente do fundo.
- Peça à sua agência para verificar as cores de limite dos campos contra o limite de 3:1 e torná-las mais escuras onde necessário.
- Controle ícones sem texto — procura, menu, carrinho — para contraste suficiente com o fundo.
- Preste atenção a estados: Também a marcação de um separador seleccionado ou caixa de selecção activa precisa 3:1.
- Considere os seus formulários de dois metros de distância — se os campos desaparecem opticamente o contraste é fraco demais.