Calcolatore contrasto APCA
Scopra quanto è leggibile un colore di testo sul suo sfondo: il quasi nero #111827 su bianco ottiene Lc 104.5, e invertendo i colori cambia il segno. Un solo numero con segno che le Sue revisioni di design possono citare. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Testo
- #111827
- Sfondo
- #ffffff
- Lc
- 104,5
- Lc assoluto
- 104,5
- Polarità
- BoW
- Leggibilità
- body_fluent
Questo calcolatore di contrasto APCA prende un colore di testo e un colore di sfondo in codici hex e restituisce il Lc con segno (contrasto di luminosità) prodotto dall'Accessible Perceptual Contrast Algorithm, usato nel lavoro di leggibilità della bozza WCAG 3. A differenza del rapporto di contrasto WCAG 2.x più datato, l'APCA è sensibile alla polarità: testo scuro su superficie chiara produce un Lc positivo, mentre testo chiaro su superficie scura produce un Lc negativo di magnitudine simile. Designer, sviluppatori e specialisti di accessibilità usano quel singolo numero—insieme a tabelle di dimensione e peso del carattere—per decidere se il corpo tipografico, le etichette dell'interfaccia e i tratti non testuali restano leggibili su display autoilluminati. Il motore implementa le costanti pubbliche 0.0.98G-4g: linearizzazione con potenza 2.4, coefficienti Y sRGB, soft-clamp del nero e scaling SAPC BoW/WoB. I risultati sono pienamente deterministici, senza chiamate di rete, campionamento o scorciatoie dipendenti dalla data.
Cosa misura il Lc APCA e come differisce dal rapporto WCAG 2
L'APCA predice il contrasto percettivo di testo e contenuti non testuali su schermi autoilluminati modellando il gamma del monitor, i neri morbidi e il modo asimmetrico in cui la visione umana tratta le coppie scuro-su-chiaro rispetto a chiaro-su-scuro. L'output è un Lc con segno che copre circa più o meno centodieci: ad esempio, un corpo di testo quasi nero su bianco puro si colloca tipicamente vicino a Lc novanta o superiore, mentre gli stessi colori invertiti producono un grande Lc negativo.
WCAG 2.x invece riporta un unico rapporto di contrasto positivo dalla luminanza relativa con soglie fisse AA e AAA come 4.5 a 1 e 7 a 1; quel rapporto ignora la polarità e tende a sovra- o sottovalutare certe coppie di toni medi che le persone faticano davvero a leggere.
Questo calcolatore restituisce sempre il Lc con segno, la magnitudine assoluta, l'etichetta di polarità BoW (black on white / testo scuro su chiaro) o WoB (white on black / testo chiaro su scuro), la Y linearizzata di ciascun colore e una banda grossolana di leggibilità derivata dal Lc assoluto per un triage rapido.
Non c'è crawl di pagina, parsing CSS, fusione di opacità né campionamento di gradienti: Lei fornisce due colori hex espliciti e riceve un oggetto riproducibile adatto a gate sui token di design, ticket di accessibilità e revisioni automatiche di palette che devono citare un Lc numerico piuttosto che un'opinione soggettiva su uno screenshot.
Come vengono letti gli input hex e perché il percorso 0.0.98G-4g resta deterministico
Entrambi i valori devono essere hex: cancelletto iniziale opzionale, tre cifre che si espandono a sei oppure sei cifre complete, senza distinzione di maiuscole. Suffissi alpha, funzioni rgb(), funzioni hsl(), colori CSS con nome e interi nudi sono rifiutati con un messaggio che nomina il campo e mostra ciò che è stato ricevuto, così un token errato non diventa mai un fail-open silenzioso. Ogni colore è limitato a trentadue caratteri per tenere la validazione economica e bloccare incolla accidentali.
Dopo il parsing, ogni canale è elevato alla potenza 2.4 dopo la divisione per duecentocinquantacinque, poi combinato con i coefficienti sRGB APCA 0.2126729, 0.7151522 e 0.0721750 per formare Y. I valori Y quasi neri a o sotto 0.022 ricevono il soft-clamp per non penalizzare eccessivamente il nero puro. Quando la Y dello sfondo è maggiore di quella del testo, il ramo BoW applica gli esponenti 0.56 e 0.57 con scala 1.14 e offset 0.027; altrimenti il ramo WoB usa 0.65 e 0.62 e restituisce un Lc negativo.
I delta di luminanza estremamente piccoli vengono portati a zero.
Dove i controlli APCA si inseriscono in design system, dark mode e WCAG 3
I team di prodotto ricorrono all'APCA quando una palette di brand che ha superato WCAG 2 AA resta fangosa in dark mode, quando un testo grigio medio su superfici morbide fallisce i test umani di leggibilità, o quando gli stakeholder chiedono numeri Lc allineati alle discussioni della bozza WCAG 3 piuttosto che al solo rapporto antico.
Gli ingegneri collegano lo stesso contratto a controlli di pull request che bloccano un cambio di token se il Lc assoluto dei colori di corpo primari scende sotto una soglia di team come sessanta, oppure registrano valori WoB per titoli hero del tema scuro che restano volutamente più vicini alla superficie. QA e specialisti di accessibilità allegano Lc con segno e polarità ai report di bug così gli sviluppatori correggono la coppia esatta invece di indovinare da uno screenshot.
I team di contenuto e marketing verificano che i codici hex di campagna superino ancora le bande minime di corpo quando posti su sfondi chiari o scuri del sito. La abbini al verificatore di rapporto WCAG 2 quando le serve ancora documentazione AA/AAA, e agli strumenti di conversione colore quando le servono intermedi RGB o HSL prima di calcolare il Lc.
Casi d'uso
Revisione di token di design e dark mode
Controlli ogni coppia testo/sfondo nei temi chiari e scuri per Lc con segno e polarità prima di bloccare i token di brand.
Report di accessibilità con polarità
Includa Lc con segno, polarità BoW/WoB e la banda di leggibilità così gli ingegneri correggono la coppia hex esatta, non uno screenshot vago.
Domande frequenti
Quanto costa il calcolatore di contrasto APCA?
È gratuito nel Suo browser su questa pagina.
Che cos'è Lc e perché può essere negativo?
Lc è il contrasto di luminosità APCA. Valori positivi significano testo scuro su sfondo chiaro (BoW); valori negativi, testo chiaro su sfondo scuro (WoB). Conservi il segno nei report sensibili alla polarità; usi il valore assoluto solo confrontando soglie di magnitudine.
In che cosa differisce dal verificatore di rapporto di contrasto WCAG?
WCAG 2.x restituisce un unico rapporto positivo e flag AA/AAA. L'APCA restituisce un Lc con segno e polarità, matematica diversa (Y con potenza 2.4, soft-clamp del nero, esponenti BoW/WoB) e mira al lavoro di leggibilità della bozza WCAG 3 piuttosto che alle soglie 4.5:1 / 7:1.
Questo strumento analizza il mio sito per problemi di contrasto?
No. Confronta solo due colori hex che Lei fornisce.
Quali formati di colore accetta il calcolatore APCA?
Solo colori esadecimali a tre o sei cifre, con o senza cancelletto iniziale, in maiuscolo o minuscolo. Nomi di colore, notazioni RGB o HSL e trasparenza vengono rifiutati, così un valore errato non passa mai.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/color/apca-contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/apca-contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/apca-contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/apca-contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/apca-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"text": "#111827",
"background": "#ffffff"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.apca_contrast",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_color_chars | 32 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Esplori le coppie gratis nel browser, oppure chiami l'API a $0.002 per richiesta riuscita quando il CI del design system, i backend di Figma o le pipeline di token necessitano della stessa matrice Lc ogni volta.
Cosa misura il Lc APCA e come differisce dal rapporto WCAG 2
Il campo method è fissato ad apca_0.0.98G-4g così i log di CI documentano esattamente quale set di costanti ha prodotto il numero. Hex non validi, campi mancanti, valori non stringa e stringhe troppo lunghe sono rifiutati con invalid_input e non vengono mai fatturati.
Come vengono letti gli input hex e perché il percorso 0.0.98G-4g resta deterministico
I campi preferiti sono text per il colore dell'inchiostro o dell'icona in primo piano e background per la superficie dietro. Gli alias foreground, fg, color1 e hex1 mappano a text; bg, color2 e hex2 a background, così fogli di calcolo, query string e form possono riusare lo stesso contratto senza rinominare colonne.
Dove i controlli APCA si inseriscono in design system, dark mode e WCAG 3
I designer incollano coppie hex da Figma o da un JSON di token e leggono polarità più una banda come body_preferred o large_text prima di bloccare una scala. In questa pagina il lavoro gira interamente nel Suo browser; tramite l'API ogni ricerca riuscita costa $0.002, la validazione fallita non viene addebitata e nulla viene memorizzato dopo la risposta. Quella suddivisione—esplorazione interattiva gratuita e API a pagamento identica—corrisponde al resto del catalogo KIT di tier A e Le consente di passare da un workshop di palette a una pipeline automatizzata senza cambiare il risultato matematico.
Casi di integrazione
Gate CI per la preparazione alla bozza WCAG 3
Chiami l'API dalle pull request per far fallire le build quando il Lc assoluto dei colori di corpo scende sotto la soglia del Suo team.
Domande tecniche
Quali formati di colore sono accettati?
Solo hex: #RGB o #RRGGBB, con o senza cancelletto iniziale, senza distinzione di maiuscole. rgb(), hsl(), colori con nome e hex con alpha sono rifiutati con invalid_input.