Griglia di Contrasto

Inserisci l'intera tua palette in una tabella di audit N×N — rapporti WCAG e Lc APCA per ogni coppia primo piano × sfondo, decidi tutto a colpo d'occhio.

Ogni cella mostra il rapporto WCAG e l'APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Passaggio WCAG AA corpo Solo testo grande AA Non superato

Righe = colore del testo (primo piano), colonne = sfondo. Ogni cella mostra la coppia reale primo piano-sfondo con due metriche di accessibilità: rapporto WCAG (AA corpo ≥ 4.5, AA testo grande ≥ 3.0) e APCA Lc (75+ per testo corpo, 60+ per testo grande).

Come controllare un'intera palette - aggiungi, leggi, decidi.

Tutti i colori candidati in una matrice N×N: accessibilità per ogni coppia primo piano × sfondo in una sola volta.

01
Aggiungi colori
Importa colori del marchio, colori semantici e neutri (fino a 10). Le righe sono i primi piani, le colonne sono gli sfondi.
02
Leggi la tabella
Ogni cella mostra il rapporto WCAG e Lc APCA. I punti si illuminano: il testo del corpo richiede Lc 75+, il testo grande 60+.
03
Decidi
Registra le coppie di pulsanti e le coppie di testo del corpo nella tua specifica di design; elimina le combinazioni non conformi prima della pubblicazione.

FAQ sulla griglia di contrasto

Tre domande frequenti negli audit a matrice completa.

Perché non controllare le coppie una per uno nello strumento di contrasto?: 5 colori formano 30 coppie dirette: i controlli uno per uno rischiano omissioni. La griglia mostra tutto in una volta e rivela le relazioni speculari.
WCAG o APCA: quale conta?: WCAG 2.1 è il riferimento normativo attuale; APCA è il candidato WCAG 3 e legge con maggiore precisione il testo in modalità scura e a basso contrasto. Rispetta WCAG, valuta con APCA.
Perché le colonne di nero e bianco sono sempre presenti?: Il testo nero o bianco è il fallback universale: come si comporta un colore contro entrambi è la linea di base per definire i colori semantici.

Dopo l'audit

Inserisci le coppie conformi nella tua palette semantica e nella specifica.

Controllore di contrasto

Convalida del contrasto WCAG 2.1 tra qualsiasi colore di primo piano e sfondo.

Simulatore di daltonismo

Simula 8 tipi di deficit della visione dei colori per verificare l'accessibilità.

Palette scientifiche sicure per daltonici

Gli standard di fatto per le pubblicazioni accademiche: Okabe-Ito (consigliato da Nature Methods), la serie Paul Tol, la palette della rivista Nature NPG e il Viridis percettivamente uniforme. Ogni campione include un grado di contrasto APCA e un simulatore di visione cromatica a 8 tipi in basso verifica ogni palette in tempo reale.

Palette UI Semantica

Inserisci un colore marchio, ottieni primario / secondario / successo / avvertimento / pericolo — esportato come configurazione Tailwind e variabili CSS.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Come controllare un'intera palette - aggiungi, leggi, decidi.

Tutti i colori candidati in una matrice N×N: accessibilità per ogni coppia primo piano × sfondo in una sola volta.

Aggiungi colori

Importa colori del marchio, colori semantici e neutri (fino a 10). Le righe sono i primi piani, le colonne sono gli sfondi.

Leggi la tabella

Ogni cella mostra il rapporto WCAG e Lc APCA. I punti si illuminano: il testo del corpo richiede Lc 75+, il testo grande 60+.

Decidi

Registra le coppie di pulsanti e le coppie di testo del corpo nella tua specifica di design; elimina le combinazioni non conformi prima della pubblicazione.

FAQ sulla griglia di contrasto

Tre domande frequenti negli audit a matrice completa.

Perché non controllare le coppie una per uno nello strumento di contrasto?

5 colori formano 30 coppie dirette: i controlli uno per uno rischiano omissioni. La griglia mostra tutto in una volta e rivela le relazioni speculari.

WCAG o APCA: quale conta?

WCAG 2.1 è il riferimento normativo attuale; APCA è il candidato WCAG 3 e legge con maggiore precisione il testo in modalità scura e a basso contrasto. Rispetta WCAG, valuta con APCA.

Perché le colonne di nero e bianco sono sempre presenti?

Il testo nero o bianco è il fallback universale: come si comporta un colore contro entrambi è la linea di base per definire i colori semantici.