Testo bianco su pulsante verde: misura prima di scegliere
Un pulsante verde attira lo sguardo, ma il testo bianco non è necessariamente comodo da leggere. Confronta una scritta scura con Utilgo prima di cambiare il colore del marchio.
Ultimo aggiornamento:
Inserisci i colori effettivi
Prova #22c55e per la superficie e #ffffff per il testo. Sono esempi: nel tuo progetto usa gli stili calcolati dal browser. Il primo piano è la scritta e lo sfondo è il pulsante, non l’intera pagina. Parti da due colori opachi.
Confronta una scritta scura
Mantieni la superficie e usa #111827 per il testo. W3C AA indica 4,5:1 per testo normale e 3:1 per testo grande. Leggi anche l’esito del controllo, non soltanto il valore arrotondato. Non selezionare testo grande per una scritta realmente piccola.
Controlla gli altri stati
Se il passaggio del puntatore cambia lo sfondo, misura separatamente quella coppia. Raggiungi il pulsante con la tastiera e controlla la scritta. Ripeti nel tema scuro se i colori sono diversi. La grafica di progetto può non coincidere con il CSS effettivo.
Concludi sulla pagina reale
Lo strumento confronta due colori HEX opachi senza verificare tutta la pagina. Foto, sfumature e livelli trasparenti richiedono ulteriori controlli. Prova il pulsante su uno schermo mobile e con tastiera. Annota colori e stati verificati per ripetere il test dopo modifiche al tema.
Strumenti correlati
Articoli pratici su questo tema
Implementazione di Dark Mode: CSS, JavaScript e Preferenza del Sistema
Il dark mode riduce la fatica visiva e prolunga la durata della batteria.
Accessibilità Web: WCAG, ARIA e Design Inclusivo
L'accessibilità web garantisce che le persone con disabilità possano usare i siti web.
Audit di Accessibilità Web: Conformità WCAG e Processo di Audit
L'audit di accessibilità web è un processo sistematico che valuta la conformità del vostro sito agli standard WCAG.