Che cos'è il testo grande?

18pt+ (24px) peso regolare, o 14pt+ (18.66px) audace. La maggior parte degli elementi h1/h2 si qualificano.

E gli elementi non-text UI?

WCAG 2.1 richiede il contrasto 3:1 per i componenti dell'interfaccia utente (confine del pulsante, contorni del campo di forma) e icone significative. Il distintivo AA Large lo approssima.

Controllo contrasto di colore (WCAG)

Scegli un primo piano e un colore di sfondo e visualizza immediatamente il rapporto di contrasto WCAG 2.1 con i badge passa/faccia per AA e AAA, testo normale e grande. Include un'anteprima dal vivo.

Foreground (text)

Background

Contrast ratio

21.0:1

AA Normal

—

≥ 4.5:1

AA Large

—

≥ 3:1

AAA Normal

—

≥ 7:1

AAA Large

—

≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Was this tool helpful?

Send output to:

How to use Color Contrast Checker

Scegli il primo piano e i colori di sfondo.
Leggi il rapporto di contrasto e passa/tassi.
Utilizzare Swap o Invert FG per testare alternati.

Che cos'e'?

WCAG 2.1 definisce i minimi di contrasto per il testo leggibile: 4.5:1 per il testo normale (AA), 3:1 per il testo grande (AA), 7:1 per il normale (AAA), 4.5:1 per il grande (AAA). Grande testo è definito come 18pt+ o 14pt+ grassetto. Questo strumento calcola il rapporto utilizzando la formula relativa-luminanza dal WCAG spec

FAQ

Che cos'è il testo grande?: 18pt+ (24px) peso regolare, o 14pt+ (18.66px) audace. La maggior parte degli elementi h1/h2 si qualificano.
E gli elementi non-text UI?: WCAG 2.1 richiede il contrasto 3:1 per i componenti dell'interfaccia utente (confine del pulsante, contorni del campo di forma) e icone significative. Il distintivo AA Large lo approssima.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Color Contrast Checker on Wikipedia·Developer Tools on Wikipedia·Color Contrast Checker on Britannica

People also use

← Back to Developer Tools · All tags

Controllo contrasto di colore (WCAG)

Something went wrong

How to use Color Contrast Checker

Che cos'e'?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts