Rapporto di contrasto
- AA testo normale 4.5:1
- AA testo grande 3:1
- AAA testo normale 7:1
- AAA testo grande 4.5:1
- Componenti UI e grafica 3:1
Leggibile per tutti
Un sottotitolo grande
Il testo corrente è quello che soffre di più per un contrasto basso, perché si legge più a lungo e in piccolo. Un link di testo
Colori conformi più vicini
Colori salvati
Verifica del contrasto dei colori
Controlla che il testo sia leggibile sul suo sfondo prima di pubblicare un design. Scegli o digita un colore del testo e uno dello sfondo, e lo strumento mostra il rapporto di contrasto WCAG 2.x con esito superato o non superato per AA e AAA, per testo normale, testo grande e componenti dell'interfaccia. Anteprima dal vivo, simulazione del daltonismo e correzioni suggerite ti aiutano a trovare una coppia che funziona. Scegli un colore del testo e uno sfondo in HEX, RGB o HSL. Il rapporto di contrasto WCAG, i risultati AA e AAA e l'anteprima si aggiornano mentre scrivi, e vengono suggeriti i colori conformi più vicini. Tutto viene salvato in questo browser.
Come funziona
- Scegli un colore del testo e uno dello sfondo, oppure digitali in HEX, RGB o HSL. Imposta l'opacità del testo se è semitrasparente.
- Leggi il rapporto di contrasto e i badge AA e AAA per testo normale, testo grande e componenti dell'interfaccia, e controlla l'anteprima dal vivo.
- Applica un colore suggerito se la coppia non supera la verifica, salva le coppie buone nella tavolozza e copia il CSS nel tuo progetto.
Correzioni, non solo punteggi
Quando una coppia non supera la verifica, lo strumento cerca il colore del testo e quello dello sfondo più vicini, con la stessa tinta e saturazione, che raggiungono AA e AAA, e un clic li applica. Il testo semitrasparente viene prima fuso con lo sfondo, proprio come lo disegna il browser.
Privato e portatile
I tuoi colori e la tavolozza restano solo in questo browser. Salva tutto in JSON per fare un backup o spostarlo su un altro dispositivo, oppure salva il risultato come PDF o immagine. Annulla e ripeti coprono ogni modifica.
Domande frequenti
La verifica del contrasto è gratuita?
Sì. È gratuita, non richiede un account e funziona in qualsiasi browser moderno.
Quale rapporto mi serve?
Il livello AA delle WCAG richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande e per i componenti dell'interfaccia come bordi dei campi e icone. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per quello grande.
Perché 4,48 non supera la verifica se si arrotonda a 4,5?
Le soglie WCAG sono esatte. Un rapporto di 4,48:1 è inferiore a 4,5:1, quindi non supera AA per il testo normale. Lo strumento confronta il valore non arrotondato, per cui i badge sono sempre rigorosi.
Strumenti correlati
La storia dietro la verifica del contrasto
Da dove vengono i valori di contrasto WCAG: 4,5:1 e 7:1, la luminanza relativa dallo sRGB, la regola di 3:1 per i componenti dell'interfaccia di WCAG 2.1, il daltonismo e APCA per WCAG 3.
Generatore di tavolozze colori
Crea, blocca e rimescola tavolozze nel browser. Copia HEX, variabili CSS o JSON, esporta PNG o SVG ed estrai i colori da una foto.
Ruota dei colori
Scegli un colore su una ruota interattiva, genera tavolozze complementari, analoghe, triadiche e di altro tipo e copia HEX, RGB, HSL, HSV o CMYK.
Editor di sfumature
Crea sfumature CSS lineari e radiali nel browser. Trascina i fermi colore, imposta l’angolo e copia CSS, HEX, RGB, HSL, HSV o CMYK.
Colori
Come funziona il colore su schermo e in stampa: RGB, CMYK, HSL, hex, ruota dei colori, gradienti, contrasto e strumenti PictorX.
Pronto a provarlo?
Apri PictorX nel tuo browser: nessuna installazione, nessuna carta di credito richiesta per iniziare.
Vai all'editor