Wikipédia:Padrão visual
Aspeto
![]() | Esta página documenta uma política da Wikipédia lusófona. Ela descreve uma norma que todos os editores devem seguir. Quaisquer alterações devem ser consensuais. |
Uma boa organização das informações nos artigos depende de uma padronização na forma como a informação é apresentada. A padronização referente a diagramação do texto é apresentada no Livro de estilo, e a padronização referente às cores, estilos CSS e tags HTML é apresentada nesta página. 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 todas 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.
Regras
[editar código-fonte]- Os critérios a seguir são válidos para as predefinições, tabelas e páginas criadas ou que tiverem uma alteração significativa após o dia 13 de junho de 2018, quando esta política foi aprovada.
- Só podem ser usadas as cores da tabela de cores abaixo.
- As cores escuras devem ser usadas com texto branco e as claras com texto preto (os links não precisam ser pretos). 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. Isso evita problemas de visualização em dispositivos móveis.
Cores
[editar código-fonte]As tabela de cores a seguir devem ser usadas de acordo com as regras acima. Todas as cores estão dentro dos padrões de acessibilidade definidos pela WCAG.
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 |
Layout de colunas
[editar código-fonte]Quando uma página divide o layout em duas ou mais colunas, como na página principal e páginas de portais, as colunas devem ser geradas com tags div, e não com tabelas. Isso é importante para garantir uma boa visualização da página em dispositivos móveis.
Div 1
Div 2
style="float: left; width: 50%"
style="float: left; width: 50%"
Div 3
Div 4
style="clear: both"
style="clear: both"