Il contrasto cromatico degli elementi della pagina web dipende dalle differenze tra i loro livelli di luminosità e le loro sfumature. Se le differenze di luminosità e tonalità tra due colori sono al di sopra di una certa soglia, i colori hanno sufficiente contrasto. Se uno o entrambe le misure è inferiore alla soglia, World Wide Web Consortium consiglia di modificare i colori. È possibile calcolare il contrasto di colore se si conoscono i valori RGB (rosso-verde-blu) di due colori. Progettazione di pagine web con sufficiente contrasto tra lo sfondo e il testo migliora l'esperienza dell'utente.

istruzione

Calcolo differenza di colore Luminosità

1 Indichiamo i valori rosso, verde e blu del colore del testo da R1, G1 e B1 rispettivamente. Indichiamo i valori di rosso, verde e blu del colore di sfondo da R2, G2 e B2, rispettivamente.

2 Si calcoli (299

R1 + 587 G1 + 114 B1) / 1000. Questa è la luminosità del colore del testo. Ad esempio, si supponga di avere il testo di colore verde scuro, dove R1 = 20, G1 = 100 e B1 = 20, quindi la luminosità del colore del testo è 66.96, dal momento che (299 20 + 587 100 + 114 20) / 1000 = 66.96.

3 Si calcoli (299

R2 + 587 G2 + 114 B2) / 1000. Questa è la luminosità del colore di sfondo. Ad esempio, si supponga di avere uno sfondo rosa chiaro dove R2 = 255, G2 = 220 e B2 = 240, quindi la luminosità del colore di sfondo è 232,75, in quanto (299 255 + 587 220 + 114 240) / 1000 = 232,75.

4 Calcolare la differenza tra i livelli di luminosità. Se la differenza è inferiore a 125, è necessario regolare di uno o entrambi i colori per aumentare la differenza di luminosità. Ad esempio, dal 232,75-66,96 = 165.79, non è necessario cambiare i colori.

Calcolo Hue Differenza

5 Calcolare la differenza tra i valori di rosso di ogni colore. Utilizzando l'esempio precedente, la differenza tra i valori di rosso è 235 dal 255 - 20 = 235.

6 Ripetere il passo 1 per i valori del verde e del blu. Utilizzando l'esempio precedente, la differenza verde è 120 (dal 220 - 100 = 120), e la differenza blu è 220 (dal 240 - 20 = 220).

7 Aggiungere le tre differenze per ottenere la differenza totale tonalità. Se la differenza di tonalità è inferiore a 500, è necessario modificare uno o entrambi i colori. Ad esempio, dal 235 + 120 + 220 = 575, non è necessario cambiare i colori.