# Verifica contrasto colori

https://rankproof.eu/it/tools/compliance-color-contrast

## Risposta breve

Controlla i rapporti di contrasto colore testo-sfondo rispetto agli standard WCAG AA/AAA.

## Cosa fa

Calcola il rapporto di contrasto WCAG tra qualsiasi colore di primo piano e di sfondo che inserisci, usando la stessa formula di luminanza relativa della specifica WCAG, e lo confronta con le soglie AA e AAA per testo normale e grande (4.5:1 / 3:1 per AA, 7:1 / 4.5:1 per AAA). Mostra un'anteprima live del testo nei tuoi colori insieme a un badge di superamento/fallimento per ogni soglia.

## Come funziona

1. Inserisci o scegli un colore di primo piano (testo) e un colore di sfondo
2. Calcoliamo il rapporto di contrasto di luminanza relativa WCAG tra i due colori
3. Confrontiamo il rapporto con le soglie AA e AAA per testo normale e grande
4. Vedi un'anteprima live del tuo testo sul tuo sfondo più un badge di superamento o fallimento per ogni soglia

## Esempio di input e output

INPUT

```text
foreground: #767676
background: #ffffff
```

OUTPUT

```text
rapporto di contrasto: 4.54:1

AA testo normale (4.5:1)    PASS
AA testo grande (3:1)       PASS
AAA testo normale (7:1)     FAIL
AAA testo grande (4.5:1)    PASS
```

## Perché è importante

Il testo a basso contrasto è il problema di accessibilità rilevato automaticamente più comune sulle home page nel report annuale Million di WebAIM, ed è uno dei più facili da correggere con un cambio di colore. Il criterio di successo WCAG 2.1 1.4.3 stabilisce i rapporti minimi, e EN 301 549 — lo standard alla base dell'European Accessibility Act — li applica ai contenuti web.

## Chi lo usa

- **Designer**: Convalida la palette dei colori del brand rispetto alle WCAG prima di finalizzarla. Molti pastelli "moderni" falliscono il 4.5:1 su sfondo bianco — meglio scoprirlo prima di applicarli a tutto il brand.
- **Auditor di accessibilità**: Controlla ogni coppia di colore testo e sfondo rispetto alle soglie AA e AAA prima di firmare la dichiarazione Annex V dell'EAA di un cliente.
- **Sviluppatore frontend**: Individua le regressioni di contrasto introdotte dalle modifiche al tema tramite variabili CSS prima che raggiungano la produzione.

## Domande frequenti

### Di quale rapporto WCAG ho bisogno?

4.5:1 per il testo normale, 3:1 per il testo grande (≥18pt o ≥14pt in grassetto) e i componenti dell'interfaccia. WCAG 2.1 AAA richiede 7:1 — un livello più alto a cui la maggior parte dei brand non punta.

### Controlla immagini e icone?

Solo il contrasto del testo, e solo per i due colori che inserisci qui. Il contrasto delle immagini (ad es. banner hero con testo sull'immagine) richiede una revisione manuale — non c'è una scansione automatica della pagina.

### Quale contrasto richiede l'EAA?

Per i contenuti web, EN 301 549 v3.2.1 applica le WCAG 2.1 livello AA, incluso il criterio 1.4.3 — quindi il testo ha bisogno di almeno 4.5:1 rispetto allo sfondo (3:1 per il testo grande). Controlla ogni coppia usata dal tuo sito.

## Strumenti correlati in Conformità EAA

- [Verifica accessibilità](https://rankproof.eu/it/tools/compliance-wcag-scanner)
- [Generatore di dichiarazione di accessibilità](https://rankproof.eu/it/tools/compliance-accessibility-statement-generator)