Template:Colore maggiore rapporto contrasto

Istruzioni per l'uso
Le istruzioni che seguono sono contenute nella sottopagina Template:Colore maggiore rapporto contrasto/man (modifica · cronologia)
Sandbox: Template:Colore maggiore rapporto contrasto/Sandbox (modifica · cronologia) · Tutte le sottopagine: lista

---

Questo template determina la coppia di colori con il rapporto di contrasto maggiore: colore1/colore2 o colore1/colore3. È utile per selezionare una coppia di colori di primo piano / sfondo. Per l'accessibilità, le linee guida WCAG 2.0 AA richiedono un rapporto di contrasto di 3 o superiore per un testo di grandi dimensioni e 4,5 o superiore per un testo di dimensioni normali.

Nella modalità predefinita, colore2 e colore3 sono bianco e nero e la coppia di colori selezionata avrà sempre un rapporto di contrasto maggiore di 4,58.

Parametri

Un parametro di colore può essere inserito per nome ("khaki") o in esatripletta con/senza prefisso # ("#F0E68C", "F0E68C")   

|1= (raccomandato): colore sfondo

|2= colore carattere primario. Opzionale, default = white (#FFFFFF)

|3= colore carattere secondario. Opzionale, default = black (#000000)

Il template restituisce il colore del carattere con il maggior contrasto

con sfondo   Khaki (#F0E68C): {{Colore maggiore rapporto contrasto|khaki|white|black}} → black

con sfondo   RoyalBlue (#4169E1): {{Colore maggiore rapporto contrasto|#4169E1|FFFFFF|000000}} → FFFFFF (=white)

testo CSS

• |css=y fa in modo che il template restituisca un testo pronto per il CSS:

  Khaki (#F0E68C): {{Colore maggiore rapporto contrasto|khaki|white|black|css=y}}

→ background-color:khaki; color:black;

Esempio 1,   Khaki (#F0E68C)

<span style="font-size:110%; {{Colore maggiore rapporto contrasto|khaki|white|black|css=y}}">Esempio di testo su sfondo khaki.</span>

→ <span style="font-size:110%; background-color:khaki; color:black;">Esempio di testo su sfondo khaki.</span>

→ Esempio di testo su sfondo khaki.

Esempio 2,   #4169E1 (RoyalBlue)

<span style="font-size:110%; {{Colore maggiore rapporto contrasto|#4169E1|#ffffff|#000000|css=y}}">Esempio di testo su sfondo #4169E1.</span>

→ <span style="font-size:110%; background-color:#4169E1; color:#ffffff;">Esempio di testo su sfondo #4169E1.</span>

→ Esempio di testo su sfondo #4169E1.

bias

• |bias=number: riduce il controllo di contrasto. Un bias di 1.25 riduce il minimo possibile a 4.0, che potrebbe non soddisfare gli standard di accessibilità.

Questo parametro deve essere utilizzato con cautela per garantire l'[[Wikipedia:Accessibilità del contenuto

|accessibilità]]. Come detto sopra, se usato senza bias e con colore2 e colore3 rispettivamente bianco e nero, la coppia di colori selezionata avrà sempre un rapporto di contrasto maggiore di 4,58.

Esempi d'uso

Navy

• <span style="background:navy; color:{{Colore maggiore rapporto contrasto|navy|white|black}}">Navy</span> → Navy
• <span style="{{Colore maggiore rapporto contrasto|navy|white|black|css=y}}">Navy</span> → Navy
• <span style="{{Colore maggiore rapporto contrasto|navy|css=y}}">Navy</span> → Navy

Red

• <span style="background:red; color:{{Colore maggiore rapporto contrasto|red|white|black}}">Red</span> → Red
• <span style="{{Colore maggiore rapporto contrasto|red|white|black|css=y}}">Red</span> → Red
• <span style="{{Colore maggiore rapporto contrasto|red|css=y}}">Red</span> → Red

White

• <span style="background:white; color:{{Colore maggiore rapporto contrasto|white|white|black}}">White</span> → White
• <span style="{{Colore maggiore rapporto contrasto|white|white|black|css=y}}">White</span> → White

Black

• <span style="background:black; color:{{Colore maggiore rapporto contrasto|black|white|black}}">Black</span> → Black
• <span style="{{Colore maggiore rapporto contrasto|black|white|black|css=y}}">Black</span> → Black

#005500

• <span style="background:#005500; color:{{Colore maggiore rapporto contrasto|#005500|#FFFFFF|#000000}}">#005500</span> → #005500
• <span style="{{Colore maggiore rapporto contrasto|#005500|#FFFFFF|#000000|css=y}}">#005500</span> → #005500
• <span style="background:#005500; color:#{{Colore maggiore rapporto contrasto|005500|FFFFFF|000000}}">005500</span> → 005500
• <span style="{{Colore maggiore rapporto contrasto|005500|FFFFFF|000000|css=y}}">005500</span> → 005500

CC5500

• <span style="background:#CC5500; color:#{{Colore maggiore rapporto contrasto|CC5500|FFFFFF|000000}}">CC5500</span> → CC5500
• <span style="{{Colore maggiore rapporto contrasto|CC5500|FFFFFF|000000|css=y}}">CC5500</span> → CC5500

CC5500, |bias=1

• <span style="background:#CC5500; color:#{{Colore maggiore rapporto contrasto|CC5500|FFFFFF|000000|bias=1}}">CC5500</span> → CC5500
• <span style="{{Colore maggiore rapporto contrasto|CC5500|FFFFFF|000000|bias=1|css=y}}">CC5500</span> → CC5500

error

• <span style="background:Not a color; color:#{{Colore maggiore rapporto contrasto|Not a color|FFFFFF|000000}}">Not a color</span> → Not a color
• <span style="{{Colore maggiore rapporto contrasto|Not a color|FFFFFF|000000|css=y}}">Not a color</span> → Not a color

(restituisce background-color:Not a color; color:;, senza un colore impostato; l'impostazione predefinita è nero su bianco.)

• <span style="{{Colore maggiore rapporto contrasto|Navy|Not a color|000000|css=y}}">Not a color</span> → Not a color

(restituisce background-color:Navy; color:;, senza un fontcolor impostato; il valore predefinito è nero. Il template non ha funzionato.)

Crea la tabella TemplateData!