Contraste para componentes
O que a norma pede
Componentes da interface (bordas de campos, botões, caixas de seleção) têm contraste de pelo menos 3:1 com o fundo e entre seus estados, salvo quando estão inativos.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: os componentes têm contraste de pelo menos 3:1 com o fundo e entre seus estados.
- Exceção: o componente está em estado inativo (desativado).
- 1.4.11 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Garanta contraste de 3:1 nas bordas de campos e caixas de seleção, e entre os estados marcado e não marcado. Não delimite botões só com sombras suaves.
Campo de texto
Borda do campo sobre fundo branco.
Errado: Borda sutil
Na especificação
Borda #E4E7EC sobre #FFFFFF — 1,2:1.
O campo quase não aparece.
Certo: Borda visível
Na especificação
Borda #667085 sobre #FFFFFF — 4,8:1.
O campo é identificável.
Confira o contraste das bordas dos componentes de formulário e do estado marcado de caixas de seleção e rádios, porque os estilos padrão das bibliotecas nem sempre chegam a 3:1. Ajuste os tokens quando não chegarem.
Caixa de seleção
Estilo da caixa desmarcada.
Errado: Borda clara
input[type=checkbox] { border: 1px solid #EAECF0; }A caixa desmarcada some.
Certo: Borda com contraste
input[type=checkbox] { border: 2px solid #667085; }A caixa é percebida.
Inclua o contraste de componentes na revisão do sistema de design e avalie as bibliotecas de terceiros antes de adotá-las. Se a pessoa não percebe onde está o campo, não consegue usar o serviço.
Formulário minimalista
Campos sem borda, só com linha inferior clara.
Errado: Linha clara
Situação
Linha #EAECF0.
Pessoas com baixa visão não acham os campos.
Certo: Linha visível
Situação
Linha #667085.
Campos perceptíveis.
Meça o contraste das partes que identificam cada componente, como bordas de campos e botões secundários, e compare os estados marcado e desmarcado. Componentes desativados ficam de fora.
Botão secundário
Botão com contorno sobre fundo branco.
Errado: Contorno fraco
Medição
Contorno #D0D5DD — 1,5:1.
Não atende.
Certo: Contorno forte
Medição
Contorno #667085 — 4,8:1.
Atende.
Ao montar páginas, use os botões do sistema de design, e não imagens de botão ou cores livres. Avise o time se um componente parecer apagado.
Botão em banner
Um botão sobre o banner da campanha.
Errado: Botão improvisado
No gerenciador
Botão com fundo amarelo claro sobre banner branco.
O botão mal aparece.
Certo: Botão padrão
No gerenciador
Botão primário do sistema de design.
O botão é percebido.