Wikipedia

Utente:Daimona Eaytoy/Palette

< Utente:Daimona Eaytoy

Nota 1: i nomi proposti sono, appunto, proposte (come il resto della pagina). Al momento di implementarli andrebbe aggiunto un prefisso locale, ad es. --itwiki-.

Nota 2: il fatto di non includere il colore (blu, giallo, verde etc.) nel nome della variabile è intenzionale. Questo perché: 1) il contenuto deve essere scritto in modo che cambiando il colore rimanga tutto valido; 2) può sempre capitare che si decida di modificare la definizione di una variabile; 3) il colore non è garantito (ad esempio col tema scuro). Ciò non toglie che possano esserci modi migliori di distinguere i colori che non 1, 2, 3...

Nota 3: per gli sfondi generici, vengono proposte due varianti: una per i casi in cui è garantito che il contenuto sia testo semplice (no link, note etc.), e una per un utilizzo generico in cui non è possibile escludere a priori che il testo contenga dei link (oppure se è già noto che li conterrà). Per i primi, bisognerebbe trovare un modo per garantire l'effettiva assenza di link, e non è chiaro come farlo in maniera comoda.

Nota 4: gli sfondi semantici vanno utilizzati esclusivamente laddove il contenuto abbia la connotazione descritta dal token. Non vanno invece utilizzati per motivi puramente estetici.

Vedere anche en:Template:Table cell templates e en:Wikipedia:Manual of Style/Accessibility/Colors.

Per l'implementazione in CSS, vedere Utente:Daimona Eaytoy/Palette/CSS.

Token modifica

Nome Descrizione ed esempi Vector et al Minerva Night mode Commenti Rapporti contrasto
Sfondi generici (tema scuro WIP)
sfondo-base Colore di sfondo base per i template (analogamente al bianco che è lo sfondo predefinito per il testo della voce col tema chiaro).

Esempio: sfondo delle celle coi valori negli infobox.
#f8f9fa
#f8f9fa
#202122
 Usa il token Codex background-color-interactive-subtle, equivalente allo status quo, con fallback identico.
  • ✅ Testo vector: 15.3
  • ✅ Link old vector: 8.09
  • ✅ Link vector22: 5.09
  • ✅ Link rosso old vector: 6.45
  • ✅ Link rosso vector22: 4.52
  • ✅ Testo minerva: 15.3
  • ✅ Link minerva: 5.09
  • ✅ Link rosso minerva: 4.52
  • ✅ Testo dark mode: 15.3
  • ✅ Link dark mode: 5.04
  • ✅ Link rosso dark mode: 4.62
sfondo-intestazione Colore di sfondo per le intestazioni dei template.

Esempio: sfondo delle celle coi nomi negli infobox (ma non col tema scuro).
#f3f3f3
#eaecf0
#27292d
 Usa il token Codex background-color-interactive, equivalente allo status quo nelle skin responsive, ma fallback diverso dal valore della variabile per preservare lo status quo nelle altre skin. Valutare se uniformare vector alla versione mobile
  • ✅ Testo vector: 14.53
  • ✅ Link old vector: 7.69
  • ✅ Link vector22: 4.84
  • ✅ Link rosso old vector: 6.13
  • ❌ Link rosso vector22: 4.29
  • ✅ Testo minerva: 13.64
  • ✅ Link minerva: 4.54
  • ❌ Link rosso minerva: 4.03
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-1 Colore di sfondo per le testate dei template, variante 1 (grigio).

Esempio: testata dei navbox, o sezioni negli infobox. Colore di default per la testata degli infobox.
#ededed
#ededed
#202122
  • ✅ Testo vector: 13.78
  • ✅ Link old vector: 7.28
  • ✅ Link vector22: 4.58
  • ✅ Link rosso old vector: 5.81
  • ❌ Link rosso vector22: 4.07
  • ✅ Testo minerva: 13.78
  • ✅ Link minerva: 4.58
  • ❌ Link rosso minerva: 4.07
  • ✅ Testo dark mode: 15.3
  • ✅ Link dark mode: 5.04
  • ✅ Link rosso dark mode: 4.62
sfondo-testata-2 Colore di sfondo per le testate dei template, variante 2 (blu).

Esempio: testata dei navbox, o sezioni negli infobox.
#C5F3FD
#C5F3FD
#27292d
  • ✅ Testo vector: 13.53
  • ✅ Link old vector: 7.15
  • ✅ Link vector22: 4.5
  • ✅ Link rosso old vector: 5.7
  • ❌ Link rosso vector22: 3.99
  • ✅ Testo minerva: 13.53
  • ✅ Link minerva: 4.5
  • ❌ Link rosso minerva: 3.99
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-3 Colore di sfondo per le testate dei template, variante 3 (ciano).

