Verificatore del rapporto di contrasto WCAG
Questo verificatore del rapporto di contrasto WCAG prende due colori hex — primo piano e sfondo — e restituisce il rapporto di contrasto ufficiale usato dalle Web Content Accessibility Guidelines, insieme a chiari indicatori di superamento o mancato superamento AA e AAA sia per il testo normale sia per il testo grande.
Esegui gratis nel browser
Designer, sviluppatori e revisori usano quel rapporto per decidere se testo del corpo, pulsanti, etichette e chrome dell'interfaccia restano leggibili per persone con visione ridotta o differenze nella percezione del colore. Il motore segue la formula di luminanza relativa WCAG 2.x: ogni canale hex viene linearizzato dallo sRGB, la luminanza è pesata con i coefficienti standard 0,2126, 0,7152 e 0,0722, e il rapporto di contrasto è (L più chiara + 0,05) diviso (L più scura + 0,05). Le soglie non sono arrotondate: il testo normale richiede almeno 4,5 per AA e 7 per AAA; il testo grande richiede almeno 3 per AA e 4,5 per AAA. I risultati sono deterministici, senza chiamate di rete, campionamento o scorciatoie legate alla data. Lo usi gratis nel browser per revisioni di palette e design token, oppure chiami l'API a $0.002 per richiesta riuscita quando ha bisogno della stessa matrice in CI, sistemi di design o gate di accessibilità automatizzati.
Come si usa
Inserisci i dati nel modulo qui sopra. Lo strumento li controlla prima del calcolo e mostra il risultato nella stessa pagina.
Controlla i dati
Segui le etichette e le unità indicate per ogni campo. Se manca qualcosa o un valore non è ammesso, la pagina indica cosa correggere.
Ripeti il calcolo o automatizzalo
Usa lo strumento web per controlli singoli e l’API quando vuoi integrare la stessa capacità in un flusso automatizzato.
Casi d'uso
Ottieni subito una risposta
Inserisci una serie di valori e visualizza il risultato senza preparare un foglio di calcolo o uno script.
Confronta gli scenari
Modifica un valore alla volta e ripeti il calcolo per capire cosa cambia il risultato.
Automatizza le attività ripetute
Usa l’API quando lo stesso calcolo deve essere eseguito nel tuo prodotto o flusso.
Domande frequenti
Come si usa questa capacità?
Compila i campi qui sopra ed eseguila in questa pagina. Il modulo segnala i dati da correggere.
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/contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/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
{
"foreground": "#111827",
"background": "#ffffff"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.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. |