ForHosting KIT · Verifiche e controlli

Verificare il contrasto dei colori

Due colori possono sembrare leggibili su uno schermo e restare comunque sotto il contrasto richiesto per un testo accessibile. Inserisca primo piano e sfondo per conoscere il rapporto esatto e gli esiti WCAG distinti per dimensione.

● BetaGratis · nel tuo browser

Esegui gratis nel browser Vedi l'API

Usalo da WebAPIEmailApp prestoTelegram presto

Una misura al posto dell’impressione visiva

La luminosità dello schermo, il peso del carattere, la luce della stanza e i colori vicini cambiano il modo in cui una stessa coppia viene percepita. Approvare un testo soltanto perché appare chiaro sul monitor di chi prepara il progetto non è quindi una verifica affidabile. Lo strumento converte entrambe le tinte in sRGB, calcola la luminanza relativa e applica la formula WCAG tra il valore più chiaro e quello più scuro. Il risultato comprende un rapporto numerico e quattro esiti: AA e AAA per il testo normale, poi AA e AAA per il testo grande. Un titolo può superare il controllo mentre un paragrafo piccolo non lo supera.

Valori copiati direttamente dal progetto

Può inserire un HEX di tre o sei cifre, una funzione rgb() con tre canali oppure hsl() con saturazione e luminosità in percentuale. La risposta normalizza ogni colore in HEX a sei cifre e RGB, così Lei può confrontare una variabile CSS con un token del sistema grafico o conservare un esito riproducibile nella revisione. Il canale alfa è escluso intenzionalmente: il colore visibile di una tinta trasparente dipende da tutti gli strati sottostanti. Prima componga la trasparenza sullo sfondo definitivo, quindi controlli la coppia opaca che l’utente vedrà davvero.

Come leggere la matrice senza estenderne il significato

Un esito positivo descrive soltanto la relazione fra questi due colori pieni. Non misura dimensione e peso effettivi del carattere, sfumature, immagini, testo su video, stati al passaggio del puntatore, focus da tastiera o struttura semantica della pagina. Controlli separatamente ogni stato importante del componente quando cambia la coppia cromatica. Nel browser il calcolo avviene in locale ed è utile per una verifica rapida della palette. Per controllare automaticamente i token durante l’integrazione, invii gli stessi due campi all’API: riceverà lo stesso identico oggetto strutturato, pronto per essere confrontato con la regola del Suo prodotto.

Casi d'uso

Revisione dei token grafici

Controlli testo e superfici prima di pubblicare una palette, distinguendo il corpo dai titoli di grandi dimensioni.

Qualità degli stati di un componente

Verifichi gli stati normale, selezionato, errore e focus senza dipendere dalla resa di un solo schermo.

Regola automatica prima della distribuzione

Chiami l’API dall’integrazione continua per rifiutare una coppia sotto la soglia WCAG richiesta dal prodotto.

Domande frequenti

Quali formati di colore sono accettati?

HEX di tre o sei cifre, rgb() con tre canali e hsl() con percentuali di saturazione e luminosità. Nomi dei colori e canale alfa non sono ammessi.

Che cosa indicano AA e AAA nel risultato?

Sono livelli di conformità WCAG. Compaiono separatamente per testo normale e grande perché il contrasto richiesto non è lo stesso.

Il controllo del contrasto è gratuito?

Lo strumento su questa pagina funziona gratis nel browser del computer o del telefono. Tramite API, ogni richiesta riuscita costa $0.002 e usa il saldo prepagato KIT.

L’applicazione mobile nativa esegue lo strumento gratuito?

No. L’applicazione nativa chiama l’API e mostra il prezzo della relativa attività. Apra questa pagina nel browser mobile per usare il calcolo locale.

Questo risultato dimostra che tutta la pagina rispetta WCAG?

No. Verifica una sola coppia opaca. Una revisione completa comprende anche tipografia, tastiera, etichette, immagini, stati e altri requisiti di accessibilità.

Perché i colori trasparenti vengono rifiutati?

La tinta visibile dipende dagli strati sottostanti. Componga prima la trasparenza sullo sfondo finale, poi verifichi i due colori opachi risultanti.

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/verify/color-contrast

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/verify/color-contrast \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/verify/color-contrast", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/verify/color-contrast",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/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

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

Esempio di risposta

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

per richiesta$0.002

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

Limiti

max_color_chars 100

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 →

Esegui gratis nel browser