Esempio: testata dei navbox, o sezioni negli infobox.
#7DFFFF
#7DFFFF
#27292d
  • ✅ Testo vector: 13.53
  • ✅ Link old vector: 7.16
  • ✅ Link vector22: 4.5
  • ✅ Link rosso old vector: 5.71
  • ❌ Link rosso vector22: 3.99
  • ✅ Testo minerva: 13.53
  • ✅ Link minerva: 4.5
  • ❌ Link rosso minerva: 3.99
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-4 Colore di sfondo per le testate dei template, variante 4 (verde).

Esempio: testata dei navbox, o sezioni negli infobox.
#AEFEB1
#AEFEB1
#27292d
 In alternativa:
#ABFFAB
  • ✅ Testo vector: 13.53
  • ✅ Link old vector: 7.15
  • ✅ Link vector22: 4.5
  • ✅ Link rosso old vector: 5.7
  • ❌ Link rosso vector22: 3.99
  • ✅ Testo minerva: 13.53
  • ✅ Link minerva: 4.5
  • ❌ Link rosso minerva: 3.99
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-5 Colore di sfondo per le testate dei template, variante 5 (giallo).

Esempio: testata dei navbox, o sezioni negli infobox.
#FFFF80
#FFFF80
#27292d
 In alternativa:
#F3F300
  • ✅ Testo vector: 15.26
  • ✅ Link old vector: 8.07
  • ✅ Link vector22: 5.08
  • ✅ Link rosso old vector: 6.43
  • ✅ Link rosso vector22: 4.5
  • ✅ Testo minerva: 15.26
  • ✅ Link minerva: 5.08
  • ✅ Link rosso minerva: 4.5
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-6 Colore di sfondo per le testate dei template, variante 6 (arancione).

Esempio: testata dei navbox, o sezioni negli infobox.
#FFE8D0
#FFE8D0
#27292d
  • ✅ Testo vector: 13.6
  • ✅ Link old vector: 7.19
  • ✅ Link vector22: 4.52
  • ✅ Link rosso old vector: 5.73
  • ❌ Link rosso vector22: 4.01
  • ✅ Testo minerva: 13.6
  • ✅ Link minerva: 4.52
  • ❌ Link rosso minerva: 4.01
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-7 Colore di sfondo per le testate dei template, variante 7 (rosso).

Esempio: testata dei navbox, o sezioni negli infobox.
#FFE6E6
#FFE6E6
#27292d
  • ✅ Testo vector: 13.6
  • ✅ Link old vector: 7.19
  • ✅ Link vector22: 4.53
  • ✅ Link rosso old vector: 5.74
  • ❌ Link rosso vector22: 4.02
  • ✅ Testo minerva: 13.6
  • ✅ Link minerva: 4.53
  • ❌ Link rosso minerva: 4.02
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-8 Colore di sfondo per le testate dei template, variante 8 (lavanda).

Esempio: testata dei navbox, o sezioni negli infobox.
#EAEAFF
#EAEAFF
#27292d
  • ✅ Testo vector: 13.6
  • ✅ Link old vector: 7.19
  • ✅ Link vector22: 4.53
  • ✅ Link rosso old vector: 5.74
  • ❌ Link rosso vector22: 4.02
  • ✅ Testo minerva: 13.6
  • ✅ Link minerva: 4.53
  • ❌ Link rosso minerva: 4.02
  • ✅ Testo dark mode: 13.82
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
sfondo-testata-testo-1 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 1 (grigio).

Esempio: testata dei navbox, o sezioni negli infobox. Colore di default per la testata degli infobox.
#dedede
#dedede
#202122
  • ✅ Testo vector: 11.99
  • ✅ Testo minerva: 11.99
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-2 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 2 (blu).

Esempio: testata dei navbox, o sezioni negli infobox.
#9cf
#9cf
#202122
  • ✅ Testo vector: 9.55
  • ✅ Testo minerva: 9.55
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-3 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 3 (arancione).

Esempio: testata dei navbox, o sezioni negli infobox.
#ffc04c
#ffc04c
#202122
  • ✅ Testo vector: 9.9
  • ✅ Testo minerva: 9.9
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-4 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 4 (verde).

Esempio: testata dei navbox, o sezioni negli infobox.
#90ee90
#90ee90
#202122
  • ✅ Testo vector: 11.38
  • ✅ Testo minerva: 11.38
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-5 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 5 (rosso).

