Compositore Contrasto APCA

apcach = APCA + OKLCH. Dato un contrasto target, croma e tonalità, calcola il colore esatto che lo soddisfa — imposta prima "quanto contrasto", poi ottieni il colore.

Ruolo del colore composto

Superficie di riferimento

Contrasto target |Lc|75

Croma C0.140

Tonalità H145°

sRGB

oklch(52.2% 0.140 145.0)

Obiettivo |Lc|

|Lc| misurato

75.2±0.1

La luminosità è calcolata tramite ricerca binaria: a questo croma e tonalità, questo è il colore esatto che raggiunge il contrasto target. · Il colore è all'interno della gamma sRGB.

Componi in tre passaggi: scegli un ruolo, imposta il contrasto, ottieni il colore.

Trasforma il contrasto da metrica di validazione in punto di partenza — dichiara prima quanto leggibilità ti serve, e il motore calcola il colore.

01
Scegli ruolo e riferimento
Il colore composto sarà testo o superficie? Fai riferimento al bianco puro, al nero puro o inserisci uno sfondo personalizzato.
02
Imposta il contrasto target
Trascina |Lc| verso il target (testo corpo ≥75, caratteri grandi ≥60), quindi regola la cromatica e la tonalità; attiva "Cromatica massima" per ottenere il valore più saturo realizzabile per quella tonalità.
03
Copia e applica
|Lc| misurato segue il target in tempo reale (entro ±0,1); copia oklch()/hex/rgb() direttamente nel CSS.

Domande frequenti sulla composizione del contrasto

Tre domande frequenti su apcach.

Perché APCA invece del rapporto WCAG?: APCA (Lc 0–108) valuta la leggibilità in base a dimensione e spessore del carattere, ed è molto più accurato per la modalità scura e il contrasto medio; è un candidato per WCAG 3. Comporre direttamente rispetto a |Lc| rende i risultati nativamente corretti per APCA.
Quale contrasto target dovrei usare?: Regole generali: testo corpo ≥75, titoli ≥60, componenti UI/icone ≥45, elementi decorativi ≥30. Oltre 90 è un contrasto estremo, usato principalmente per caratteri piccoli o speciali.
Cosa fa "Cromatica massima"?: Alla stessa tonalità e contrasto, una cromatica più alta è più vivida, ma oltre la gamma sRGB non può essere visualizzata. Quando è attivo, il motore esegue una ricerca binaria sul bordo della gamma e restituisce il colore più saturo realizzabile.

Dopo la composizione

Verifica nuovamente il colore composto rispetto al rapporto WCAG nello strumento di contrasto, o espandilo in una scala a 11 passaggi.

Controllore di contrasto

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

Editor OKLCH

Regola L / C / H nello spazio OKLCH perceptualmente uniforme con anteprima live e output oklch() / HEX / RGB.

Palette UI Semantica

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

Componi in tre passaggi: scegli un ruolo, imposta il contrasto, ottieni il colore.

Trasforma il contrasto da metrica di validazione in punto di partenza — dichiara prima quanto leggibilità ti serve, e il motore calcola il colore.

Scegli ruolo e riferimento

Il colore composto sarà testo o superficie? Fai riferimento al bianco puro, al nero puro o inserisci uno sfondo personalizzato.

Imposta il contrasto target

Trascina |Lc| verso il target (testo corpo ≥75, caratteri grandi ≥60), quindi regola la cromatica e la tonalità; attiva "Cromatica massima" per ottenere il valore più saturo realizzabile per quella tonalità.

Copia e applica

|Lc| misurato segue il target in tempo reale (entro ±0,1); copia oklch()/hex/rgb() direttamente nel CSS.

Domande frequenti sulla composizione del contrasto

Tre domande frequenti su apcach.

Perché APCA invece del rapporto WCAG?

APCA (Lc 0–108) valuta la leggibilità in base a dimensione e spessore del carattere, ed è molto più accurato per la modalità scura e il contrasto medio; è un candidato per WCAG 3. Comporre direttamente rispetto a |Lc| rende i risultati nativamente corretti per APCA.

Quale contrasto target dovrei usare?

Regole generali: testo corpo ≥75, titoli ≥60, componenti UI/icone ≥45, elementi decorativi ≥30. Oltre 90 è un contrasto estremo, usato principalmente per caratteri piccoli o speciali.

Cosa fa "Cromatica massima"?

Alla stessa tonalità e contrasto, una cromatica più alta è più vivida, ma oltre la gamma sRGB non può essere visualizzata. Quando è attivo, il motore esegue una ricerca binaria sul bordo della gamma e restituisce il colore più saturo realizzabile.