Logo XTools
XTools

Controllo del contrasto

Controlla il contrasto tra testo e sfondo rispetto a WCAG AA e AAA
  • I file non lasciano il dispositivo
  • Funziona nel browser
  • Gratis, senza account, senza filigrana

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Come usare Controllo del contrasto

Controlla una coppia di colore del testo e dello sfondo rispetto a WCAG 2 (AA e AAA per testo normale, testo grande e componenti dell'interfaccia) e vedi il contrasto di luminosità APCA della bozza WCAG 3. Quando una coppia non passa, suggerisce i colori più vicini che passano.

  1. 1

    Inserisci il Colore del testo e il Colore di sfondo come HEX, rgb(), hsl(), oklch() o un nome di colore, oppure fai clic su un campione per aprire il selettore colore.

  2. 2

    Leggi il Rapporto di contrasto e il risultato Supera o Non supera per ogni controllo AA e AAA.

  3. 3

    Guarda l'Anteprima, digita il tuo Testo di esempio e usa Scambia i colori per provare l'inverso.

  4. 4

    Sotto Colori più vicini che superano, fai clic su Applica su un suggerimento Regola il testo o Regola lo sfondo per AA (4.5:1) o AAA (7:1).

  5. 5

    Appena cambi un colore, l'URL della pagina tiene entrambi i colori, così puoi copiarlo per condividere il risultato.

Domande frequenti

Quale rapporto di contrasto mi serve?

WCAG AA chiede 4.5:1 per il testo normale e 3:1 per il testo grande (da 24px in su, o 18,66px in grassetto) e per i componenti dell'interfaccia come icone e bordi dei campi. AAA chiede 7:1 e 4.5:1.

Perché 4.497:1 viene mostrato come 4.49 invece di 4.50?

Il rapporto non viene mai arrotondato per eccesso oltre una soglia, così una coppia che manca di poco 4.5:1 non sembra superarla.

Posso provare un testo semitrasparente?

Sì. Usa il cursore Opacità del testo; il testo traslucido viene fuso sullo sfondo prima di misurare il rapporto.

Cos'è il numero APCA?

APCA arriva dalla bozza WCAG 3 e dà un contrasto di luminosità (Lc) che dipende da quale colore è il testo; i valori negativi significano testo chiaro su sfondo scuro. È ancora una bozza, quindi i rapporti WCAG 2 restano l'obiettivo di conformità abituale.

Come vengono scelti i colori suggeriti?

Viene cambiata solo la luminosità (in OKLCH), così tinta e carattere del colore restano gli stessi. Se nessuna delle due direzioni raggiunge l'obiettivo, dice Non raggiungibile cambiando solo la luminosità; prova a regolare l'altro colore.