> For the complete documentation index, see [llms.txt](https://sentido.gitbook.io/sentido_docspage/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sentido.gitbook.io/sentido_docspage/acessibilidade/navegacao/images-and-media.md).

# Personalização Visual

Tornar a aplicação acessível a públicos diversos, com diferentes limitações e contextos de utilização, exigiu uma abordagem centrada na personalização. Concluiu-se que permitir a cada utilizador adaptar a aplicação às suas necessidades individuais era a chave para uma experiência mais confortável, eficaz e positiva.

Com esse objetivo, foi necessário identificar quais as características variáveis com maior impacto na experiência de utilização. Entre essas opções, destacaram-se dois fatores fundamentais de personalização: o **tamanho do texto** e os **esquemas de cor** da aplicação, reconhecendo que estas opções beneficiam não apenas pessoas com limitações sensoriais, mas também diferentes contextos espaciais e luminosos.

### <mark style="color:$primary;">Tamanhos Tipográficos</mark>

Para além do **tamanho base (100%)**<mark style="color:$primary;">**,**</mark> a aplicação disponibiliza mais dois tamanhos tipográficos (**150% e 200%**). Esta flexibilidade permite que cada pessoa escolha o tamanho de texto mais confortável, sem comprometer a legibilidade, a hierarquia da informação ou o funcionamento da interface. Os diferentes tamanhos tipográficos foram desenvolvidos e testados individualmente, garantindo que todos funcionam corretamente nos diversos ecrãs sem cortes de informação ou sobreposição de elementos. O texto base do tema default tem um tamanho de 16px. O modo grande (200%) corresponde ao dobro deste valor, enquanto o médio (150%) funciona como um ponto intermédio, assegurando um equilíbrio entre espaço ocupado e legibilidade.&#x20;

<figure><img src="https://4110292720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ISL4PG9FwbqJvB45tFS%2Fuploads%2Fszl9sbQPfuO3mbGQ6ROk%2FFrame%20433.png?alt=media&amp;token=83b757ad-a797-4457-aff5-b65f936fbc4d" alt="Figura 1 - 3 Ecrãs a mostrar os diversos tamanhos de texto. Ecrã 1 mostra 4 eventos numa tabela de 2 por 2, sendo o texto de tamanho normal a 100%. Ecrã 2 mostra um evento, tendo agora o texto médio a 150%. Ecrã 3 mostra um evento, tendo agora o texto grande a 200%."><figcaption></figcaption></figure>

### <mark style="color:$primary;">Temas Cromáticos</mark>

Todos os temas de cores foram trabalhados de forma a serem acessíveis tendo contraste suficientes entre textos e fundos. No entanto, reconhecendo que diferentes pessoas têm necessidades distintas, tornou-se essencial estabelecer múltiplas paletas de cor, permitindo que cada pessoa adapte a aplicação ao seu conforto visual. Com esse objetivo, foram desenvolvidos **três temas cromáticos**, todos testados para assegutar legibilidade, clareza e consistência visual:

* <mark style="color:$primary;">**Tema Azul e Branco:**</mark> Este é o tema predefinido da aplicaçã. Apresenta um carácter mais ilustrativo, com foco nas cores da marca, como o azul-escuro e o magenta, e incluindo ainda uma ilustração no fundo de diversos ecrãs. Este tema tem, por norma, texto branco sobreposto a um fundo azul, garantindo um contraste adequado e uma identidade visual forte.
* <mark style="color:$primary;">**Tema Preto e Branco:**</mark> Desenvolvido a partir das preferências identificadas em utilizadores de baixa visão, este tema utiliza fundo preto e texto branco, oferecendo o nível de contraste mais elevado. Trata-se de um tema menos ilustrativo, com redução significativa de um ruído visual, permitindo que o utilizador se concentre no essencial da informação apresentada.
* <mark style="color:$primary;">**Tema Amarelo e Preto:**</mark> Semelhante ao tema anterior, este mode apresenta um contraste elevado, mas com valores invertidos: fundo amarelo e texto preto. Esta combinação revelou-se mais confortável para utilizadores com maior sensibilidade visual, sendo percecionada como mais suave em contextos de utilização prolongada.

<figure><img src="https://4110292720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ISL4PG9FwbqJvB45tFS%2Fuploads%2FF7dM3dlJvkupj7zJE8wp%2FFrame%20437.png?alt=media&amp;token=69dfcac8-b26e-4e91-b92d-3169239e223b" alt="Figura 2 - 3 Ecrãs a mostrar os diversos temas cromáticos. Ecrã 1 mostra o fundo azul escuro, com cartões azuis e texto branco, sendo o modo default. Ecrã 2 o fundo preto, com cartões pretos e texto branco, sendo o modo preto e branco. Ecrã 3 mostra o fundo amarelo, com cartões amarelos e texto preto, sendo o modo amarelo e preto."><figcaption></figcaption></figure>

## <mark style="color:$primary;">Personaliza a aplicação</mark>

As opções de personalização da aplicação podem ser ajustadas em vários momentos e locais da plataforma, garantindo que possas adaptar à experiência sempre que necessário:

1. <mark style="color:$primary;">**Onboarding:**</mark> Numa primeira interação com a aplicação, és convidado a personalizar a aplicação. Estas opções ficam automaticamente gravadas, assegurando que, sempre que abres a aplicação, a experiência corresponde às tuas escolhas e necessidades, promovendo maior conforto desde o início.
2. <mark style="color:$primary;">**Transmissão:**</mark> As preferências influenciam diretamente o aspeto das legendas e audiodescrição. Durante a transmissão, podes alterá-las em tempo real ao clicar no botão de "**Acessibilidade**", localizado no canto superior direito do ecrã. Este acesso direciona-te para as opções disponíveis neste menu, incluindo a página de "**Personalização**", onde é possível alterar estas opções, sem necessidade de interromper o evento;
3. <mark style="color:$primary;">**Menu:**</mark> Em qualquer momento da utilização da aplicação, podes aceder ao Menu, e entrar novamente na página de "**Acessibilidade**", onde tens total liberdade para ajustar as definições e adaptar a aplicação exatamente à tua maneira.