06 Acessibilidade

Nossas regras de acessibilidade se aplicam a todas as comunicações visuais da Môre — de interfaces web a redes sociais. Desenvolvidas com base no WCAG 2.1 Nível AA, o padrão de referência para acessibilidade digital. A acessibilidade garante que nosso conteúdo seja legível para o maior número possível de pessoas. Aplicada de forma consistente e com intenção.

Tipografia

A more utiliza duas tipografias: Manrope (principal, em todos os contextos) e Vesterbro (destaque, apenas em títulos). Todo uso tipográfico deve atender aos requisitos mínimos de tamanho e peso para acessibilidade.

1.1 Tamanhos Mínimos de Fonte

Web

Tipo de Texto

Tam. Mínimo

Peso

Corpo / parágrafo

16px (12pt)

Regular ou Medium

Legendas / labels

14px (10,5pt)

Medium

Subtítulo / Heading 3

18px (13,5pt)

Medium ou Bold

Heading 2

24px (18pt)

Medium ou Bold

Heading 1 / Display

32px+ (24pt+)

Bold

O WCAG 2.1 AA define "texto grande" como 18pt (24px) regular ou 14pt (18,67px) negrito. Textos grandes possuem requisito de contraste menor (3:1 em vez de 4,5:1). Prefira sempre tamanhos maiores quando o layout permitir.

Redes

Sociais

Contexto

Tam. Mínimo

Tam. Recomendado

Peso

Post Instagram

28px

32–40px

Medium ou Bold

Story Instagram

32px

40px+

Bold

Post LinkedIn

24px

28–36px

Medium ou Bold

Legendas curtas

20px

24px

Regular

As plataformas de redes sociais redimensionam e comprimem as imagens. Sempre teste seu design no menor tamanho de exibição previsto antes de publicar.

1.2 Pesos Tipograficos e Acessibilidade

Pesos finos e Light podem reduzir a legibilidade, especialmente em tamanhos pequenos ou sobre fundos coloridos. Aplique as seguintes regras:

• Manrope Light: use apenas para textos decorativos de exibição com 32px ou mais

• Manrope Regular: peso minimo para todo texto de corpo e interface

• Manrope Medium: preferencial para legendas, labels e textos de apoio

• Vesterbro ExtraBold: apenas para títulos — nunca para corpo de texto ou frases longas

• Manrope Light: use apenas para textos decorativos de exibição com 32px ou mais

• Manrope Regular: peso minimo para todo texto de corpo e interface

• Manrope Medium: preferencial para legendas, labels e textos de apoio

• Vesterbro ExtraBold: apenas para títulos — nunca para corpo de texto ou frases longas

Nunca use o peso Light sobre fundos coloridos. O traçado reduzido diminui significativamente a legibilidade para pessoas com baixa visão.

1.3 Linha e Espaçamento

Propriedade

Recomendado

Mínimo

Altura de linha

1,5x o tamanho da fonte

1,4x o tamanho da fonte

Espaçamento entre parágrafos

1x o tamanho da fonte

0,75x o tamanho da fonte

Espaçamento entre letras

Padrao / 0

Sem tracking negativo

Contraste de Cores

O WCAG 2.1 AA define taxas mínimas de contraste entre o texto e seu fundo. Atender a essas taxas não e opcional — e um requisito legal e ético para a acessibilidade digital.

2.1 Requisitos de Taxa de Contraste

Tipo de Texto

Mínimo AA

AAA (aspiracional)

Observações

Texto normal (< 18pt

regular, < 14pt negrito)

4,5:1

7:1

Corpo e UI em geral

Texto grande (>= 18pt

regular, >= 14pt negrito)

3:1

4,5:1

Títulos e textos de

exibição

Componentes de UI e

objetos gráficos

3:1

—

Bordas, ícones, gráficos

Texto decorativo /

logotipos

Sem requisito

—

Use bom senso

mesmo assim

A taxa de contraste e calculada a partir dos valores de luminância relativa. Use ferramentas como o WebAIM Contrast Checker (webaim.org/resources/contrastchecker) ou plugins do Figma como "Contrast" ou "A11y - Color Contrast Checker" para verificar seus designs.

2.2 Analise de Contraste da Paleta de Cores da more

