Elemento

all elements

Tipologia d'errore

Certo

Linee Guida

Requisiti

Il contrasto tra il colore di sfondo e il colore del testo, per l'elemento, è sufficiente secondo l'algoritmo WCAG2.0 AA.

Errore

Il contrasto tra il colore di sfondo e il colore del testo, per l'elemento, non è sufficiente secondo l'algoritmo WCAG2.0, livello AA.

Descrizione Breve

La rappresentazione visiva del testo deve avere un rapporto di contrasto di almeno 4.5:1, fatta eccezione per il testo grande che deve avere un rapporto di contrasto di almeno 3:1. Il rapporto di contrasto va calcolato utilizzando l'algoritmo specificato nelle WCAG2.0. Per testo di grandi dimensioni o testo grande si intende un testo che sia almeno di 18 punti (oppure di 14 punti, quando in grassetto).

Logica

La spiegazione è basata su a) l'adozione di 3:1 come valore minimo di rapporto di contrasto per gli osservatori normali, nello standard ANSI e su b) l'osservazione empirica che nella popolazione, l'acuità visiva di 20/40 è associata ad una perdità di sensibilità al contrasto di circa 1.5 [ARDITI-FAYE]. Un utente con 20/40 potrebbe avere quindi bisogno di un rapporto di contrasto di 3 * 1.5 = 4.5 a 1. Sulla base di analoghe osservazioni empiriche e della stessa logica, l'utente con acuità visiva di 20/80 potrebbe avere necessità di un contrasto di circa 7:1.

Come correggere

Usa un valutatore di contrasto di colori per verificare che i colori di sfondo e testo abbiano un rapporto di contrasto di 4.5:1 per il testo di dimensione normale o di 3:1 per il testo di grandi dimensioni. Cambia i colori per ottenere un contrasto sufficiente. http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head

Esempio di correzione

<div style="background-color:#FFFFFF"><span style="color:#000000">Il colore del testo e il colore dello sfondo devono avere un sufficiente contrasto</span></div>

Come individuare

Domanda Il rapporto di contrasto tra il colore del testo e quello dello sfondo è maggiore di 4.5:1 oppure di 3:1, nel caso in cui il testo sia di grandi dimensioni?
Corretto Si, il rapporto di contrasto è superiore a 4.5:1 per il testo di dimensione normale ed è superiore a 3:1 per il testo di grandi dimensioni.
Errato No, il rapporto di contrasto è inferiore a 4.5:1 per il testo di dimensione normale ed è inferiore a 3:1 per il testo di grandi dimensioni.

Passi da controllare

Procedura

1. Inserire l'URL, oppure caricare l'HTML di una pagina Web nella quale i valori dei colori sono definiti per i testi e/o per gli sfondi, in modo che il valutatore di contrasto verifichi il rapporto di contrasto di colore tra i colori di testo e quelli di sfondo. 2. Per alcuni strumenti di valutazione del contrasto è necessario inserire i codici dei colori di testo e sfondo in formato esadecimale (e.g. #FFEE00) per calcolare il rapporto di contrasto.

Risultato previsto

1. Il valutatore del contrasto mostrerà il rapporto di contrasto maggiore o uguale a 4.5:1 per il testo di dimensione normale. Per testo di dimensione normale si intente il testo di dimensione minore di 18 punti (o di 14 punto, se in grassetto). 2. Il valutatore del contrasto mostrerà il rapporto di contrasto maggiore o uguale a 3:1 per il testo di grandi dimensioni. Per testo di grandi dimensioni si considera il testo di dimensione uguale o maggiore a 18 punti (o 14 punti, se in grassetto).

Risultato non corretto

1. Il valutatore del contrasto mostrerà il rapporto di contrasto maggiore o uguale a 4.5:1 per il testo di dimensione normale. Per testo di dimensione normale si intente il testo di dimensione minore di 18 punti (o di 14 punto, se in grassetto). 2. Il valutatore del contrasto mostrerà il rapporto di contrasto maggiore o uguale a 3:1 per il testo di grandi dimensioni. Per testo di grandi dimensioni si considera il testo di dimensione uguale o maggiore a 18 punti (o 14 punti, se in grassetto).

Esempi

Esempi corretti

High contrast black text on a white background
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>OAC Testfile - Check #301 - Positive</title>
</head>
<body>
<p style="background-color:#ffffff;color:#000000;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>

Esempi non corretti

Low contrast black text on a blue background
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>OAC Testfile - Check #301 - Negative</title>
</head>
<body>
<p style="background-color:#0000ff;color:#000000;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>

English | German | Italiano


Il codice del motore del sito Web è copyright 2011
Inclusive Design Institute
API del Web Service