Contraste para objetos gráficos
O que a norma pede
Partes de gráficos e ícones necessárias para entender o conteúdo têm contraste de pelo menos 3:1 com o fundo e entre si, salvo quando a apresentação específica é essencial.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: as partes necessárias dos objetos gráficos têm contraste de pelo menos 3:1 com o fundo e entre si.
- Exceção: a apresentação específica é essencial, como a foto de um produto ou um mapa oficial.
- 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:
Use cores com contraste de 3:1 entre as séries vizinhas de um gráfico e entre ícones informativos e o fundo. Combine a cor com rótulos diretos nas barras e fatias.
Gráfico de pizza
Divisão do orçamento em cinco fatias.
Errado: Tons próximos
Na especificação
Cinco tons de azul-claro vizinhos.
As fatias se confundem.
Certo: Contraste e rótulos
Na especificação
Cores alternadas com 3:1 entre vizinhas e rótulo em cada fatia.
Cada fatia é distinguível.
Configure a paleta da biblioteca de gráficos com contraste adequado e acrescente rótulos de dados ou padrões, como hachuras. Verifique também os ícones SVG que carregam informação.
Paleta do gráfico
Configuração da biblioteca.
Errado: Paleta padrão clara
cores: ["#B9E6FE", "#7CD4FD", "#E0F2FE"]Séries sem contraste.
Certo: Paleta com contraste
cores: ["#026AA2", "#B54708", "#067647"], rotulos: { exibir: true }Séries distinguíveis e rotuladas.
Adote uma paleta de gráficos acessível no padrão visual do órgão e revise os painéis e relatórios publicados. Dados em gráficos pouco contrastados não chegam a quem tem baixa visão.
Relatório anual
O relatório tem 20 gráficos.
Errado: Cores livres
Situação
Cada gráfico com cores escolhidas pelo autor.
Vários gráficos ilegíveis.
Certo: Paleta padrão
Situação
Todos os gráficos com a paleta acessível do órgão.
Relatório legível.
Meça o contraste entre séries vizinhas dos gráficos e dos ícones sem texto ao lado com o fundo. Se o contraste for baixo, confira se há rótulos que compensem.
Ícone de alerta
Ícone de aviso amarelo sobre branco.
Errado: Amarelo claro
Medição
#FDE272 sobre #FFFFFF — 1,3:1.
Não atende.
Certo: Tom escuro
Medição
#B54708 sobre #FFFFFF — 5,4:1.
Atende.
Peça gráficos com rótulos diretos, em vez de legendas separadas que obrigam a comparar cores, e publique os dados também em texto ou tabela.
Legenda do gráfico
Gráfico de barras por região.
Errado: Legenda por cor
Gráfico
Legenda separada com quadradinhos coloridos.
Exige comparar cores.
Certo: Rótulos diretos
Gráfico
Nome da região escrito em cada barra.
Não depende de cor.