Cinque "controllori di contrasto" facili da usare per i responsabili.

2024/07/29

Controllo del contrastocalcola il rapporto di contrasto, cioè la differenza tra il colore in primo piano (testo ed elementi grafici) e il colore di sfondo in un sito web o in un'immagine,Se il rapporto è conforme alle linee guida sull'accessibilità del web, come WCAG e JIS.Strumenti per la valutazione delConosciuto anche come verificatore del rapporto di contrasto o verificatore del contrasto cromatico.

Questo articolo presenta i seguenti cinque strumenti come tipici verificatori di contrasto.

Di seguito viene fornita un'introduzione a questi strumenti e una spiegazione dettagliata di ciò che si deve osservare quando si verificano i rapporti di contrasto,Le persone incaricate di occuparsi dell'accessibilità del web sono incoraggiate a fare riferimento a questo articolo.

Cinque strumenti di controllo del contrasto facili da usare per i professionisti dell'accessibilità.

Esistono vari tipi di verificatori di contrasto che sono essenziali per i progettisti e i professionisti dell'accessibilità per verificare il contrasto dei loro siti e contenuti web.

Quindi, eccola qui,Controllori di contrasto tipici e facili da usareIn questa sezione vengono presentati cinque di questi strumenti. Alcuni strumenti sono disponibili sui siti web (browser), mentre altri possono essere installati e utilizzati,Entrambi gli strumenti sono disponibili gratuitamente.per introdurre il sistema, quindi sentitevi liberi di verificare prima l'uso del sistema.

Nome dello strumento	Caratteristiche	Sfruttare l'ambiente
① WebAIM	Uno strumento che può essere utilizzato immediatamente dopo l'accesso al sito; sebbene il sito sia in inglese, l'interfaccia utente è semplice, diretta e facile da usare.	browser (web)
② ColorTester	Le immagini possono essere trascinate e rilasciate per verificare il contrasto; trattandosi di un sistema installato, il suo utilizzo sul posto di lavoro può essere limitato.	installare (Windows / Mac)
AdobeColor	Dispone di una funzione di controllo del contrasto e di numerose funzioni relative agli schemi di colore e può essere collegato a prodotti Adobe come Photoshop, Illustrator e inDesign.	browser (web)
④ WCAG Controllore del contrasto cromatico	Installato in Google Chrome e utilizzato come estensione, questo strumento è particolarmente utile per verificare il contrasto di un sito web.	browser (web) (Estensione Chrome)
⑤ Griglia di contrasto	Uno strumento che consente agli utenti di verificare il contrasto dei colori impostati con un semplice sguardo; è possibile impostare più codici colore, facilitando la comprensione e la decisione dei colori da utilizzare anche a chi non è pratico di schemi cromatici.	browser (web)

 

① WebAIM

Impostare il colore del testo (Foreground) e dello sfondo (Background) e calcolare il rapporto di contrasto,Garantire il rispetto degli standard WCAGI colori possono essere specificati utilizzando un codice colore, un selezionatore di colori e la luminosità può essere regolata; una volta impostato un colore, il rapporto di contrasto viene calcolato in tempo reale e le anteprime possono essere visualizzate con testo normale, testo in grassetto e oggetti grafici come i segni di spunta.

La conformità di ciascun risultato al livello di conformità è visibile a colpo d'occhio sotto la voce "Pass" o "Fail".La navigazione è in inglese, ma semplice e diretta.Pertanto, non dovrete preoccuparvi dell'uso generale.

Pagina ufficiale:WebAIM

② ColorTester

Il rapporto di contrasto dei due colori viene calcolato e valutato secondo i criteri della norma JIS X 8341-3:2010 (WCAG 2.0).Trascinate i file di immagine nella finestra per indovinare e valutare automaticamente i colori di primo piano e di sfondo dell'immagine.Is.

Lo strumento è prodotto in Giappone ed è compatibile con i sistemi operativi Windows e Mac,Lo strumento deve essere installatoLe versioni supportate per ciascun sistema operativo sono Windows 8.1 o successivo e Mac OS X 10.10 o successivo; è disponibile anche una versione in inglese.

Pagina ufficiale:ColorTester

Adobe Color

Questo strumento è fornito da Adobe, uno sviluppatore e distributore di strumenti per i creativi, e dispone di varie funzioni utili per le attività creative, tra cui un controllore di contrasto per verificare l'accessibilità.

