9 tool per calcolare il contrasto tra due colori per ottimizzare la visibilità di una pagina web.

Come calcolare il contrasto tra i due colori di sfondo e di primo piano dai loro codici identificativi in modo da ottimizzare la visualizzazione della pagina web.

Fin dal medioevo i nostri antenati sentivano l'esigenza di mostrare le figure araldiche con dei colori che fossero in un buon contrasto tra di loro per rendere gli stemmi più facilmente visibili. Per questa ragione fu coniata la regola "mai metallo su metallo e colore su colore". Anche nel mondo del web il contrasto tra il colore dello sfondo e quello del testo è fondamentale per non affaticare gli occhi dei lettori.

Alcuni navigatori hanno poi il problema del daltonismo che impedisce una corretta visibilità di alcuni colori. Ci sono vari gradi di daltonismo, una malattia solitamente genetica che porta a una non distinzione delle diverse lunghezze d'onda della luce visibile. Vediamo come procedere per scegliere dei colori di sfondo e di primo piano che abbiano un buon contrasto tra di loro. Voi certamente saprete che nel mondo del web ogni colore può essere individuato da appositi codici che possono essere quelli HEX, RGB, HSB, C++.

I codici dei colori vengono implementati nell'HTML e nel CSS per dare le istruzioni al browser che trasformerà tali codici in colori veri e propri. Il W3C che è il consorzio che si occupa degli standard  dei linguaggi web ha pubblicato delle linee guida su quello che dovrebbe essere un contrasto accettabile tra colori di sfondo e colori in primo piano per una corretta visibilità. Tale protocollo è stato denominato WCAG 2.0 e serve per fare in modo che colore del link deve essere significativamente diverso dal colore dello sfondo e dal colore del testo circostante il quale a sua volta deve anche essere significativamente diverso dal colore di sfondo. Vengono definiti i livelli AAA per un contrasto ottimale e quello AA per un contrasto accettabile. Nel web si cono diversi tool in grado di determinare il contrasto tra due colori non solo in modo empirico mediante visualizzazione ma anche secondo i criteri del W3C.

Color Safe è un sito che permette facilmente di calcolare il contrasto tra un colore di sfondo e uno di testo. Si clicca su Get Started quindi si digita il colore di sfondo, la famiglia e la dimensione dei font, la quantità di grassetto (font-weight: ...;) e lo standard prescelto (AA o AAA). Si va su Generate Color Palette per scoprire quali siano i colori del testo compatibili per tale sfondo

Nella tavolozza si clicca sul colore per visualizzarne il codice, l'anteprima e il grado di contrasto.

Contrast-A è un altro sito con uno strumento per determinare il contrasto tra due colori. Ci sono due diverse sezioni. In Color Picker si può scegliere colore del testo e dello sfondo dalla apposita tavolozza.

Oltre alla Anteprima c'è il pulsante Swap che permette di scambiare colori tra sfondo e testo.

WebAIM è un altro sito gratuito per ottimizzare il contrasto tra colori più spartano dei precedenti

Luminosity Colour Contrast Ratio Analyzer è un tool per calcolare il rapporto di contrasto tra due colori digitandone i codici. Dà anteprime per caratteri piccoli e per caratteri grandi.

Color Palette Accessibility Evaluator è uno strumento in cui digitare il colore dello sfondo e di testo separati da virgole quindi il livello del contrasto. Si va poi su Submit per analizzare i risultati.

Constrast Ratio permette di digitare i colori anche tramite nome inglese oltre che con il codice

 

Random A11y Color Palettes è un tool gratuito diverso per analizzare il contrasto tra colori

I colori di sfondo e di testo vengono però generati a caso e gli utenti possono votare Up o Down per apprezzare o meno l'accoppiamento. In basso viene anche mostrato il CSS da usare per implementare quei dati colori in una pagina web. Si può forzare la casualità visto che il codice è presente nell'URL.

Snook è uno degli strumenti con più tool per l'analisi del contrasto tra due colori

Sia per il colore di testo che per quello di sfondo ci sono dei cursori per la ottimizzazione dei risultati che vengono mostrati nel terzo riquadro con la compatibilità AA e AAA.

Contrast Checker è l'ultimo tool che presento per testare il contrasto tra colori

Con la tavolozza o con la digitazione del loro codice si scelgono i colori di sfondo (background) e in primo piano (foreground) per poi visualizzare il risultato del loro contrasto.