Controllo contrasto colore

Il rapporto confronta la luminanza relativa dei colori di primo piano e sfondo usando la formula di contrasto WCAG. La scala va da 1:1 per luminanza identica a 21:1 per la differenza più forte bianco-nero. Il calcolo usa i valori di colore inseriti, quindi non tiene conto automaticamente di trasparenza, gradienti, immagini di sfondo, ombre, anti-aliasing, condizioni di visualizzazione o un colore diverso mostrato in uno stato interattivo. Testa i colori effettivamente renderizzati per stati normali, hover, focus, attivi, disabilitati e visitati quando differiscono.

Per testo ordinario, WCAG AA usa un rapporto minimo di 4.5:1 e AAA usa 7:1. Il testo grande usa soglie più basse perché caratteri più grandi e sufficientemente in grassetto sono più facili da distinguere: 3:1 per AA e 4.5:1 per AAA. Se il testo qualifichi come grande dipende dalla dimensione e dal peso renderizzati, non solo da un'etichetta di design. Una coppia può quindi superare per un'intestazione grande e fallire per testo del corpo. Controlla il requisito che corrisponde alla tipografia reale e all'obiettivo di conformità.

Sì. Il contrasto del testo è solo una parte dell'accessibilità del colore. Le informazioni visive necessarie per identificare controlli dell'interfaccia utente, stati dei componenti, oggetti grafici e indicatori di focus della tastiera richiedono comunemente almeno 3:1 di contrasto rispetto ai colori adiacenti secondo la guida WCAG sul contrasto non testuale. Elementi decorativi e controlli inattivi hanno considerazioni diverse. Testa bordi, icone, grafici, stati selezionati, messaggi di validazione e contorni di focus nel contesto. Una coppia di testo che supera AA non prova che ogni elemento interattivo o grafico sulla stessa schermata sia accessibile.

Inserisci i colori effettivi di primo piano e sfondo nel punto in cui appare testo o grafica essenziale. I livelli semi-trasparenti si fondono con ciò che sta dietro, e gradienti o fotografie creano diversi rapporti di contrasto attraverso lo stesso elemento. Campiona l'area più debole rilevante, quindi testa altre posizioni probabili e ritagli reattivi. Se il contrasto dipende da un'ombra, contorno o overlay, includi l'effetto effettivamente renderizzato nella revisione manuale. Preferisci uno sfondo solido stabile dietro testo importante quando l'immagine sottostante può cambiare.

No. Il contrasto è un requisito misurabile. Il design accessibile necessita anche di tipo leggibile, spaziatura sufficiente, struttura semantica, etichette, operabilità da tastiera, focus visibile, alternative significative, zoom e reflow utilizzabili, movimento controllato e istruzioni che non dipendono solo dal colore. Le coppie di colori possono superare matematicamente pur essendo difficili in font sottili, dimensioni piccole, bagliori, differenze di visione del colore o layout densi. Usa il risultato come un controllo in una revisione più ampia e testa l'interfaccia effettiva con contenuti e stati rappresentativi.