L'immagine seguente mostra la  palette (tavolozza) dei colori del sito che definisce i colori principali del sito: colore del testo, del background, dei link attivi, hover e visitati, il colore dei bottoni, il footer e altri aspetti del sito. Si può ovviamente modificare, ma questo comporta modificare tutte le scelte e procedere successivamente alla necessaria validazione dei contrasti fra il testo e lo sfondo. I due colori estremi (giallo e rosso) ovviamente vanno usati con molta parsimonia, entrambi devono trasmettere all'utente un messaggio di attenzione ma mai come unico mezzo per veicolare tale informazione.

La scelta della palette dovrà altresì vincolare

la scelta della immagine principale del sito dell'header nella homepage e la progettazione del logo della scuola. Di conseguenza è importante decidere a priori quale palette scegliere, sempre tenendo presente, in linea di massima compatibilmente con l'aspetto grafico, le direttive dell'AGID in proposito.

 Direttive AGID (indicative)

La scala cromatica deve garantire il rapporto di contrasto minimo (Contrast Ratio indicato come "cr" nell'immagine) tra testo e sfondo di 4,5:1, come raccomandato dalle specifiche di accessibilità WCAG 2.0 AA.

Il colore non deve mai essere significante in sé e non deve essere la modalità con cui si trasmettono contenuti: ipovedenti, daltonici e non vedenti non sarebbero in grado di identificarli correttamente.

Il colore non può essere usato come unico mezzo per veicolare un’informazione. Quindi, ad esempio, è sbagliato indicare “in rosso le informazioni obbligatorie, in verde quelle accessorie”, perché non tutti potrebbero essere in grado di percepire la differenza di colore in contesti di fruizione diversi ma molto frequenti, ad es.:

• da smartphone o tablet, di giorno e all’aperto
• una stampa in bianco e nero della pagina web
• una pagina web videoproiettata
• in caso di daltonismo (5-8% popolazione maschile)

Per comunicare un’informazione quindi, oltre al colore, è necessario aggiungere un elemento testuale o grafico.

La verifica del rapporto di contrasto può essere facilmente effettuata attraverso molti tool online come colour contrast check, oppure se si lavora con lo UI Kit è possibile installare il plugin di Sketch chiamato Stark che permette la verifica del contrasto, la simulazione del tipo di “colorblindness” e l’esportazione del report.