Tuttavia, è simile ad altri verificatori di contrasto,Suggerisce inoltre il miglior colore di contrasto per il colore impostato.Sebbene lo strumento sia realizzato da Adobe, può essere utilizzato senza installazione o login, ma se si effettua il loginStrumento facile da usare per i progettisti che utilizzano regolarmente applicazioni Adobe, in quanto può essere integrato con altri prodotti Adobe.Dovrebbe essere.

Pagina ufficiale:Adobe Color

④ WCAG Controllore del contrasto cromatico

Componenti aggiuntivi (estensioni) per Google ChromeQuesto strumento può essere utilizzato per estrarre istantaneamente i colori utilizzati all'interno delle pagine di un sito web e valutare il contrasto di ciascun colore; può essere controllato pagina per pagina, il che lo rende facile da usare per il controllo dei siti web in fase di test o per la manutenzione dei siti web già in funzione.

Fare clic su qualsiasi colore nel pannello di controllo laterale per ottenere un primo piano della parte della pagina in cui viene utilizzato,È anche facile controllare i siti web ricchi di informazioni, come i portali.。

Pagina ufficiale:WCAG Controllo del contrasto cromatico

⑤ Griglia di contrasto

Molti strumenti di controllo del contrasto si basano sul metodo di specificare un colore e verificare il contrasto ogni volta, ma questo strumentoViene visualizzata una tavolozza di colori (elenco) e si può selezionare la combinazione di contrasti che si desidera utilizzare.Questo metodo è quindi consigliato ai principianti del design e a coloro che non sono bravi con gli schemi di colore.

Se si visita il sito web ufficiale, è già possibile vedere le combinazioni di colori predefinite, come mostrato sopra. aggiungendo un codice colore alla casella a sinistra, verranno elencate le combinazioni con gli altri colori della tavolozza. per ogni combinazione di coloriIl livello di conformità è etichettato, ad esempio "AA" o "AAA", e i diversi colori delle etichette indicano se sono conformi o meno.Pertanto, le combinazioni disponibili sono evidenti anche a colpo d'occhio.

Pagina ufficiale:Griglia di contrasto

Dopo aver introdotto rapidamente cinque utili strumenti di controllo del contrasto, perché è necessario verificare il contrasto?

Perché è necessario un controllo del contrasto?

Sull'obbligo di fornire una sistemazione ragionevole ai sensi della revisione della legge sulla discriminazione dei disabili, entrata in vigore nell'aprile 2024,Anche il supporto all'accessibilità del web è una misura essenziale.Per rispondere a questa esigenza, è necessario innanzitutto esaminare il sito web da diverse angolazioni per verificare se l'accessibilità del sito aziendale è stata raggiunta.

In particolare, poiché i siti web forniscono una grande quantità di informazioni ottenute visivamente, non sono solo per gli ipovedenti, ma anche per coloro che non sono ipovedenti.Il sito è progettato in modo da rendere il testo e le immagini riconoscibili per gli utenti ipovedenti e anziani, o per gli utenti con caratteristiche di visione a colori?L'accessibilità del sito deve essere verificata e, se necessario, migliorata.

E uno degli indicatori necessari per verificarlo èRapporto di contrasto del colore".Il rapporto di contrasto è una misura della differenza di luminosità o di oscurità tra due colori sullo schermo (di solito i colori di primo piano e di sfondo) Questo rapporto è una rappresentazione numerica della luminosità relativa dei due colori; più alto è il rapporto di contrasto, più è facile distinguere i colori,Il rapporto di contrasto è espresso nell'intervallo da 1:1 a 21:1, con valori più alti che significano maggiore contrasto = maggiore facilità di riconoscimento.。

Vediamo ora in che misura i diversi rapporti di contrasto cambiano effettivamente il modo in cui vediamo le cose, vedi sotto.

◆ Differenze di visibilità dovute al rapporto di contrasto

Inoltre, l'immagine qui sopra è stata sfocata per dare un'idea di ciò che accade quando le lettere appaiono sfocate, come nel caso delle persone ipovedenti.

◆ Differenze di aspetto quando l'immagine è sfocata.

Così,Quando il rapporto di contrasto è elevato, i confini del colore sono più facili da riconoscere, cioè più leggibili, perché c'è una maggiore differenza tra il colore dello sfondo e il colore generale del paesaggio.Ad esempio, è facile capire che se i colori del testo e dello sfondo sono 1:1, entrambi sono dello stesso colore e non sono riconoscibili, mentre se sono 21:1, sono visualizzati in bianco e nero e chiaramente riconoscibili.Per garantire l'accessibilità dei siti web con una combinazione di elementi diversi, come testo e immagini, il rapporto di contrasto deve essere progettato con attenzione ai dettagli.。

