OddContrast: Como otimizar o contraste dos seus projetos web
Como otimizar o contraste

Quantas vezes visitamos uma página web na qual não conseguimos ler nada, ou usamos um aplicativo com uma combinação horrível de cores? Do ponto de vista da acessibilidade, escolher a paleta ou a relação de contraste errada pode arruinar qualquer ideia de visibilidade, mas o portal OddContrast nos ajuda a encontrar os valores corretos, baseados na versão 2 do padrão WCAG.

Se nos guiarmos pela definição do padrão WCAG em sua versão 2 (também conhecido como Diretrizes de Acessibilidade para Conteúdo Web), "contraste" é uma medida da diferença de "brilho percebido" entre duas cores, expressa como uma proporção ou ratio. Por exemplo, um texto vermelho (#ff0000) com fundo branco (#ffffff) tem uma proporção de 4:1. Se mudarmos o texto para azul (#0000ff), a proporção salta para 8,59:1, e pode ser lido melhor. Finalmente, o padrão de texto preto e fundo branco possui uma proporção de 21:1. O mais interessante? A proporção permanece intacta se invertermos as cores.

Por que isso é importante? Porque em muitas ocasiões são aplicadas combinações de cores com uma proporção muito ruim, e o texto se torna ilegível. Como alguém que já se viu forçado a aumentar o tamanho das fontes no computador, entendo mais do que nunca a importância de um bom contraste. E essa ideia nos leva ao OddContrast, um portal especialmente projetado para calcular proporções de contraste em sites, serviços e/ou aplicações de acessibilidade.

Otimize o contraste dos seus projetos com OddContrast

OddContrast: Como otimizar o contraste dos seus projetos web
Lembre-se de mudar o formato para um mais confortável para você

Não é preciso fazer muito no site para aproveitá-lo ao máximo: escolhemos um formato que represente as cores (oito disponíveis, incluindo HEX e sRGB), e ajustamos os controles deslizantes para a cor principal e a cor de fundo até obter um "aprovado" nos casos que nos interessam. O OddContrast define como proporções normais 4,5:1 para texto padrão e 3:1 para texto grande, enquanto um contraste otimizado nos fala de 7:1 e 4,5:1 respectivamente. Por outro lado, texto grande é igual ou maior que 24px com peso regular, e igual ou maior que 19px em negrito.

OddContrast: Como otimizar o contraste dos seus projetos web
"Preto e branco" funciona bem em todos os casos, mas a proporção não registrará mudanças se os invertermos

Para finalizar, o OddContrast não pretende ser o dono absoluto da verdade. Na verdade, nem precisamos de uma boa proporção em todos os casos, mas a diferença entre uma má combinação de cores e uma boa é notável. Faça o teste!

Site oficial: Clique aqui