Uma alta taxa de rejeição de um site é seu design visual ruim. Quando as fontes são muito pequenas, ilegíveis, ou quando o contraste da cor está errado, ou quando há muitas distrações (anúncios, mensagens brilhantes etc.) ou quando não há espaços corretos (linhas brancas), muitas pessoas simplesmente desistem. a área, sem um segundo pensamento. Deixar um site está a um clique de distância para os usuários.
Um dos motivos mais comuns para deixar um site prematuramente são as combinações de cores mal escolhidas que reduzem a legibilidade do conteúdo.
Segundo a Organização Mundial da Saúde, existem cerca de 285 milhões de pessoas com deficiência visual em todo o mundo, muitas das quais têm daltonismo parcial ou completo. Pessoas com deficiência visual percebem as cores de maneira diferente; portanto, um alto contraste de cores no design de um site é inevitável se alguém deseja fornecer aos nossos clientes um site fácil de usar.
Padrões da Web para contraste de cores
A Relação de contraste de cores mede a diferença de contraste entre duas cores. Quanto maior o valor, mais fácil é distinguir o objeto (texto, imagem, gráficos) em primeiro plano e em segundo plano.
As cores podem contrastar de várias maneiras diferentes, como em matiz (matiz), σε valor (valor) e ele saturação (saturação). A taxa de contraste da cor é calculada pelo tipo fornecido pelo W3C, a principal organização de padrões internacionais da World Wide Web.
Pode obter um preço entre 1: 1 (quando não há contradição e todo o primeiro plano e plano de fundo são da mesma cor) e 21: 1 (o maior contraste que existe apenas entre preto e branco).
As diretrizes mais recentes do W3C sobre acessibilidade ao conteúdo da Web (WCAG), versão 2.0, fornecem aos desenvolvedores da Web e criadores de conteúdo pontos de referência para o valor mínimo (nível AA) e aprimorado (nível AAA) da taxa de contraste de cores aceitável. .
O nível AA requer pelo menos um motivo 4.5: 1 para texto normale 3: 1 para texto grande. É muito mais fácil para o usuário ler um texto grande, como legendas, e, portanto, requer um contraste de cores mais baixo.
Se o designer quiser atingir o nível AAA, que é o nível ideal, ele deve projetar sua cor de design com mais cuidado, pois exige pelo menos uma taxa de contraste. 7: 1 para texto normale 4.5: 1 para grandes. Se um texto fizer parte de um logotipo ou marca comercial, não há requisitos mínimos para contraste de cores, nem no nível das WCAG.
Só podemos nomear um site visualmente acessível se o índice de contraste de cores entre cada objeto em primeiro plano e seu plano de fundo atingir pelo menos o Nível AA.
Benefícios da alta taxa de contraste de cores
Garantir uma melhor legibilidade, que envolve não apenas usuários com deficiência visual, mas também pessoas que leia seu conteúdo em uma tela pequena, como em um smartphone ou SmartWatch, com talvez más condições de iluminação, e para telas de baixa qualidade.
As pessoas também leem mais rapidamente quando há um maior contraste entre texto e plano de fundo, então é provável que você precise de mais tempo para se cansar do conteúdo de um site.
Se você está preocupado que a aplicação de uma alta taxa de contraste de cores tenha um efeito negativo sobre a estética do seu design, você precisará ler o site da Contrast Rebellion, que comprova, com exemplos da vida real, que ainda é possível seguir as regras de alto contraste. levar a designs atraentes e agradáveis.
Aplicativos para controlar o contraste de cores
Existem muitas ferramentas on-line boas e gratuitas que podem ajudar os designers a verificar a taxa de contraste de cores do site.
A maneira mais fácil de controlar o design para o contraste de cores é selecionar as cores principais no Photoshop ou com uma extensão de navegador adequada, como o Firefox, e copiar os valores para um dos seguintes aplicativos.
A coisa mais importante que o designer precisa lembrar é que ele deve sempre compara a cor do primeiro planoy (como cor do texto) com a área circundante (cor de fundo).
1. Verificador de contraste de cores WebAIM
O WebAim (da Web Accessibility In Mind) é uma organização que promove a acessibilidade da Web e oferece aos desenvolvedores um verificador de contraste de cores simples, porém confiável, entre muitas outras ótimas ferramentas de acessibilidade, como o Wave, um aplicativo geral avaliar a acessibilidade que pode ajudar o designer a avaliar rapidamente problemas de acessibilidade do site.
O Verificador de contraste de cores do WebAIM examina e informa se as cores passarem nos testes AA e AAA das WCAG, para textos regulares e grandes.
2. Verificação de contraste de cores Snook
Jonathan Snook, que atualmente dirige o Shopify como desenvolvedor front-end, compartilha a ferramenta prática de controle de cores há mais de uma década. O aplicativo Snook permite alterá-los Valores HSL e RGB e cor de fundo e cor de fundo, uma por uma, usando os botões deslizantes fáceis de usar até atingir um resultado compatível com os critérios de avaliação das WCAG 2.0.
3. CheckMyColours
O CheckMyColours foi criado por Giovanni Scala e permite ao designer verificar a taxa de contraste de cores de todas as combinações de cores de plano de fundo. em um site online.
Calcula isso relação de contraste de brilho (razão de contraste de luminosidade), την diferença de brilho (diferença de brilho) e as Diferença de cor (diferença de cor) e fornece um relatório completo dos resultados. O relatório CheckMyColours pode facilitar muito o entendimento do designer de como a visibilidade de um site pode ser melhorada.
4. Designer de esquema de cores
O Designer do esquema de cores não é particularmente um controlador de contraste de cores, mas uma ferramenta para esquema de cores de combinações de coresv.
Nós o incluímos nesta coleção, porque possui um recurso que permite ver como a cor de um design é percebida por pessoas com diferentes tipos de visão. Você pode experimentar as cores do seu site para obter daltonismo completo, prototipagem, terapia secundária e muitos outros problemas de visão. O aplicativo possui uma versão mais recente chamada Paletton, que faz uma simulação visual ainda mais sofisticada (você também pode tentar simular o site como mostrado com uma tela de LED ruim ou um CRT fraco).
O W3C também fornece uma lista enorme de ferramentas de avaliação de acessibilidade da Web, nas quais você pode encontrar muitos itens interessantes sobre o contraste de cores, como esta Roda de cores de acessibilidade.
Dicas para criar sites visualmente acessíveis
Se você deseja criar um site visualmente acessível, é sempre uma boa ideia evite usar apenas cores para dar funcionalidade ou significado. Imagens que mudam de cor com base em seu estado atual são um exemplo típico disso.
Se possível, sempre projetamos pistas visuais adicionais que ajudam as pessoas que vêem as cores de maneira diferente.
Nunca se esqueça de prestar atenção especial a ele contraste de cores de nós, links e menuou qualquer outro meio de navegação no seu site. Se os usuários não puderem navegar facilmente no seu site, você os perderá rapidamente. Cores acessíveis para botões de ação eles também são vitais se você quiser usá-los.
Também é melhor verificar a proporção correta de contraste de cores o mais cedo possível no processo de design do site, pois será difícil convencer seu cliente mais tarde (no final do design) a aceitar alterar o esquema de cores do site.
