Verifica contrasto

Incolla un colore di primo piano e uno di sfondo (o preleva da uno screenshot); ottieni il rapporto di contrasto e quali livelli WCAG supera. WCAG 2.1 AA è la base legale di accessibilità nella maggior parte delle giurisdizioni; AAA è lo standard superiore raccomandato per i contenuti critici.

Le soglie

• WCAG AA, testo normale: minimo 4.5:1.
• WCAG AA, testo grande (18pt+ o 14pt+ grassetto): minimo 3:1.
• WCAG AAA, testo normale: minimo 7:1.
• WCAG AAA, testo grande: minimo 4.5:1.
• Componenti UI non testuali (pulsanti, bordi di moduli): minimo 3:1 (WCAG 2.1+).

Perché il contrasto è importante

Il testo a basso contrasto è illeggibile per utenti con ipovisione (circa il 4% della popolazione), utenti sotto luce solare intensa, su monitor economici e occhi che invecchiano (tutti, prima o poi). Molti sistemi di design usano grigio su grigio perché sembra elegante su un display 5K calibrato del designer — ma è illeggibile altrove.

Non superare WCAG AA è anche perseguibile legalmente negli USA (ADA Titolo III), UE (EAA) e molte altre giurisdizioni. Assicurazione a buon mercato: controlla ogni coppia testo/sfondo prima di pubblicare.

Cosa riportiamo

1. Rapporto di contrasto come numero (es. 4.71:1).
2. Superato/non superato per ogni livello WCAG e dimensione del testo.
3. Correzioni suggerite: il colore di primo piano più scuro o sfondo più chiaro che superi la soglia.
4. Anteprima dal vivo con testo campione nella coppia di colori.

Abbinalo al simulatore daltonismo

Contrasto e daltonismo sono assi di accessibilità diversi. Esegui Simulatore daltonismo sulla stessa UI per verificare che funzioni anche per utenti con CVD.