Cor e acessibilidade
Contraste, daltonismo e leitura: como fazer cores que todo mundo consegue ver e usar.
AA ou AAA: qual contraste buscar
AA pede 4,5:1 no texto comum e AAA pede 7:1. Veja a diferença, quando vale subir o nível e como ajustar uma cor cinza para passar.
Baixa visão e cor: o que ajuda a ler
Contraste acima do mínimo, texto que amplia, cores que o leitor pode trocar: veja o que a WCAG diz sobre baixa visão e como aplicar na sua peça.
Contraste em botões, ícones e campos
Botões, ícones, bordas de campos e foco do teclado precisam de 3:1 de contraste na WCAG 2.1. Veja o que medir, o que é isento e como corrigir.
Contraste em texto grande e texto pequeno
O texto grande aceita contraste de 3:1 no AA e 4,5:1 no AAA. Veja o que a WCAG considera grande, em pontos e pixels, e como não errar o tamanho.
Contraste WCAG: o que é e como medir
Entenda a razão de contraste da WCAG, os números que valem (4,5:1, 3:1, 7:1) e como medir duas cores em HEX em poucos passos.
Daltonismo: tipos e efeito nas cores
Conheça os tipos de daltonismo, quais cores cada um confunde e o que muda na hora de montar uma paleta que funcione para todo mundo.
Modo escuro: cuidados com o contraste
No modo escuro valem os mesmos mínimos da WCAG. Veja como medir texto, bordas e cores vivas sobre fundo escuro e respeitar a preferência do sistema.
Não use só a cor para passar informação
A WCAG pede que a cor nunca seja o único sinal. Veja exemplos em links, formulários e gráficos, e como corrigir com texto, ícone, sublinhado ou padrão.
Vermelho e verde: avisos sem confusão
Erro em vermelho e sucesso em verde confundem quem tem daltonismo. Veja como montar avisos com texto, ícone e brilho diferente para todos entenderem.
Quer ver outros temas? Veja todos os artigos.