Esempio: testata dei navbox, o sezioni negli infobox.
#FF8888
#FF8888
#202122
  • ✅ Testo vector: 7.01
  • ✅ Testo minerva: 7.01
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-6 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 6 (rosa).

Esempio: testata dei navbox, o sezioni negli infobox.
#FFAACC
#FFAACC
#202122
  • ✅ Testo vector: 9.12
  • ✅ Testo minerva: 9.12
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-7 Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 7 (viola).

Esempio: testata dei navbox, o sezioni negli infobox.
#A2A2FF
#A2A2FF
#202122
  • ✅ Testo vector: 7.03
  • ✅ Testo minerva: 7.03
  • ✅ Testo dark mode: 15.3
sfondo-testata-testo-invertito-1 Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 1 (blu).

Esempio: testata dei navbox, o sezioni negli infobox.
Testo
#000080
Testo
#000080
#202122
 In alternativa:
Testo
#3300CC
 ✅ Contrasto: 16.01
sfondo-testata-testo-invertito-2 Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 2 (rosso).

Esempio: testata dei navbox, o sezioni negli infobox.
Testo
#B20045
Testo
#B20045
#202122
 In alternativa:
Testo
#c02050
 ✅ Contrasto: 7.05
sfondo-testata-testo-invertito-3 Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 3 (verde).

Esempio: testata dei navbox, o sezioni negli infobox.
Testo
#006400
Testo
#006400
#202122
 ✅ Contrasto: 7.44
sfondo-testata-testo-invertito-4 Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 4 (marrone).

Esempio: testata dei navbox, o sezioni negli infobox.
Testo
#8B4513
Testo
#8B4513
#202122
 ✅ Contrasto: 7.1
sfondo-alternanza-1 Colore di sfondo da usare per elementi sequenziali con due sfondi in alternanza, colore 1.

Esempio: Tabelle complesse quando si passa col mouse sulle celle (ad esempio nelle pagine speciali come Special:AbuseFilter, o il Template:Row hover highlight su enwiki). Righe pari/dispari nei navbox. {{Incontro di club}}.
#FFF
#FFF
#101418
 Stile nativo per mw-datatable mediante token Codex.
  • ✅ Testo vector: 16.13
  • ✅ Link old vector: 8.53
  • ✅ Link vector22: 5.37
  • ✅ Link rosso old vector: 6.8
  • ✅ Link rosso vector22: 4.76
  • ✅ Testo minerva: 16.13
  • ✅ Link minerva: 5.37
  • ✅ Link rosso minerva: 4.76
  • ✅ Testo dark mode: 17.55
  • ✅ Link dark mode: 5.79
  • ✅ Link rosso dark mode: 5.29
sfondo-alternanza-2 Colore di sfondo da usare per elementi sequenziali con due sfondi in alternanza, colore 2.

Esempio: Tabelle complesse quando si passa col mouse sulle celle (ad esempio nelle pagine speciali come Special:AbuseFilter, o il Template:Row hover highlight su enwiki). Righe pari/dispari nei navbox. {{Incontro di club}}.
#eaf3ff
#eaf3ff
#1c2940
 Stile nativo per mw-datatable mediante token Codex.
  • ✅ Testo vector: 14.41
  • ✅ Link old vector: 7.62
  • ✅ Link vector22: 4.79
  • ✅ Link rosso old vector: 6.08
  • ❌ Link rosso vector22: 4.25
  • ✅ Testo minerva: 14.41
  • ✅ Link minerva: 4.79
  • ❌ Link rosso minerva: 4.25
  • ✅ Testo dark mode: 13.83
  • ✅ Link dark mode: 4.56
  • ❌ Link rosso dark mode: 4.17
Sfondi semantici (molto WIP, soprattutto night mode; limitarsi allo stretto indispensabile)
sfondo-semantico-oro Colore di sfondo per gli ori nelle competizioni.

Esempio: {{MedaglieOro}}.
gold
  • ✅ Testo vector: 11.5
  • ✅ Link old vector: 6.08
  • ❌ Link vector22: 3.83
  • ✅ Link rosso old vector: 4.85
  • ❌ Link rosso vector22: 3.39
  • ✅ Testo minerva: 11.5
  • ❌ Link minerva: 3.83
  • ❌ Link rosso minerva: 3.39
  • ❌ Testo dark mode: 1.33
  • ❌ Link dark mode: 2.28
  • ❌ Link rosso dark mode: 2.49
sfondo-semantico-argento Colore di sfondo per gli argenti nelle competizioni.

