Usuário:Danilo.mac/Padrão visual
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
editarAs 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 | |
|---|---|
| Tópico1 (#93C9FF) | |
| Rótulo1 (#C9E4FF) | Dados1 |
| Rótulo2 (#C9E4FF) | Dados2 |
| | |
|---|---|
| Tópico1 (#C9E4FF) | |
| Rótulo1 (#E4F2FF) | Dados1 |
| Rótulo2 (#E4F2FF) | Dados2 |
| | |
|---|---|
| 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
editarQuando 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.
style="float: left; width: 50%"
style="clear: both"