Che cos’è Contrast Finder?

Contrast-Finder è uno strumento che calcola il contrasto tra due colori (sfondo, primo piano) e controlla se il contrasto è valido. Quando il contrasto non è valido, l’obiettivo principale è quello di suggerire alcuni contrasti di colori corretti.

Contrast-Finder è progettato per essere utilizzato da webdesigner, sviluppatori web o professionisti dell’accessibilità web per migliorare la leggibilità di pagine HTML e siti web.

Aiuto / Come utilizzare questo strumento?,

L’interfaccia Contrast-Finder è un modulo con cinque campi obbligatori.

• Colore del testo
• Colore di sfondo
• Rapporto minimo
• Colore da modificare
• Dammi

Colore del testo/Primo piano

Questo è il colore del testo. È possibile compilare questo campo con la parola chiave colore, un valore esadecimale o un valore RGB. Il valore di input viene quindi visualizzato in anteprima a destra del campo.

Parola chiave colore

Esempio:Black,Silver,YellowGreen,MediumPurple.,
I valori autorizzati sono quelli elencati nelle parole chiave CSS color (dal livello CSS 1 al livello CSS 4).

Colore con valori esadecimali

Esempio: #AABBCC. Si prega di notare che#ABC funziona anche, completiamo automaticamente il campo con#AABBCC. Puoi anche usare questo campo senza il carattere#, quindiFFF oFFFFFF funziona perfettamente.

Colore con valori RGB

Esempio:rgb(255,255,255).,
Puoi anche usare una sintassi breve come 255,255,255, che può essere interpretata come rgb(255,255,255).

Colore di sfondo

Questo è il colore dello sfondo.
Questo campo funziona proprio come il campo colore del testo.

Rapporto minimo

Tre possibili valori 3, 4.5 e 7.

Come scegliere un rapporto? Dipende dai seguenti elementi:

• Livello di accessibilità desiderato: AA o AAA.
• Dimensione del testo.
• Il testo è in grassetto o no?,

AA

Due elementi (dimensioni e grassetto) dà quattro combinazioni:

Livello AAA

Per livello AAA la logica è la stessa, solo il rapporto aumenta nel seguente modo:

• 4.5 rapporto diventa di 7
• 3 rapporto diventa 4.5

la dimensione del Testo comprensione

• 19px criteri può essere inteso come l’equivalente di 14pt o 120% o 1.2em.,
• I criteri24pxpossono essere intesi come equivalenti a18pto150%o1.5em.

Per una comprensione completa ed esaustiva di come interpretare la dimensione del testo, si dovrebbe leggere la definizione del testo su larga scala da WCAG.

Tutti i dettagli sul rapporto di contrasto

Colore da modificare

È il colore del testo o dello sfondo. Il valore predefinito è il colore del testo.

Il colore scelto verrà modificato fino a trovare un colore valido. L’altro colore non cambierà.,

Gimme/The algorithms

“Colori validi e molto vicini al colore iniziale”

Questo è l’algoritmo predefinito. Offre opzioni di colore molto vicino al colore iniziale. (La distanza del colore viene calcolata su base matematica, che può variare dal punto di vista del progettista.)

Per alcune combinazioni di colori, l’algoritmo potrebbe non dare alcun risultato ; in tal caso, utilizzare l’altro algoritmo.

“Un intervallo di colori validi”

Questo è l’algoritmo di backup, nel caso in cui il primo non dia alcun risultato. Tuttavia, le opzioni di colore possono essere (fortemente) diverse dal colore iniziale.,

Feedback degli utenti

Se avete problemi o domande su Contrast-Finder, non esitate a contattarci:

• Asqatasun forum
• Twitter @Contrast_Finder
• Contrast-Finder su Github

Contribuire a Contrast-Finder