Esempio: {{MedaglieArgento}}.
silver
  • ✅ Testo vector: 8.86
  • ✅ Link old vector: 4.69
  • ❌ Link vector22: 2.95
  • ❌ Link rosso old vector: 3.74
  • ❌ Link rosso vector22: 2.62
  • ✅ Testo minerva: 8.86
  • ❌ Link minerva: 2.95
  • ❌ Link rosso minerva: 2.62
  • ❌ Testo dark mode: 1.73
  • ❌ Link dark mode: 1.76
  • ❌ Link rosso dark mode: 1.92
sfondo-semantico-bronzo Colore di sfondo per i bronzi nelle competizioni.

Esempio: {{MedaglieBronzo}}.
#CD7F32
  • ✅ Testo vector: 5.13
  • ❌ Link old vector: 2.71
  • ❌ Link vector22: 1.71
  • ❌ Link rosso old vector: 2.16
  • ❌ Link rosso vector22: 1.51
  • ✅ Testo minerva: 5.13
  • ❌ Link minerva: 1.71
  • ❌ Link rosso minerva: 1.51
  • ❌ Testo dark mode: 2.98
  • ❌ Link dark mode: 1.02
  • ❌ Link rosso dark mode: 1.11
sfondo-semantico-risultato-positivo Colore di sfondo per risultati positivi.

Esempio: vittoria di una competizione.
#CFC
  • ✅ Testo vector: 14.4
  • ✅ Link old vector: 7.61
  • ✅ Link vector22: 4.79
  • ✅ Link rosso old vector: 6.07
  • ❌ Link rosso vector22: 4.25
  • ✅ Testo minerva: 14.4
  • ✅ Link minerva: 4.79
  • ❌ Link rosso minerva: 4.25
  • ❌ Testo dark mode: 1.06
  • ❌ Link dark mode: 2.85
  • ❌ Link rosso dark mode: 3.12
sfondo-semantico-risultato-neutro Colore di sfondo per risultati neutri.

Esempio: pareggio in una gara.
#FFC
  • ✅ Testo vector: 15.69
  • ✅ Link old vector: 8.3
  • ✅ Link vector22: 5.22
  • ✅ Link rosso old vector: 6.62
  • ✅ Link rosso vector22: 4.63
  • ✅ Testo minerva: 15.69
  • ✅ Link minerva: 5.22
  • ✅ Link rosso minerva: 4.63
  • ❌ Testo dark mode: 1.03
  • ❌ Link dark mode: 3.11
  • ❌ Link rosso dark mode: 3.4
sfondo-semantico-risultato-negativo Colore di sfondo per risultati negativi.

Esempio: sconfitta in una gara.
#FFE3E3
  • ✅ Testo vector: 13.32
  • ✅ Link old vector: 7.05
  • ❌ Link vector22: 4.43
  • ✅ Link rosso old vector: 5.62
  • ❌ Link rosso vector22: 3.93
  • ✅ Testo minerva: 13.32
  • ❌ Link minerva: 4.43
  • ❌ Link rosso minerva: 3.93
  • ❌ Testo dark mode: 1.15
  • ❌ Link dark mode: 2.64
  • ❌ Link rosso dark mode: 2.89
sfondo-semantico-sconosciuto Colore di sfondo per informazioni sconosciute o non disponibili.

Esempio: ???
#EEE
  • ✅ Testo vector: 13.9
  • ✅ Link old vector: 7.35
  • ✅ Link vector22: 4.63
  • ✅ Link rosso old vector: 5.86
  • ❌ Link rosso vector22: 4.1
  • ✅ Testo minerva: 13.9
  • ✅ Link minerva: 4.63
  • ❌ Link rosso minerva: 4.1
  • ❌ Testo dark mode: 1.1
  • ❌ Link dark mode: 2.76
  • ❌ Link rosso dark mode: 3.01
Bordi
bordo-base Stile del bordo di base per i template.

Esempio: bordo degli infobox.
#c8ccd1
#eaecf0
#404244
 Usa il token Codex border-color-muted per il colore, equivalente allo status quo nelle skin responsive, ma fallback diverso dal valore della variabile per preservare lo status quo nelle altre skin. Valutare se uniformare vector alla versione mobile.


Esempi

Esempi presi da un campione di voci in vetrina.

