Contrasto colori Pro
Confronta il contrasto colori di palette, immagini e codice con report leggibili ed export.
Che cosa fa Contrasto colori Pro
Contrasto colori Pro confronta più colori e mostra quali combinazioni funzionano per testo e sfondo secondo soglie di leggibilità. Invece di verificare una sola coppia alla volta, puoi costruire una palette, generare una matrice di contrasto, estrarre colori da un’immagine e analizzare codice HTML per individuare problemi di leggibilità. Il risultato è utile quando devi scegliere colori coerenti per UI, landing page, dashboard, template o componenti riutilizzabili.
Il vantaggio principale è la vista comparativa. Una palette può contenere colori validi singolarmente ma deboli quando vengono accoppiati. La matrice rende visibile quali colori possono essere usati come testo, quali funzionano meglio come sfondo e quali combinazioni devono essere evitate. Per ogni coppia viene mostrato il rapporto di contrasto, con stati collegati a testo normale, testo grande, AA e AAA.
Contrasto colori Pro è utile anche nella revisione di materiali già esistenti. Se hai un’immagine, puoi caricarla, prelevare o analizzare colori e portarli nella palette. Se hai un frammento HTML, puoi incollarlo nell’area codice e controllare se gli elementi testuali hanno rapporti troppo bassi. Questo permette di passare da una scelta cromatica estetica a una decisione più misurabile e documentabile.
Come usare Contrasto colori Pro
- Apri la scheda Tavolozza per lavorare con colori inseriti manualmente.
- Aggiungi almeno due colori con il pulsante dedicato, poi modifica ciascun colore con il selettore colore o il valore HEX.
- Leggi la matrice di contrasto per vedere il rapporto tra ogni colore e gli altri colori della palette.
- Se una cella richiede più dettaglio, apri il report della coppia per controllare le soglie AA e AAA.
- Usa Esporta quando vuoi copiare la palette come variabili CSS o come array JSON.
- Apri la scheda Immagine per caricare un file PNG, JPG o WEBP e ricavare colori da un visual reale.
- Usa Preleva quando vuoi scegliere un colore preciso dall’immagine, poi invialo alla palette per confrontarlo con gli altri.
- Apri la scheda Codice, incolla uno snippet HTML/CSS e premi Analizza per individuare testi con contrasto insufficiente.
- Quando una combinazione è problematica, aprila nel controllo contrasto colori per regolare la coppia in modo più puntuale.
Modalità disponibili e risultato atteso
Le tre schede rispondono a esigenze diverse. La palette serve a progettare combinazioni, l’immagine serve a recuperare colori da un riferimento visivo, il codice serve a controllare un frammento già scritto. Usarle insieme riduce il rischio di approvare colori belli ma poco leggibili.
| Modalità | Input verificato | Risultato utile |
|---|---|---|
| Tavolozza | Colori scelti manualmente | Matrice di rapporti tra ogni colore e gli altri colori della palette. |
| Immagine | File PNG, JPG o WEBP | Colori estratti o prelevati da inviare alla palette per il confronto. |
| Codice | Snippet HTML/CSS | Elenco dei testi con rapporto inferiore alla soglia prevista. |
| Report coppia | Due colori selezionati dalla matrice | Dettaglio del rapporto e controlli per testo normale, testo grande, AA e AAA. |
Come interpretare la matrice di contrasto
La matrice confronta i colori in entrambe le direzioni: un colore può essere testo su un altro colore o sfondo per lo stesso colore. Anche se il rapporto matematico è simmetrico, il modo in cui usi la coppia nel design cambia la decisione pratica. Un colore molto acceso può funzionare come accento ma non come sfondo di un testo lungo; un colore scuro può essere ottimo per testo primario ma troppo dominante per superfici estese.
Le celle con rapporti alti indicano coppie più sicure. Le celle intermedie possono essere usate per titoli grandi o elementi non testuali, ma richiedono prudenza se il testo è piccolo. Le celle con rapporti bassi dovrebbero essere escluse da testo, link, pulsanti e label importanti. Quando devi decidere rapidamente, scegli coppie che superano AA normale e mantieni AAA per testi critici o contesti con lettura prolungata.
Il report della coppia è utile quando la matrice mostra un valore vicino alla soglia. Aprendo il dettaglio, puoi verificare se la combinazione è adatta solo a testo grande o anche a testo normale. Se devi correggere una coppia specifica, il passaggio verso Contrasto Colori permette una regolazione più diretta di testo, sfondo, luminosità e opacità.
Analisi da immagine e da codice
La scheda Immagine è utile quando stai trasformando un visual in una palette. Caricando un’immagine puoi prelevare colori reali da un logo, da uno screenshot o da un riferimento grafico. I colori estratti non devono essere considerati automaticamente accessibili: vanno inviati alla palette e confrontati nella matrice, perché una tinta presente in un’immagine può essere troppo simile a un’altra per essere usata come testo.
La scheda Codice serve a controllare uno snippet HTML/CSS senza aprire manualmente ogni componente. L’analisi cerca elementi testuali visibili, confronta colore del testo e sfondo effettivo e segnala i casi in cui il rapporto è inferiore alla soglia. Questo controllo è particolarmente utile dopo aver copiato componenti da un prototipo, da una landing page o da una libreria UI.
L’analisi del codice non sostituisce un audit completo dell’interfaccia. Stati hover, focus, disabilitati, overlay, immagini di sfondo e componenti dinamici possono richiedere controlli aggiuntivi nel browser. Contrasto colori Pro aiuta a trovare rapidamente problemi evidenti, poi la verifica finale va fatta nel contesto reale.
Decisioni pratiche per palette accessibili
Una palette accessibile non significa usare solo bianco e nero. Significa sapere quale ruolo assegnare a ogni colore. Un colore può essere adatto come sfondo decorativo, un altro come testo principale, un altro ancora come bordo o accento. La matrice aiuta a separare questi ruoli invece di trattare tutti i colori come intercambiabili.
Per un design system, conviene scegliere almeno una coppia forte per testo principale e sfondo, una coppia per pulsante primario, una per stato di errore e una per messaggi informativi. Se una coppia non supera AA normale, puoi conservarla per icone decorative, superfici grandi o accenti, ma non per contenuti essenziali. L’esportazione in variabili CSS o JSON rende più semplice riportare queste decisioni in codice.
Quando lavori da un’immagine, controlla sempre che i colori estratti non siano troppo vicini tra loro. Per raffinare un singolo valore prima del confronto, puoi usare Colore da Immagine quando ti serve concentrarti sulla selezione cromatica da immagine.
Esportazione e controllo dei ruoli colore
La funzione di esportazione è più utile quando la palette è già stata interpretata. Prima di copiare variabili CSS o JSON, assegna un ruolo ai colori: testo principale, sfondo principale, superficie secondaria, bordo, accento, errore, avviso o successo. Questa classificazione evita che un colore nato come accento venga usato per lunghi paragrafi senza un rapporto sufficiente.
Quando esporti in variabili CSS, usa nomi coerenti con la funzione del colore e non solo con la tinta. Una variabile come colore testo primario è più chiara di una variabile basata su un numero casuale, perché comunica subito dove il valore può essere usato. Se in seguito cambi la tinta, il ruolo rimane comprensibile per chi lavora sul codice.
Quando esporti in JSON, conserva insieme colore e decisione di contrasto. Anche una nota interna come “adatto a testo su sfondo chiaro” o “solo accento” può evitare errori durante l’integrazione. La matrice serve proprio a trasformare una lista di HEX in una palette con regole pratiche.
Controlli da non saltare
- Aggiungere molti colori alla palette senza definire quali saranno testo, sfondo, accento o stato.
- Considerare valido un colore estratto da immagine solo perché appare bene nel visual originale.
- Usare una coppia adatta a testo grande anche per paragrafi piccoli, menu o label.
- Esportare variabili CSS prima di aver escluso le combinazioni con rapporto insufficiente.
- Analizzare solo codice statico e dimenticare stati hover, focus, errore, disabilitato e componenti caricati in seguito.
Verifica finale prima di esportare
Prima di copiare la palette, verifica che ogni colore abbia un ruolo chiaro e almeno una coppia leggibile per il testo. La matrice deve indicare quali combinazioni sono sicure per contenuti normali, quali sono accettabili solo per testi grandi e quali vanno evitate. Se una combinazione è vicina al limite, preferisci una correzione prima dell’esportazione.
La palette è pronta quando i valori esportati non sono solo coerenti dal punto di vista estetico, ma anche difendibili sul piano dell’accessibilità. Questa distinzione è importante: una palette può essere bella, ma senza rapporti sufficienti diventa fragile quando arriva in componenti reali, testi piccoli, moduli, dashboard o interfacce con molti stati.