# Cores

Usamos as cores para expressar nossas marcas e enfatizar as principais mensagens dentro da interface. O uso inteligente de cores em nossas experiências digitais é fundamental para criar um conteúdo atraente e chamar atenção para o que mais importa naquele contexto. A cor deve ter uma hierarquia clara para ajudar a focar a atenção do usuário ou para dar suporte à legibilidade ideal.

# Cores de Branding

As cores das marcas atuam como primárias, visto que cada vertical tem a sua personalização em nível de Branding. Você pode consultá-las na seção de Branding.

# Cores de Status

Cores de status servem essencialmente para destacar elementos que exigem ação e devem ser usadas em formulários, alertas, notificações, banners e outros elementos de caráter similar.

Cor	Descrição de uso
Azul	Caráter informativo, para ressaltar uma informação importante.
Verde	Criar sinergia entre eficiência e sucesso de uma tarefa. Comumente presente em mensagens de confirmação.
Amarelo	Situações de loading, mensagens de atenção e erros não críticos (como a validação global de um formulário).
Vermelho	Mensagens de erro ou em ações de deletar/remover algo. Comumente usada para apontar um problema crítico.

# Cores Cinzentas & Neutras

As cores neutras devem ser usadas especialmente em temas de fundo (versões light e dark) e alguns formatos de texto (maiores detalhes na seção de textos).

Cor	Descrição de uso
Cores Cinzentas	Em textos*
Cores Neutras	Em variações de planos de fundo.

* Com exceção do branco, que se aplica tanto para fundos quanto para textos com fundos escuros.

# Cores de Redes Sociais

# Acessibilidade

Cores criam um grande impacto visual sobre a interpretação e ação dos usuários na interface, principalmente no que tange questões de acessibilidade. Nossas diretrizes são focadas nas relações de contraste e no uso em contextos distintos.

O contraste de cores refere-se à diferença entre o primeiro plano e o fundo. A WCAG estabeleceu relações específicas de contraste de cores para obter conformidade. Essas diretrizes são divididas em três níveis: A, AA e AAA.

Referência:

Nível da Diretriz	Descrição
A	O projeto atinge o nível básico de acessibilidade.
AA	O nível ideal que deve ser alcançado, no qual o site atinge um nível superior de acessibilidade, para que seja acessível à maioria das pessoas.
AAA	Nível muito elevado de acessibilidade. Todos os critérios A, AA e AAA precisam ser cumpridos.

Para análise da relação de contraste em cores:

Critério de Contraste	Descrição
AA (Smaller)	Passa as Diretrizes do Nível AA em todos os tamanhos. Relação de contraste mínima ≥ 4.5:1 (<18pt ou <14pt negrito).
AA18 (Large)	Passa as Diretrizes do Nível AA apenas com texto de ≥18px ou ≥14px em negrito. Relação de contraste mínima ≥ 3.0:1 (>18pt ou >14pt negrito).
AAA (Smaller)	Passa as diretrizes de nível AAA em todos os tamanhos. Relação de contraste mínima ≥ 7.0:1.
AAA 18 (Large)	Passa as diretrizes de nível AAA em todos os tamanhos. Relação de contraste mínima ≥ 4.5:1.

Visto que temos muitos produtos legados, as decisões de cores compartilhadas aqui refletem adesão a uma taxa de contraste de pelo menos 2.0:1, entretanto, a expectativa é que com a evolução dos produtos legados e consequente construção de novos, as novas taxas se aproximem da escala 4.5:1, atigindo assim o critério real recomendado pela WCAG.

Oferecemos também suporte para os três tipos mais comuns de daltonismo. É importante que, ao usar as cores, os tons adjacentes sejam distinguíveis para os usuários com os principais tipos de daltonismo. Recomendamos o uso do Plugin Stark (Adobe XD) para análise de contraste e teste de suporte para daltônicos.

Tipo de Daltonismo	Efeitos
Deuteranopia	Não enxergam verde e, em consequência, enxergam tons de marrons.
Protanopia	Diminuição da percepção dos tons de vermelho, em consequência, enxergam tons de marrons, verdes ou cinza.
Tritanopia	Dificuldade em diferenciar o amarelo e azul, em consequência, enxergam o amarelo e o azul em tons diferentes.

# Referências

• Colour Contrast Analyser - Ferramenta para teste de contraste e análise de suporte para variações do daltonismo (Disponível em Windows e macOS).
• Contrast Checker - Versão web para verificar o contraste de cores e o nível de acessibilidade delas conforme o guideline da WCAG.
• Plugin Stark - Plugin para ajudar a projetar e construir produtos que sejam acessíveis, éticos e inclusivos (Integração com Adobe XD).
• Acessibilidade Toolkit - Kit Open Source das regras WCAG 2.1 desenvolvido pelo designer Marcelo Sales.
• Manual Oficial WCAG 2.0 - Manual para compreender e implementar as diretrizes de acessibilidade para o conteúdo da Web 2.0.