ForHosting KIT · Lettura e monitoraggio di siti web

Verificare il contrasto dei colori

Questo strumento confronta un colore in primo piano con uno di sfondo applicando la formula della luminanza relativa WCAG.

● BetaGratis · nel tuo browser

Esegui gratis nel browser Vedi l'API

Usalo da WebAPIEmailTelegramApp presto

Inserisca colori esadecimali di tre o sei cifre per ottenere il rapporto di contrasto e risultati chiari per AA e AAA, sia sul testo normale sia su quello grande. È utile per controllare componenti, documentare scelte di accessibilità e individuare abbinamenti illeggibili prima della pubblicazione.

Interpreti correttamente il risultato

Il rapporto restituito descrive la differenza di luminanza relativa tra il colore più chiaro e quello più scuro. 1:1 indica luminanze identiche, mentre 21:1 è il massimo possibile tra nero e bianco. WCAG usa soglie diverse perché un testo grande o più marcato rimane leggibile con meno contrasto. AA richiede almeno 4.5:1 per il testo normale e 3:1 per quello grande; AAA porta i limiti a 7:1 e 4.5:1. La risposta valuta ogni requisito separatamente. Per WCAG, un testo è grande da 18 punti, oppure da 14 punti se in grassetto. Non arrotondi verso l’alto quando stabilisce la conformità: il rapporto appare con due decimali, ma ogni esito usa il calcolo completo, così una combinazione appena sotto la soglia non viene promossa per effetto della visualizzazione.

Scelga il primo piano e lo sfondo effettivi

Verifichi i colori realmente percepiti, non soltanto due campioni vicini nella tavolozza. Nel testo corrente, il primo piano è il colore renderizzato dei caratteri e lo sfondo è il colore uniforme finale alle loro spalle. Controlli i collegamenti negli stati normale, visitato, passaggio, focus e disabilitato quando comunicano ancora informazioni. Includa pulsanti, badge, avvisi, moduli, grafici e navigazione. Lo strumento accetta colori opachi #RGB o #RRGGBB. Con trasparenze, gradienti, immagini, ombre o metodi di fusione, ricavi prima i colori renderizzati nel punto esaminato. Su uno sfondo variabile scelga l’area con contrasto minimo. Visibilità del focus, contrasto non testuale e alternative all’uso esclusivo del colore richiedono comunque controlli distinti.

Inserisca il controllo nel flusso di lavoro

Misuri il contrasto già in fase di progettazione, quando cambiare un token o un componente è semplice, e ripeta la prova dopo modifiche a temi o colori del marchio. I designer possono confrontare le alternative prima della consegna; gli sviluppatori possono richiamare lo stesso calcolo deterministico nei test e archiviare gli indicatori con le istantanee del componente. Un audit valido confronta ogni colore semantico di primo piano con tutti gli sfondi consentiti, non solo con una composizione dimostrativa. Registri dimensione e peso del testo: una coppia idonea per testo grande può fallire sulle etichette normali. L’API costa $0.002 per richiesta, mentre l’esecutore nel browser serve per controlli immediati. I colori non validi vengono rifiutati, facendo emergere cifre errate, alfa e nomi CSS prima che alterino un rapporto.

Casi d'uso

Controllare una consegna grafica

Confermi che i colori proposti per testo e superfici rispettino il livello WCAG previsto prima dell’implementazione.

Verificare i token di design

Provi ogni token semantico in primo piano su tutti gli sfondi ammessi dal sistema di componenti.

Proteggere una pubblicazione

Richiami il controllo deterministico nei test e blocchi le modifiche che riducono il contrasto richiesto.

Domande frequenti

Quali formati di colore sono accettati?

Usi la notazione esadecimale opaca #RGB o #RRGGBB. Nomi CSS, canali alfa, funzioni rgb(), gradienti e valori errati vengono rifiutati.

Quali sono le soglie WCAG AA?

AA richiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande.

Quali sono le soglie WCAG AAA?

AAA richiede almeno 7:1 per il testo normale e 4.5:1 per il testo grande.

Perché un rapporto mostrato sulla soglia può fallire?

La visualizzazione usa due decimali, ma la decisione mantiene la precisione completa e non promuove un valore insufficiente.

Invertire primo piano e sfondo cambia il rapporto?

No. La formula confronta le luminanze chiara e scura, quindi invertire due colori opachi conserva rapporto ed esiti.

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

POSThttps://api.kit.forhosting.com/web/color-contrast-check

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/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-contrast-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"foreground":"#1a1a1a","background":"#ffffff"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-check", 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": "#1a1a1a",
  "background": "#ffffff"
}

Esempio di risposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_contrast_check",
  "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

per richiesta$0.002

Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.

Limiti

`timeout_sec`	30
`max_crawl_pages`	25

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.

Leggi la documentazione completa del KIT →