Vai al contenuto
Inizia

Controllo del contrasto cromatico

Do4U controlla il contrasto dei colori del tuo brand e del tuo sito web. Inserisci i tuoi colori, uno per riga, e indica a cosa serve ogni colore: testo, sfondo, accento (ad esempio un pulsante) o bordo. Il codice calcola il rapporto di contrasto di ogni coppia con la formula WCAG e mostra quali livelli raggiunge: AA e AAA per testo normale e grande, e 3:1 per bordi, icone e aree dei pulsanti. I valori non sono arrotondati per eccesso. Per ogni coppia che fallisce, ottieni il colore più vicino che supera il test, una volta più scuro e una volta più chiaro, nella stessa tonalità. Do4U crea anche una palette regolata e la ricontrolla nel suo insieme. Esporti la palette come proprietà CSS personalizzate, variabili SCSS o JSON, e l'esportazione avviene nel tuo browser. Tutto viene eseguito via codice, senza IA, ed è gratuito.

Provalo ora Prezzi

Gratis e senza account: Calcolatore del rapporto di contrasto →

A chi è rivolto

Per designer, sviluppatori, agenzie e proprietari di siti web che scelgono i colori del brand o creano una guida di stile e desiderano testi e pulsanti leggibili da tutti.

Usi tipici

  • Controlla una nuova palette del brand prima di iniziare il design
  • Trova un grigio per il testo secondario che superi comunque il livello AA
  • Controlla i colori di pulsanti, link e bordi rispetto allo sfondo della pagina
  • Esporta i colori regolati come variabili CSS per il tuo foglio di stile

Esempio

Input

#1a1a1a testo #777777 testo Secondario #ffffff sfondo #cccccc bordo

Risultato

#1a1a1a su #ffffff: 17.4:1, passa AA e AAA #777777 su #ffffff: 4.47:1, fallisce AA per testo normale (passa per testo grande). Più scuro: #767676 → 4.54:1. Più chiaro: non possibile #cccccc su #ffffff: 1.6:1, fallisce il contrasto non testuale di 3:1. Più scuro: #949494 → 3.03:1 Esporta (regolato): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Un esempio fisso, abbreviato. I risultati reali sono generati dall'IA: controllali.

Prezzo e limiti

Prezzo
gratis, fino a 30 controlli al giorno
Disponibile con
Gratis, Con pacchetto
Limite di input
Fino a 3 000 caratteri per file

Privacy

Elaborati sui nostri server in UE (Polonia). Gli input e i risultati vengono eliminati dopo 7 giorni (Gratis) o 30 giorni (pacchetti), o subito dopo la visualizzazione se scegli di non memorizzarli. Le immagini vengono eliminate subito dopo l'elaborazione.

Nell'API

Nome dello strumento: contrast_check. Crea un lavoro con POST /api/v1/jobs e recupera il risultato con GET /api/v1/jobs/{id}. Trovi la tua chiave API nel tuo account.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Documentazione API completa →

Domande e risposte

Come viene calcolato il rapporto di contrasto?

Con la formula WCAG 2.2: prima la luminanza relativa di ogni colore, poi (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro. Il risultato è compreso tra 1:1 e 21:1. I valori vengono confrontati senza arrotondamenti, quindi 4.49:1 non raggiunge 4.5:1 e il display non arrotonda mai per eccesso.

Quali coppie vengono controllate?

Il testo viene controllato su ogni sfondo e sui colori di accento, rispetto a 4.5:1 e 7:1 per il testo normale e 3:1 e 4.5:1 per il testo grande. I colori di accento e i bordi vengono controllati sullo sfondo rispetto a 3:1 per il contrasto non testuale. Un colore senza un ruolo viene confrontato con tutti gli altri colori.

Come vengono trovati i colori suggeriti?

Cambia solo la luminosità, nello spazio colore OKLCH; la tonalità rimane la stessa. Do4U cerca il colore più vicino che superi il test, una volta più scuro e una volta più chiaro, e lo ricontrolla come codice esadecimale. Se nessun colore può superare il test rispetto a uno sfondo, lo segnala.

Il mio testo viene memorizzato?

Solo per il tempo necessario: 7 giorni con il piano Free, 30 giorni con un pacchetto – o per nulla, se scegli di non memorizzarlo. L'elaborazione avviene sui nostri server in UE (Polonia).

Posso usare il risultato subito?

I risultati sono generati dall'IA. Per favore, leggili prima di pubblicarli o inviarli.

Strumenti correlati

  • Controllo accessibilità

    Controlla una pagina per le comuni barriere e spiega come risolverle.

  • Feedback sul design da uno screenshot

    Carica uno screenshot di una pagina o di un'app e ottieni riscontri numerati e concreti su dimensione dei pulsanti, contrasto, testo nelle immagini, gerarchia e spaziatura, ognuno con un riquadro sull'immagine. Una valutazione dell'IA, non una misurazione.

  • Testi alt

    Brevi descrizioni delle immagini per screen reader e motori di ricerca.

Tutti gli strumenti →