[LOGIN/CADASTRO] Força da senha

[juscoton]

Contexto Força da senha: 
Texto posicionado abaixo do campo de confirmar, recomenda-se reposicionar após o primeiro campo de preenchimento da senha. 
Ao ir cumprindo as exigências de senha, a barrinha vai ficando verde, cor que não respeita diretrizes de acessibilidade. Ocorrência: web e mobile Recomendação: barras deveriam ser da cor sugerida no arquivo de referência do Figma. Também é necessário haver um estudo das cores da checklist de critérios de senha.

Problema classificado pelo Design como nível crítico médio

Escopo

• [ ] Mudar cor da barra de status para #DFDFDF (com #D2381B para crítico; #FFCA3A para moderado; #559931 para sucesso)
• [ ] Reposicionar barra de status após primeiro campo de senha
• [x] Fazer estudo de cores para checklist de critérios de senha e sugerir neste campo

Sugestão de mudança de cor da barra e reposicionamento de checklist (Substituir print após estudo de cores do checklist):

Link do figma com especificações das sugestões de mundança: https://www.figma.com/file/3IeSe7IJyAJVtsiwEa0tkU/Prot%C3%B3tipos-Mapas?type=design&node-id=14%3A8333&mode=design&t=p6NIZeCpdHZMplPI-1

[RaniGub]

@juscoton nesse print, não mostra a barra de status da força da senha. Se possível, justifique também a diretriz de acessibilidade aqui. Se não me engano, o Mapa ainda terá implementação de plug-in de acessibilidade para tamanho de fonte e alto contraste. Vamos conversar sobre essa também.

[emillecatarine]

@RaniGub @juscoton adicionei print com as sugestões. Ju, confere se é isso mesmo? Fiquei confusa em relação às cores roxo (web) e azul (mobile). Qual a razão dessas cores?

[RaniGub]

@juscoton

[juscoton]

@RaniGub vi que a estrutura já foi alterada. sugeri as cores que geralmente são utilizadas, não são obrigatórias. As que foram utilizadas entendi que seguem o design System, mas achei que elas dão pouco contraste (pensando em quem tem baixa visão ou daltonismo)

[RaniGub]

Simulação para Protanopia

Simulação para deuteranopia

Gente, modifiquei a descrição dessa issue e acrescentei o print do que estamos sugerindo. O contraste das letras verde e vermelho estão muito ruins no checklist de critérios de senha, precisamos fazer um estudo do que fica melhor, podemos ver o que se aproxima do verde e vermelho na paleta de cores sugerida no Figma e saber seu contraste. Depois substituimos o print da issue com a sugestão completa @emillecatarine você pode fazer isso?

[emillecatarine]

@RaniGub Fiz o estudo das cores utilizando o adobe color. Quanto mais eu me aproximava de um contraste interessante entre as cores para deuteranopia e protanopia, mais eu me afastava de um contraste interessante da cor em relação ao fundo branco para visões típicas. Por termos apenas 5% da população daltônica (e nem todos se enquadram nos tipos de daltonismo que é nosso maior problema na aplicação dessas cores em específico) e por ter apoio dos ícones em todas as mensagens de sucesso/erro, optei por seguir com uma paleta com contaste mais adequado à 95% da população. O resultado final, então, tem um contraste pior do que o anterior para os tipos de daltonismo citado. Tem um contraste melhor, porém, para visões típicas.

[RaniGub]

@RaniGub Fiz o estudo das cores utilizando o adobe color. Quanto mais eu me aproximava de um contraste interessante entre as cores para deuteranopia e protanopia, mais eu me afastava de um contraste interessante da cor em relação ao fundo branco para visões típicas. Por termos apenas 5% da população daltônica (e nem todos se enquadram nos tipos de daltonismo que é nosso maior problema na aplicação dessas cores em específico) e por ter apoio dos ícones em todas as mensagens de sucesso/erro, optei por seguir com uma paleta com contaste mais adequado à 95% da população. O resultado final, então, tem um contraste pior do que o anterior para os tipos de daltonismo citado. Tem um contraste melhor, porém, para visões típicas.

Oi @emillecatarine entendi, então a sugestão é manter o escopo, correto?