Usuário:Danilo.mac/Padrão visual

Origem: Wikipédia, a enciclopédia livre.
Saltar para a navegação Saltar para a pesquisa

Esta é uma proposta de padrão visual para a Wikipédia. Se aprovada, esta proposta será válida somente para predefinições e tabelas criadas ou modificadas após a aprovação desta proposta. A adoção desses critérios em predefinições e tabelas anteriores a esta proposta deverão ser discutidas individualmente em suas páginas de discussões ou em grupo em uma proposta separada.

Cores[editar | editar código-fonte]

As cores usadas em predefinições e tabelas deve estar entre as cores da tabela de cores abaixo.

As cores são baseadas nos padrões de acessibilidade da WCAG, usando o nível AAA de contraste e o padrão de diferença entre cores. As cores foram geradas com ajuda de um algorítimo baseados nas fórmulas de contraste, de forma que sejam as cores mais vivas que passam nesses padrões, evitando assim um padrão de cores acinzentadas.

As cores escuras devem ser usadas com texto branco e as claras com texto preto. As cores escuras podem ser usadas como cor de texto se forem usadas com fundo branco.

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

As cores das bordas também devem seguir o padrão de cores acima.

Estilos em predefinições[editar | editar código-fonte]

Picto infobox map.png
Título (#0057AF)
Tópico1 (#93C9FF)
Rótulo1 (#C9E4FF) Dados1
Rótulo2 (#C9E4FF) Dados2
Picto infobox map.png
Título (#93C9FF)
Tópico1 (#C9E4FF)
Rótulo1 (#E4F2FF) Dados1
Rótulo2 (#E4F2FF) Dados2
Picto infobox map.png
Título (#C9E4FF)
Tópico1 (#E4F2FF)
Rótulo1 Dados1
Rótulo2 Dados2

As predefinições devem ter estilos padronizados, não poderão existir parâmetros que inserem estilos CSS ou classes de estilo diretamente na predefinição (por exemplo |título-estilo = background-color: red) nem que inserem estilos específicos (por exemplo |largura = 230px). A única exceção é a cor, que deve ser informada em somente um parâmetro nas predefinições que permitirem mudança de cor, se a predefinição usar mais de uma cor, as cores secundárias devem ser calculadas pela própria predefinição/módulo mantendo a mesma matiz, como nos exemplos ao lado e abaixo.

Título (#BFBFFF)
acima (#DFDFFF)
grupo1 (#DFDFFF) lista1
grupo2 (#DFDFFF) lista2
grupo3 (#DFDFFF) lista3
abaixo (#DFDFFF)

Layout de colunas[editar | 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%"
Div 3
Div 4
style="clear: both"