Use o contraste de cores certo ao criar sites

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.

veja cores contrastantes

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.

contraste de cor adequado

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.

rebeli√£o de contraste 1

rebeli√£o de contraste 2

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.

contraste webaim

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.

verificação de contraste snook

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.

checkmycolours contrast

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).

contraste do sinal de cores

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.