{{Cassetto

Testo nero modifica

  •  #F0EEFF  (occhielli portali)
  •  #DDEEFF  (Sportivo/Sport)
  •  #C5F3FD  (infobox film)
  •  #AAD0FF  (calciatore in rosa)
  •  #9cf  (navbox)
  •  #ABCDEF  (sportivo)
  •  #ccf  (navbox)
  •  #ddccff  (fumetto e animazione 1)
  •  #C3D0DF  (approfondimento)
  •  #FFD700  (infobox)
  •  #ffc04c  (fumetto e animazione 2)
  •  #ADA  (infobox)
  •  lightgreen  (gioco)
  •  #ffc0cb  (navbox)

Testo vario modifica

  •  #69a0f3 + white  (fumetto e animazione 3)
  •  navy + white  (malattia)
  •  #117a0d + white  (navbox)
  •  #B20045 + white  (monarca)
  •  #B20000 + #FFA257  (Magistrato romano)
  •  #ffeaea + #444444  (chiarimento)
  •   rgba(179, 36, 36, 0.21) + white   (chiarimento dark mode)

Selettori modifica

{{libro/selettore colori}}

per ragazzi
giallo
rosa
erotico
orrore
thriller
fantascienza
fantasy
umoristico
storico
avventura
biografia
default

{{Hall of Fame/selettore colori}}

Sport (qualsiasi)#A5E7C4
Cinema#F6F04F
Musica#ACE5F3
Televisione#FFC1A3
Arti varie#D5E1E5
Persone#F4C3C8

{{Divisione amministrativa/Colore}}

1
2
3
4
5
Altro

{{Personaggio/selettore colori}}

anime e manga
animazione
cinema
fumetti
giochi
Internet
letteratura
mitologia e epica
teatro
televisione
videogiochi
predefinito o non specificato

{{Album/selettore colori}}

Studio, "Studio, live"verde
Livesalmone
Raccolta, Compilation, Mixtapeambra
Remix, Covervioletto
Colonna sonoralavanda
Singolo, EP, EP live, Democeleste-blu
Video, Video live, Video compilation, Video compilation livefrumento

{{Artista musicale/selettore colori}}

Nessuna indicazione#DDDDDD
Gruppo#ABCDEF
Cantautore#F0CF30
Cantautrice#F0CF30
Cantante#F0CF30
Cantante lirico#F0CF30
Orchestra#9DFAAA
Strumentista#EFEF78
Deejay#FFAACC
Sound system#FFAACC
Beatmaker#FFAACC

{{Strada/selettore colori}} ne ha un sacco. Vedere anche {{Santo/Selettore colori}}.


Esperimenti

  • ✅ Testo vector: 11.5
  • ✅ Link old vector: 6.08
  • ❌ Link vector22: 3.83
  • ✅ Link rosso old vector: 4.85
  • ❌ Link rosso vector22: 3.39
  • ✅ Testo minerva: 11.5
  • ❌ Link minerva: 3.83
  • ❌ Link rosso minerva: 3.39
  • ✅ Testo dark mode: 19.92
  • ✅ Link dark mode: 6.57
  • ✅ Link rosso dark mode: 6.01
  • ✅ Testo vector: 15.26
  • ✅ Link old vector: 8.07
  • ✅ Link vector22: 5.08
  • ✅ Link rosso old vector: 6.43
  • ✅ Link rosso vector22: 4.5
  • ✅ Testo minerva: 15.26
  • ✅ Link minerva: 5.08
  • ✅ Link rosso minerva: 4.5
  • ✅ Testo dark mode: 19.92
  • ✅ Link dark mode: 6.57
  • ✅ Link rosso dark mode: 6.01
  • ✅ Testo vector: 13.28
  • ✅ Link old vector: 7.02
  • ❌ Link vector22: 4.42
  • ✅ Link rosso old vector: 5.6
  • ❌ Link rosso vector22: 3.92
  • ✅ Testo minerva: 13.28
  • ❌ Link minerva: 4.42
  • ❌ Link rosso minerva: 3.92
  • ✅ Testo dark mode: 19.92
  • ✅ Link dark mode: 6.57
  • ✅ Link rosso dark mode: 6.01
  • ✅ Testo vector: 13.53
  • ✅ Link old vector: 7.15
  • ✅ Link vector22: 4.5
  • ✅ Link rosso old vector: 5.7
  • ❌ Link rosso vector22: 3.99
  • ✅ Testo minerva: 13.53
  • ✅ Link minerva: 4.5
  • ❌ Link rosso minerva: 3.99
  • ✅ Testo dark mode: 19.92
  • ✅ Link dark mode: 6.57
  • ✅ Link rosso dark mode: 6.01
Estratto da "https://it.wikipedia.org/w/index.php?title=Utente:Daimona_Eaytoy/Palette&oldid=139316177"