Wikipédia:Padrão visual

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"