Wikipédia:Esplanada/propostas/Padrão visual (31mai2018)
 |
Padrão visual (31mai2018)
Isso já foi discutido algumas vezes como podem ver nos tópicos listados acima, mas não chegamos a um consenso para padronizar o uso das cores e estilos nas predefinições e tabelas usadas nos artigos. A padronização é importante por vários motivos:
- Com um padrão visual, é mais fácil construir novas predefinições e fazer a manutenção das já existentes.
- Muitos dos leitores da Wikipédia tem dificuldade visual, e quando usamos combinações de cores com pouco contraste estamos criando dificuldade de leitura para essas pessoas. Como a missão da Wikipédia é levar conhecimento a todos as pessoas, nós temos que nos preocupar com essa acessibilidade.
- O entendimento das informações é facilitado quando mantemos uma consistência visual.
- Evitamos problemas de visualização das páginas em dispositivos móveis.
Li os tópicos antigos sobre esse assunto e percebi que algumas das resistência a padronização estão relacionadas a restrição na liberdade no uso de cores, a dificuldade de ficar testando o contraste das cores, e ao fato das cores da tabela em Ajuda:Usando cores serem muito acinzentadas. Então desenvolvi um algorítimo baseado nas formulas de contraste da WCAG para gerar as cores mais vivas possíveis dentro dos padrões de acessibilidade, e fui fazendo alguns ajustes até chegar a tabela de cores abaixo.
| cor de fundo escura |
taxa de contraste 7, nível AAA |
diferença de cor |
cor de fundo clara |
taxa de contraste 12, nível AAA |
diferença de cor |
1/2 da cor de fundo clara |
1/4 da cor de fundo clara |
1/10 da cor de fundo clara |
|---|---|---|---|---|---|---|---|---|
| #B60000 | 7.03 | 583 | #FFAFAF | 12.00 | 605 | #FFD7D7 | #FFEBEB | #FFF7F7 |
| #B00058 | 7.03 | 501 | #FFABD5 | 12.04 | 639 | #FFD5EA | #FFEAF5 | #FFF7FB |
| #840084 | 9.07 | 501 | #FFA4FF | 12.01 | 674 | #FFD2FF | #FFE9FF | #FFF6FF |
| #5800B1 | 10.24 | 500 | #DAB5FF | 12.03 | 654 | #EDDAFF | #F6EDFF | #FCF8FF |
| #2020C9 | 9.95 | 500 | #BFBFFF | 12.11 | 637 | #DFDFFF | #EFEFFF | #F9F9FF |
| #0057AF | 7.04 | 503 | #93C9FF | 12.04 | 603 | #C9E4FF | #E4F2FF | #F5FAFF |
| #00626F | 7.05 | 556 | #11E4FF | 13.57 | 500 | #88F2FF | #C4F9FF | #E8FDFF |
| #00654E | 7.07 | 586 | #27FFCF | 16.29 | 501 | #93FFE7 | #C9FFF3 | #EAFFFB |
| #006800 | 7.05 | 661 | #7BFF7B | 16.43 | 501 | #BDFFBD | #DEFFDE | #F2FFF2 |
| #4A6000 | 7.08 | 595 | #CFFF27 | 17.99 | 501 | #E7FF93 | #F3FFC9 | #FBFFEA |
| #655900 | 7.04 | 575 | #FFE411 | 16.36 | 500 | #FFF288 | #FFF9C4 | #FFFDE8 |
| #8C4600 | 7.02 | 555 | #FFB56B | 12.07 | 543 | #FFDAB5 | #FFEDDA | #FFF8F1 |
| #585858 | 7.11 | 501 | #C7C7C7 | 12.42 | 597 | #E3E3E3 | #F1F1F1 | #FAFAFA |
Fiz este teste usando essas cores em infoboxes e navboxes, percebam que cada caixa usa somente cores da mesma matiz, e o texto é sempre preto. Essas cores são próximas às cores usadas em muitas infoboxes, então se estabelecermos essas cores como padrão teremos uma garantia da taxa de contraste usando cores próximas às que já vêm sendo usadas.
A proposta é a seguinte:
- Os critérios a seguir são validos para as predefinições, tabelas e páginas criadas ou que tiverem uma alteração significativa após a aprovação desta proposta.
- Só podem ser usadas as cores da tabela de cores acima.
- As cores escuras devem ser usadas com texto branco e as claras com texto preto. As cores escuras podem ser usadas como cor do texto se forem usadas com fundo branco.
- As predefinições devem ter estilos padronizados, não poderão existir parâmetros que insiram estilos CSS ou classes de estilo diretamente na predefinição (por exemplo
|título-estilo = background-color: red) nem que insiram estilos específicos (por exemplo|largura = 230px). A única exceção é a cor, que deve ser informada em somente um parâmetro. Se a predefinição usar mais de uma cor, as cores secundárias devem ser calculadas pela própria predefinição mantendo a mesma matiz. - Quando uma página divide o layout em duas ou mais colunas, as colunas devem ser geradas com tags <div>, e não com tabelas.
A questão da tag <div> é para não prejudicar a visualização em dispositivos móveis. Como esse padrão só será válido para novas predefinições e predefinições que tiverem alteração significativa, essa proposta não trará uma mudança imediata, o que evita mudanças bruscas em predefinições que já estabeleceram seus próprios padrões, mas vai servir para que o que for criado daqui em diante seja padronizado. E vai servir como referência em possíveis padronizações em predefinições antigas. Danilo.mac(discussão) 02h29min de 1 de junho de 2018 (UTC)
Concordo. Helder 11h10min de 1 de junho de 2018 (UTC)- Concordo. Mas as predefinições que não usam essas cores, deverão ser mudadas imediatamente? Mr. Fulano! Fale 14h11min de 1 de junho de 2018 (UTC)
- Não, somente as novas predefinições e predefinições que passarem por uma grande alteração. As demais podem até ser alteradas para seguirem esse padrão, mas não é obrigatório. Algumas predefinições têm padrões de cores usados há muito tempo como na Info/taxonomia e na Info/Língua, em alguns casos essas alterações podem ser controversas, então é melhor deixar a padronização das predefinições antigas ir acontecendo aos poucos, sem obrigatoriedades. Danilo.mac(discussão) 15h20min de 1 de junho de 2018 (UTC)
- Concordo, é uma boa proposta. - JACKGBA ✉ 16h56min de 1 de junho de 2018 (UTC)
- Concordo a princípio, mas tenho uma dúvida sobre "As cores escuras devem ser usadas com texto branco e as claras com texto preto. As cores escuras podem ser usadas como cor do texto se forem usadas com fundo branco." e em relação aos links? Existem tabelas onde o problema é exatamente os links: Predefinição:Linha do tempo de compositores Românticos, Infocaixas também têm links e etc. No exemplo acima apenas os fundos dos títulos aparecem coloridos, mas também nos títulos podem haver links, não? --Felipe da Fonseca (discussão) 17h46min de 1 de junho de 2018 (UTC)
- Sim, pode ter links no texto preto. Os critérios da WCAG exige taxa de contraste 4.5 para o nível AA e 7 para o nível AAA, nas cores claras eu estabeleci a taxa mínima de contraste de 12 com texto preto para garantir um nível de contraste acima dos padrões nessas cores, isso faz com que os links, que têm cor #0645AD, fiquem assim com o fundo azul #93C9FF, o que é equivalente a taxa de contraste 4.89, nível AA, então está dentro do padrão mínimo de acessibilidade. Mas de fato é melhor usar uma cor mais clara quando possível para garantir o nível AAA de acessibilidade com os links. Danilo.mac(discussão) 18h40min de 1 de junho de 2018 (UTC)
- Bom trabalho. --Felipe da Fonseca (discussão) 18h49min de 1 de junho de 2018 (UTC)
- Sim, pode ter links no texto preto. Os critérios da WCAG exige taxa de contraste 4.5 para o nível AA e 7 para o nível AAA, nas cores claras eu estabeleci a taxa mínima de contraste de 12 com texto preto para garantir um nível de contraste acima dos padrões nessas cores, isso faz com que os links, que têm cor #0645AD, fiquem assim com o fundo azul #93C9FF, o que é equivalente a taxa de contraste 4.89, nível AA, então está dentro do padrão mínimo de acessibilidade. Mas de fato é melhor usar uma cor mais clara quando possível para garantir o nível AAA de acessibilidade com os links. Danilo.mac(discussão) 18h40min de 1 de junho de 2018 (UTC)
Concordo. Excelente proposta. Leefeniaures audiendi audiat 08h09min de 5 de junho de 2018 (UTC)
Concordo. Bom trabalho. --Stegop (discussão) 10h44min de 5 de junho de 2018 (UTC)
Concordo Por mim, poderia acabar de vez com qualquer variação de cor em infocaixas. Mas, por hora, vai bem… Att --Usien6 13h53min de 5 de junho de 2018 (UTC)
Concordo a proposta. Se a ideia é regulamentar o padrão das novas predefinições e tabelas com uso de cores, melhorando a acessibilidade, não vejo porquê ser contra. Isso até estimula que futuras predefinições tenham uma padronização e resolva os problemas que encontramos nos artigos. WikiFer msg 18h24min de 5 de junho de 2018 (UTC)
O consenso foi obtido. Coloquei as regras em Wikipédia:Padrão visual. Danilo.mac(discussão) 19h53min de 13 de junho de 2018 (UTC)