Cores e acessibilidade

TL;DR

O CÉNIT usa um sistema de tokens de cor. A cor primária do seu clube aparece em todo o app, mas o sistema usa automaticamente uma versão de alto contraste para botões e controles interativos, garantindo legibilidade nos modos escuro e claro.

Como funcionam as cores de marca

Quando você define uma cor primária em Configurações, o app a aplica em destaques, abas ativas, links e acentos. Dois pontos importantes:

• No modo escuro, o sistema mistura sua cor com o fundo escuro. Cores muito claras (pastéis, quase brancas) podem perder contraste sobre superfícies escuras — o texto por cima fica difícil de ler.
• Para botões e controles interativos, o app sempre usa uma versão de alto contraste garantido da sua cor primária, independentemente do que você escolheu. Isso garante legibilidade WCAG AA (mínimo 4.5:1 de contraste) mesmo que sua cor de marca seja clara.

Como escolher uma cor primária

Não há restrições sobre o que escolher, mas para melhores resultados:

• Prefira cores saturadas de tom médio a escuro. Um azul profundo, um verde rico ou um vermelho forte funcionam bem em ambos os modos.
• Evite cores muito claras (pastéis, quase brancas, quase amarelas) como primária — tendem a desaparecer no modo escuro e sobre fundos brancos no modo claro.
• Teste ambos os modos após salvar. Abra o toggle de tema e verifique que títulos, abas ativas e botões estejam corretos.

Modo claro vs modo escuro

O app vem em modo escuro por padrão. Quando um usuário muda para o modo claro, os tokens de cor se ajustam automaticamente — os fundos ficam brancos, o texto escurece e as cores semânticas (ok/aviso/perigo) mudam para variantes de maior contraste.

Suas cores primária e secundária se aplicam em ambos os modos. O mesmo aviso se aplica: cores claras que ficam bem no modo escuro podem desaparecer no modo claro.

Veja Modo claro / escuro para como alternar e Branding do clube para onde configurar suas cores.

Acessibilidade

O app atende aos requisitos de contraste WCAG AA em todos os controles:

• Todos os botões com texto branco têm relação de contraste ≥ 7.9:1.
• Os indicadores de status (disponível / lesionado / recuperando / suspenso) têm tanto cor quanto rótulo de texto — a cor nunca é o único sinal.
• Os anéis de foco são visíveis em todos os elementos interativos para usuários que navegam por teclado.
• As mensagens de erro usam role="alert" para que leitores de tela as anunciem imediatamente.