Verifica il contrasto colore contro WCAG AA e AAA. Correzioni in un clic che passano — copre testo normale, testo grande e componenti UI.
Colore del testo (primo piano)
Colore di sfondo
—:1
Rapporto di contrasto
Anteprima — testo su sfondo
La rapida volpe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Questo è testo di corpo a 14px per controllare il contrasto del testo piccolo.
Pulsante
Anteprima — invertito
La rapida volpe
Stesso testo e sfondo, invertiti. Alcune coppie di colori funzionano solo in una direzione.
Pulsante
Fix rapidi — colori passanti più vicini
Sul contrasto WCAG
AA è lo standard legale nella maggior parte delle giurisdizioni: 4.5:1 per il testo normale, 3:1 per il testo grande (18pt+ o 14pt grassetto).
AAA è "potenziato": 7:1 normale, 4.5:1 grande. Punta a questo per il testo di corpo se puoi.
I componenti UI (pulsanti, bordi dei form, icone) hanno bisogno di 3:1 contro il loro colore adiacente — come il testo grande.
Attento al significato veicolato solo dal colore. Accoppia il colore con un'icona, una sottolineatura o un'etichetta così anche gli utenti daltonici ricevono il segnale.
Apple HIG e Material richiedono entrambi minimo 4.5:1 per il testo nella tua app — fallire qui è un noto segnale di review di accessibilità dell'App Store.
Servono anche screenshot di app accessibili?
LaunchShots arriva con suggerimenti di contrasto integrati nell'editor — provalo.