 | 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
- 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
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
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%"
Div 3
Div 4
style="clear: both"
