Verificare il contrasto con strumenti gratuiti

Non deve mai valutare il contrasto a occhio. Gli strumenti gratuiti calcolano il rapporto esatto tra due colori e le indicano immediatamente se il risultato è conforme.

Il Contrast Checker di WebAIM è lo strumento classico. Incolli un colore di primo piano e uno di sfondo: visualizzerà il rapporto e gli esiti di conformità AA e AAA.

Gli strumenti validi indicano ogni risultato come conforme o non conforme, separatamente per il testo normale e quello grande, così saprà esattamente quale soglia ha superato.

Direttamente nel browser, il selettore dei colori di DevTools mostra il rapporto di contrasto in tempo reale e una linea che indica la soglia AA mentre modifica un colore.

DevTools legge il colore e lo sfondo calcolati così come vengono effettivamente visualizzati, permettendole di verificare i pixel reali, non il valore che sperava di ottenere.

Esegua axe DevTools o Lighthouse per analizzare un'intera pagina in una sola volta. Segnaleranno ogni elemento con contrasto insufficiente, invece di una sola coppia alla volta.

Molti strumenti di verifica includono un contagocce, che consente di campionare i colori direttamente da un sito attivo o da un mockup, senza dover cercare i codici esadecimali.

Figma e applicazioni simili offrono plugin per il contrasto, così può individuare i problemi durante la progettazione, molto prima che venga scritto il codice.

Gli strumenti verificano una sola coppia di colori uniformi. Su un gradiente o un'immagine, verifichi manualmente il punto peggiore, perché il contrasto del testo può non essere sufficiente solo in una parte dell'area.

La maggior parte degli strumenti di verifica consente di modificare leggermente un colore finché non risulta conforme, fornendo un codice esadecimale conforme da reinserire direttamente nel CSS.

Inserisca in uno strumento di verifica gli esatti valori esadecimali del foglio di stile, per confermare che questa combinazione superi il rapporto 4.5:1 prima della pubblicazione.

Ha conosciuto strumenti gratuiti come WebAIM, DevTools e axe, che trasformano il contrasto in un esito chiaro di conformità o non conformità. Misuri i colori reali e corregga i problemi prima del rilascio. ✅