Como usar bem o contraste na sua marca
O contraste é a diferença de luminosidade entre o texto e o que está atrás dele. Quando é baixo, o texto fica difícil de ler: numa tela sob o sol, num celular com o brilho no mínimo ou para qualquer pessoa com baixa visão. Por isso as diretrizes de acessibilidade WCAG definem um mínimo mensurável.
O que significam AA e AAA
- AA, texto normal: 4,5 para 1. É o mínimo recomendado para parágrafos, menus, botões e formulários.
- AA, texto grande: 3 para 1. Vale para títulos de 24 px ou mais, ou de 18,66 px ou mais em negrito.
- AAA: 7 para 1 e 4,5 para 1. É o nível mais exigente. Vale a pena buscá-lo em textos longos.
- Ícones e bordas de campos: 3 para 1. Os elementos gráficos necessários para entender ou usar algo também precisam de contraste.
Contraste e cores da marca
Muitas marcas têm uma cor principal que funciona muito bem como fundo e muito mal como texto, como os amarelos e os azuis-claros. A solução não é mudar a marca: é definir no manual quais combinações são usadas para texto e quais apenas para fundos, formas ou detalhes. Duas ou três variações mais escuras ou mais claras da mesma cor costumam bastar.
O que o número não mede
A taxa de contraste não leva em conta a espessura da letra, o tamanho real na tela nem o daltonismo. Uma tipografia muito fina precisa de mais contraste que o mínimo. E nunca use apenas a cor para transmitir algo, como um erro num formulário: acompanhe com um texto ou um ícone.
Perguntas frequentes
Como é calculada a taxa de contraste?
Compara-se a luminância relativa das duas cores com a fórmula da WCAG: (a mais clara + 0,05) dividido por (a mais escura + 0,05). O resultado vai de 1 para 1 (mesma cor) a 21 para 1 (preto sobre branco).
Qual nível eu preciso atender?
Para a maioria dos sites, o nível AA: 4,5 para 1 em texto normal e 3 para 1 em texto grande. É o exigido pelas leis e normas de acessibilidade de muitos países.
Funciona com cores com transparência?
Não. Use a cor final que aparece na tela, com a transparência já aplicada sobre o fundo. Você pode capturá-la com o conta-gotas do seu navegador ou do seu programa de design.
Vocês guardam as cores que eu testo?
Não. O cálculo é feito no seu navegador e nada é enviado.
Respostas da equipe da AiDo Creative