Ontem estava ensolarado e fazia 85 graus. Hoje, está frio, ventando e chovendo, com 54 graus.
Isso é contraste.
Os designers têm a oportunidade de manter as coisas homogêneas; fontes, elementos, layouts e tamanhos poderiam permanecer consistentes e o mundo não acabaria.
Mas não é assim que o design funciona – estamos tentando fazer as coisas diferentes, destacar-se e dizer "olhe para mim!" Então, aprendemos sobre combinação de fontes, usamos múltiplos elementos, reestruturamos nossos layouts, redimensionamos e realinhamos nosso conteúdo para torná-lo mais interessante e acessível para os espectadores.
O contraste de cores é outro elemento com o qual os designers brincam, não apenas para efeito estético, mas também para acessibilidade geral.
Contraste de cores no design
A palavra "contraste" simplesmente significa "diferença".
O que é contraste de cores?
Cores contrastantes são cores que diferem umas das outras. Os níveis de contraste variam de alto a baixo, dependendo de sua posição na roda de cores. Por exemplo, cores que estão diretamente opostas uma à outra na roda de cores têm o maior contraste possível, enquanto cores próximas umas das outras têm um baixo contraste.
Por exemplo, vermelho-laranja e laranja são cores que têm baixo contraste; vermelho e verde são cores que têm alto contraste.
Embora muitos esquemas de cores contrastantes sejam interessantes e às vezes até esteticamente agradáveis de se olhar, as cores contrastantes servem a um propósito adicional: acessibilidade do usuário.
Contraste de cores por estética
Para dizer o mínimo, escolher cores de alto contraste para um design é uma jogada ousada. Abaixo estão exemplos de cores de alto contraste. Esses pares estão diretamente opostos um ao outro na roda de cores.
Elas são definitivamente muito para se olhar. Mas às vezes, a ousadia compensa. Essas cores não parecem um pouco familiares?
Fonte: Gerard Malanga, Andy Warhol
Arte e design que usam cores de alto contraste realmente "saltam aos olhos". Olhar para designs como esses cria uma experiência única, mas tende a se tornar um pouco doloroso.
Por causa dessa responsabilidade, o alto contraste de cores nem sempre é a melhor ideia para usar no design. Ao mesmo tempo, o baixo contraste de cores também pode ser uma má ideia; usar esses esquemas torna difícil diferenciar entre os elementos.
Embora designs com baixo contraste tenham uma estética própria, eles nem sempre são a melhor escolha para materiais de marketing ou design de embalagens.
Usar contraste de cores em produtos físicos é tudo sobre encontrar um equilíbrio entre os altos e baixos. No design básico, não há fórmula para um bom contraste; é preciso um bom olho e muita prática.
Quer aprender mais sobre Software de Desenho? Explore os produtos de Desenho.
Contraste de cores por acessibilidade
O contraste de cores é mais do que apenas uma estética; é também uma necessidade, especialmente na web. A coisa mais importante a lembrar aqui é que, se você está construindo um site, elaborando uma apresentação ou projetando um infográfico, é crucial que as informações fornecidas sejam acessíveis a todos os envolvidos.
Uma das melhores maneiras de fazer isso é garantir que as cores que você está usando em seu design – gráfico ou web – tenham alto contraste.
Contraste na web
O WCAG (Guia de Acessibilidade de Conteúdo Web) 2.0 fornece diretrizes específicas para garantir que o contraste de cores entre o primeiro plano (texto, imagens, etc.) e o fundo seja apropriado usando uma proporção. Essa proporção também varia com base no tamanho e peso do texto sendo usado.
O WCAG 2.0 expressa que o contraste é uma medida da diferença no brilho percebido entre duas cores. Essa diferença é indicada com uma proporção entre 1:1 (menor contraste possível; texto branco em fundo branco) e 21:1 (maior contraste possível; texto preto em fundo branco ou vice-versa).
O contraste mínimo listado pelo WCAG é uma proporção de 4.5:1, com exceção de texto grande, logotipos ou baixo contraste intencional na web. Valores hexadecimais das cores em uso são necessários para medir o contraste.
| DEFINIÇÃO: Um código hexadecimal de cor (código hex) detalha a composição de uma cor específica em um espaço de cores RGB. É composto por seis caracteres, tanto numéricos quanto alfabéticos. O primeiro par de valores refere-se ao vermelho, o segundo ao verde e o terceiro ao azul, em valores hexadecimais de 0-FF (#RRGGBB). |
Tudo isso é um pouco confuso. Vamos colocar em prática.
Embora parte do texto acima possa ser legível para você, pode ser difícil ou impossível para outros com deficiências visuais lerem. Mesmo a última opção com uma proporção de 4.57:1 é difícil de olhar. Lembre-se de que 4.5:1 é o mínimo.
Incluir contraste apropriado é apenas um dos muitos elementos de design web necessários para um ótimo site. Não tem certeza se está fazendo isso bem o suficiente? Software de verificação de contraste de cores pode ajudá-lo a garantir que a paleta de cores que você está usando esteja otimizada para a melhor experiência do usuário possível.
Consegue me ler agora?
Não! Olhe para isso, um exemplo perfeito de como o cabeçalho desta conclusão é 1. feio e 2. impossível de ler.
Você pode ler estudos sobre contraste de cores, daltonismo e acessibilidade, mas não há nada como experimentar essa frustração em primeira mão. Não é agradável, então faça seu dever de garantir que seus usuários e espectadores não passem por isso também.
O contraste aparece de forma diferente, dependendo se seu projeto é impresso ou digital. Saiba mais sobre a diferença entre RGB vs CMYK.
Daniella Alscher
Daniella Alscher is a Brand Designer for G2. When she's not reading or writing, she's spending time with her dog, watching a true crime documentary on Netflix, or trying to learn something completely new. (she/her/hers)