Pertanto, il contrasto tra il design dei propri siti web èSoddisfa i requisiti per garantire l'accessibilità del web?".Il controllo del contrasto è un'attività essenziale per determinare laIl "contrast checker" è uno strumento essenziale per le decisioni quantitative.I requisiti per l'accessibilità del web saranno illustrati nella prossima sezione.

Tre punti di controllo del contrasto.

Quando si utilizza un verificatore di contrasto per controllare il rapporto di contrasto di un sito web o di un contenuto, non si devono usare i propri sensi per decidere se è accettabile o meno.La verifica deve essere effettuata in conformità agli standard di accessibilità del web.Questa sezione descrive tre punti chiave da tenere a mente durante i controlli di contrasto.

Punto 1: comprendere i rapporti di contrasto conformi agli standard JIS.

Come già accennato, la revisione del Disability Discrimination Act ha reso obbligatoria la fornitura di soluzioni ragionevoli per tutte le aziende, rendendo l'accessibilità del web un must per tutte le imprese.

Ci sono vari elementi che compongono un sito web, ognuno dei quali ha i propri standard di accessibilità, tutti definiti da uno standard internazionale chiamato WCAG 2.0 (Web Content Accessibility Guidelines 2.0).Standard JIS (JIS X 8341-3:2016)si tratta di questo.

Inoltre, i livelli di realizzazione di questo standard sono definiti come livelli di conformità da A ad AAA, secondo il Ministero degli Affari Interni e delle Comunicazioni,L'accessibilità del web richiede la conformità alle norme AA o AAA (consigliate).È considerato un

Riferimento:Supporto all'accessibilità per siti web ecc. richiesto alle autorità pubbliche (Ministero degli Affari Interni e delle Comunicazioni).

Vengono inoltre fissati standard per i rapporti di contrasto.

◆ Rapporto di contrasto conforme ai livelli di conformità AA e AAA

livello di conformità	Rapporto di contrasto richiesto
AA	4,5:1 o superiore
AAA	7:1 o più

In altre parole, come sito web per l'accessibilità del web,È necessario un rapporto di contrasto di almeno 4,5:1.Molti verificatori di contrasto calcolano automaticamente il rapporto di contrasto, quindi prestate attenzione a questo rapporto e verificatelo.

Si noti che il rapporto di contrasto AAA di 7:1 si basa su utenti la cui vista è ridotta a circa 20/80, e il W3C presume che gli utenti la cui vista è ridotta oltre i 20/80 utilizzino solitamente tecnologie assistive per accedere ai contenuti.

Il conseguimento della AAA non è obbligatorio, ma solo consigliato,Se il sito è destinato all'uso da parte di utenti ipovedenti o con caratteristiche di visione a colori che non dispongono di tecnologie assistive, deve essere progettato con un rapporto di contrasto di 7:1.Dovrebbe essere.

Riferimento:Comprendere lo standard di realizzazione 1.4.6 | Commento WCAG 2.0 (W3C)

Punto 2: attenzione alle dimensioni del testo.

Sebbene al punto (i) sia stato indicato che il rapporto di contrasto deve essere di almeno 4,5:1, in realtà esistono delle eccezioni.Non è necessario soddisfare il valore di 4,5:1 nei seguenti casi

Eccezioni alla conformità agli standard per il rapporto di contrasto

Eccezione 1) Testo grande e in grassetto.
Per il testo grande o in grassetto (testo normale oltre 18 punti o 14 punti in grassetto),Rapporto di contrasto di 3:1soddisferebbe il criterio, poiché il testo di grandi dimensioni è molto visibile e quindi un contrasto leggermente inferiore è considerato meno problematico.

Eccezione (ii) Testi e loghi a scopo decorativo.
Il testo accidentale a scopo decorativo e i loghi aziendali sono esclusi da questo requisito di rapporto di contrasto, in quanto sono utilizzati a scopo di design e di riconoscimento del marchio e non sono considerati un mezzo per comunicare informazioni.

Eccezione (iii) Testo nelle immagini.
Fanno eccezione, tuttavia, i testi nelle fotografie e nelle immagini,Avere un rapporto di contrasto adeguato, anche all'interno dell'immagine, per quanto riguarda il testo importante per la fornitura di informazioni.è consigliato.

Punto 3) Si deve tenere conto anche degli utenti con caratteristiche di visione a colori.

