Manual de marca

Acessibilidade

O portal segue a WCAG 2.2 nível AA: texto normal com contraste mínimo de 4,5:1; texto grande (≥ 24px, ou ≥ 18,66px em negrito) e ícones com 3:1.

Contrastes verificados

Combinação	Contraste	Situação
gray-900 (Tinta) sobre branco	16,3:1	✅ AAA
gray-900 sobre gray-50 (Gelo)	15,3:1	✅ AAA
gray-700 sobre branco	10,2:1	✅ AAA
gray-500 sobre branco	5,6:1	✅ AA
gray-500 sobre gray-50	5,3:1	✅ AA
gray-400 sobre branco	2,6:1	❌ só placeholder e ícone
Branco sobre brand-600 (Verde Lar)	10,7:1	✅ AAA
brand-600 sobre gray-50	10,0:1	✅ AAA
brand-600 sobre brand-100 (Menta)	9,0:1	✅ AAA
brand-200 sobre brand-600	7,1:1	✅ AAA (texto de apoio)
gray-900 sobre coral-500 (Amarelo)	9,1:1	✅ AAA (botão principal)
coral-500 sobre brand-600	6,0:1	✅ AA
coral-500 sobre brand-800 (Verde Noite)	8,2:1	✅ AAA
coral-700 sobre branco	5,9:1	✅ AA
coral-700 sobre coral-100	5,2:1	✅ AA
Branco ou Gelo sobre coral-500	1,8:1	❌ proibido
coral-500 como texto em fundo claro	1,7–1,8:1	❌ proibido
pago-text sobre branco / pago-bg	5,3 / 4,7:1	✅ AA
pendente-text sobre pendente-bg	5,6:1	✅ AA
atrasado-text sobre branco / atrasado-bg	5,9 / 5,2:1	✅ AA
pago (#2E9E6B) sobre branco	3,4:1	⚠️ só marcação e ícone
atrasado (#D9574A) sobre branco	3,9:1	⚠️ só marcação e ícone

Tinta / Amarelo ✓Branco / Verde Lar ✓Branco / Amarelo ✕Amarelo em fundo claro ✕

Teclado, foco e leitores de tela

• Todo elemento interativo é alcançável com Tab; Esc fecha modais e menus.
• Anel de foco obrigatório em Verde Lar — nunca remover o outline sem substituto.
• Ícones decorativos com aria-hidden="true"; botões só com ícone sempre com aria-label.
• Logo com alt="ImobHapi".
• Carregamentos com role="status" ou aria-busy="true"; um único <h1> por página, sem pular níveis; seções com aria-labelledby.
• Campos com erro usam aria-invalid e apontam a mensagem com aria-describedby.
• Imagens de conteúdo com alt descritivo; imagens decorativas com alt="".
• Status sempre com texto, além da cor. Positivo e negativo com sinal (+/−), nunca só cor.