Paleta Institucional — sobre Branco (#FFFFFF)

Cor

Hex

Contraste

Texto Normal

Texto Grande

Brand 900

#50001D

16,8:1

Brand 700

#940036

8,9:1

Brand 400

#FA2F79

3,4:1

Brand 050

#FFEAF2

1,1:1

Paleta Estúdio — sobre Branco (#FFFFFF)

Cor

Hex

Contraste

Texto Normal

Texto Grande

Studio 900

#090D5E

19,2:1

Studio 700

#1F26A2

9,4:1

Studio 400

#528BFF

3,1:1

Studio 050

#D5E3FF

1,3:1

Paleta Equipes — sobre Branco (#FFFFFF)

Cor

Hex

Contraste

Texto Normal

Texto Grande

Squads 900

#44065E

17,6:1

Squads 700

#7B1FA2

7,1:1

Squads 400

#D063FF

2,6:1

Squads 050

#FAEFFF

1,1:1

Combinações de
Cores Aprovadas

Use esta seção como referencia rápida para combinações seguras de texto sobre fundo. Todas as combinações abaixo atendem ao WCAG 2.1 AA para texto normal de corpo (mínimo de 4,5:1)

Fundos Claros - Branco ou tons 050

Cor do texto

Fundo

Contraste

Texto Normal

Texto Grande

Neutral 900

#FFFFFF

19,8:1

Brand 700

#FFFFFF

8,9:1

Brand 900

#FFFFFF

16,8:1

Studio 700

#FFFFFF

9,4:1

Studio 900

#FFFFFF

19,2:1

Squads 700

#FFFFFF

7,1:1

Squads 900

#FFFFFF

17,6:1

Fundos Escuros - Neutral 900 ou outros tons 900

Cor do texto

Fundo

Contraste

Texto Normal

Texto Grande

Neutral 050

#141822

19,8:1

Brand 400

#141822

5,8:1

Brand 400

#141822

4,01:1

Studio 400

#141822

6,3:1

Studio 400

#141822

4,5:1

Squads 400

#141822

5,4:1

Squads 400

#141822

4,67:1

Texto sobre Grafismos

Os grafismos da Môre são abstratos, multi-coloridos e de alto contraste interno. Isso os torna visualmente ricos, mas exige atenção especial quando há texto sobreposto. Esta seção define as estratégias aprovadas e proibidas para garantir acessibilidade.

4.1 Estratégias Recomendadas

Regra WCAG 2.1 AA: texto normal exige contraste mínimo de 4,5:1. Como o fundo é dinâmico, a solução mais segura é sempre usar uma camada intermediária (overlay) entre o grafismo e o texto.

Overlay escuro - Mais recomendado

Exemplo

Overlay

Cor do Texto

Contraste

Aprovação

Lorem

Ipsum

Neutral 900

Opacidade: 65%

Neural 050 ou

Squads 400

21:1

Lorem

Ipsum

Neutral 900

Opacidade: 65%

Neural 050 ou

Studio 400

5,8:1

Lorem

Ipsum

Neutral 900

Opacidade: 65%

Neural 050 ou

Brand 400

21:1

Overlay claro - Permitido com cuidado

Exemplo

Overlay

Cor do Texto

Contraste

Aprovação

Lorem

Ipsum

Neutral 050

Opacidade: 75%

Neural 900 ou

Squads 700

15,2:1

Lorem

Ipsum

Neutral 050

Opacidade: 30%

Neural 900 ou

Studio 700

2,1:1

4.2 Resumo de Regras

Estratégia

Cor do Texto

Contraste

Resultado

Overlay escuro 65%

Neutral 050

21:1

Overlay escuro 65%

Studio 400 (label)

5,8:1

Overlay escuro 65%

Squads 400 (label)

5,4:1

Overlay escuro 65%

Brand 400 (label)

4,83:1

Overlay claro 75%

Neutral 900

15,2:1

Overlay claro 30%

Neutral 900

2,1:1

Sem overlay

Neutral 050

~1,8:1

Sem overlay

Brand 400

~2,3:1

Sem overlay

Squads 400

~2,6:1

4.3 Checklist

Sempre aplique overlay antes de posicionar texto sobre qualquer grafismo

Overlay escuro rgba(20,24,34,0.65) é a solução universal e recomendada
Se usar overlay claro, opacidade mínima de 70%
Nunca avalie o contraste apenas visualmente — use uma ferramenta de checagem
Verifique o contraste na região de maior brilho do grafismo, não apenas no centro
Tons 400 das paletas são permitidos apenas para labels (texto grande ≥ 18pt), nunca para corpo

Nunca use o peso Light sobre fundos coloridos. O traçado reduzido diminui significativamente a legibilidade para pessoas com baixa visão.

Grafismos

Materiais

06

Acessibilidade

06

Acessibilidade

Tipografia

Contraste de Cores

Combinações de

Cores Aprovadas

Texto sobre Grafismos