Finora ci siamo concentrati solo sui rapporti di contrasto, ma quando si considera l'accessibilità del colore, i rapporti di contrasto da soli non sono sufficienti, perché, come abbiamo visto, il rapporto di contrasto non è l'unico fattore che può essere considerato quando si considera l'accessibilità del colore,Considerazione per gli utenti con caratteristiche di visione a coloriQuesto perché deve tenere conto anche di

Ad esempio, di seguito è riportata una sequenza di pulsanti comunemente presenti nei moduli di posta elettronica dei siti web, ecc. Per entrambi i pulsanti, il rapporto di contrasto tra il colore di sfondo e il colore del testo è uno schema di colori conforme ad AA.

◆ Pulsanti conformi al rapporto di contrasto AA

È facile pensare: "Beh, il rapporto di contrasto soddisfa i criteri, quindi l'accessibilità è assicurata", ma è troppo presto per dirlo, perché questo tasto haVisione dei colori di tipo D (dicromatopsia di tipo 2)si vedrà quanto segue.

◆ Visione dei pulsanti nella visione a colori di tipo D

Così,I due pulsanti sono di colore simile e sono difficili da distinguere a prima vista.Ciò significa che non solo il rapporto di contrasto, ma anche le caratteristiche della visione del colore devono essere prese in considerazione quando si crea una combinazione di colori.

Inoltre, in termini di considerazione per gli utenti con caratteristiche di visione a colori,Assicurarsi che le informazioni non vengano trasmesse solo sulla base delle differenze di colore".Anche questo è un punto importante da considerare.

Con UniWeb, l'utente può modificare il contrasto.

Se non disponete delle risorse necessarie per effettuare una verifica del contrasto sul vostro sito, il nostroStrumento di accessibilità UniWeb.UniWeb consiglia di introdurre una serie di funzioni di accessibilità semplicemente aggiungendo una singola riga di codice al sorgente del sito web.implementazione in giornataÈ uno strumento plug-in che può essere

Quali sono le caratteristiche principali di UniWeb?È possibile utilizzare diverse funzioni di accessibilità durante la navigazione dei siti web da parte dell'utente.C'è un punto: tra le funzioni di accessibilità da implementare c'è la possibilità di regolare il contrasto, consentendo agli utenti di passare da "colore invertito", "contrasto scuro" e "contrasto chiaro" con un semplice clic per aumentare la leggibilità.

Funzione di modifica del contrasto UniWeb.

Inoltre, la schermata di gestione mostraRapporti diagnostici sulla conformità all'accessibilità web di un sito.Il rapporto mostra il livello di conformità (A, AA, AAA) per ogni voce, nonché le modifiche specifiche al codice per le aree che richiedono un'azione correttiva,È possibile operare in modo efficiente senza dover cercare i punti di correzione con vari strumenti di verifica, ecc.。

Schermata di gestione di UniWeb.

In basso a destra di questo articolo.Fare clic su "icona umana circolare blu".È inoltre possibile passare da un contrasto all'altro e una vasta gamma di altre funzioni di accessibilità, quindi perché non vedere UniWeb in azione?

sintesi

Sui siti web con molte informazioni ottenute da immagini,Garantire la visibilità e la leggibilità per tutti gli utentiÈ quindi necessario comprendere le considerazioni necessarie per utenti come gli ipovedenti, gli anziani e le persone affette da daltonismo, e implementare un design accessibile appropriato sul proprio sito.

I verificatori di contrasto sono strumenti molto utili per ottenere un design accessibile, anche se molti sono inclusi negli strumenti di verifica dell'accessibilità del web a pagamento,Gli strumenti gratuiti sono sufficienti per il solo controllo del contrasto.Iniziate quindi a controllare il vostro sito web il prima possibile.

Questo articolo, tuttavia, si è concentrato sulla convalida del rapporto di contrasto nell'ambito dell'accessibilità web,Se desiderate saperne di più sull'accessibilità del web, consultate gli articoli precedenti di questo sito e la Guida all'implementazione dell'accessibilità del web fornita dall'Agenzia digitale.。

Riferimento:Articolo precedente "Quali misure di accessibilità web devono essere implementate dai gestori dei siti?".、Guida all'implementazione dell'accessibilità web (Agenzia digitale).

Inoltre, il nostro UniWeb offreÈ disponibile anche una diagnosi gratuita del sito web della vostra azienda.Se siete un'azienda che sta valutando il supporto all'accessibilità web per il vostro sito, perché lo state implementando,Link in bassoNon esitate a candidarvi da

Valutazione gratuita dell'accessibilità (UniWeb).

Controllo del contrasto