colorize
ColorKit
CK

Verificatore di Contrasto Colori

Verifica le combinazioni di colori per testo e sfondo per assicurare il rispetto delle linee guida di accessibilità WCAG.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

A cosa serve il verificatore di contrasto?

Questo strumento calcola il rapporto matematico tra colore di testo e sfondo per verificare la leggibilità secondo le Web Content Accessibility Guidelines (WCAG 2.2).

A chi è rivolto lo strumento?

Progettato per designer UI/UX, sviluppatori frontend e revisori dell'accessibilità impegnati a creare interfacce inclusive e conformi alla legge.

Requisiti WCAG AA e AAA

  • WCAG AA (Testo normale): Richiede un rapporto minimo di 4.5:1.
  • WCAG AA (Testo grande): Richiede almeno 3.0:1 per 18pt o 14pt grassetto.
  • WCAG AAA (Standard massimo): Richiede 7.0:1 per il testo standard.
Knowledge Base & FAQ

Domande Frequenti (FAQ)

Risposte dirette e soluzioni a dubbi comuni, sfide tecniche e standard di settore.

Qual è il rapporto di contrasto minimo legale per il testo web secondo le WCAG?expand_more
Secondo lo standard WCAG 2.1 / 2.2 Livello AA (il punto di riferimento legale per l'accessibilità digitale):
  • Testo normale (< 18pt o 14pt grassetto): Deve raggiungere almeno un rapporto di contrasto di 4.5:1 rispetto allo sfondo.
  • Testo grande (≥ 18pt normale o 14pt grassetto): Richiede almeno un rapporto di 3.0:1.
  • Componenti grafici e dell'interfaccia: Bordi dei campi di input e icone interattive devono raggiungere almeno 3.0:1.
Qual è la differenza tra i livelli di conformità WCAG AA e AAA?expand_more
Il livello WCAG AA è lo standard legale globale obbligatorio per l'e-commerce, le banche e la pubblica amministrazione (4.5:1 per il testo di lettura). Il livello WCAG AAA è il livello di eccellenza superiore raccomandato per i portali sanitari e per utenti anziani, richiedendo un rapporto di 7.0:1 per il testo normale e 4.5:1 per i titoli.
Perché i testi segnaposto (placeholder) nei form falliscono spesso i controlli di accessibilità?expand_more
Il colore grigio predefinito dai browser (come #9CA3AF su sfondo bianco) offre spesso un contrasto insufficiente di soli 2.0:1 - 2.5:1. Buona pratica: non utilizzare il placeholder come unica etichetta, inserire sempre elementi <label> espliciti e applicare stili CSS con contrasto sufficiente.
In che modo la formula W3C calcola la luminanza relativa?expand_more
La luminanza relativa (L) misura la luminosità percepita normalizzata da 0.0 (nero puro) a 1.0 (bianco massimo). Poiché l'occhio umano è più sensibile alla luce verde, i canali lineari sRGB vengono ponderati con la formula: 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
Il rapporto finale si calcola come (L1 + 0.05) / (L2 + 0.05).
Si può usare testo bianco su pulsanti giallo puro (#FFFF00) o ciano (#00FFFF)?expand_more
No. Il giallo puro e il ciano possiedono una luminanza intrinseca altissima. L'abbinamento con testo bianco genera un rapporto di appena 1.07:1 - 1.25:1, rendendo il testo invisibile sotto luce naturale. Utilizzando testo scuro (#0F172A), il rapporto sale a 16.8:1, superando brillantemente sia AA che AAA.