Controllo Contrasto Link

Verificatore contrasto link

Assicurati che i tuoi link siano ben visibili e facili da identificare. Testa stili, colori e sottolineature per soddisfare le linee guida sull’accessibilità.

Colore del testo

Colore di sfondo

Stile dei contenuti

Sottolineatura del link

Link in grassetto

Testo più grande

Colore del link

WCAG

AA: Conforme AAA: Conforme

Rapporto di contrasto

Link rispetto al testo

8.42 Sehr gut

Link rispetto allo sfondo

8.42 Very good

Testo rispetto allo sfondo

8.42 Very good

Das Navigieren durch Online-Inhalte sollte mühelos sein. Sicherzustellen, dass wichtige Links hervorgehoben sind, hilft Nutzern, schneller das Gesuchte zu finden.

Schwacher Kontrast kann dazu führen, dass kritische Informationen schwer erkennbar sind – das frustriert. Links sollten immer klar sichtbar sein, ob im Text oder alleinstehend.

Sie brauchen Hilfe? Sehen Sie sich unsere Best Practices für Link-Kontraste an, um Lesbarkeit und Zugänglichkeit zu verbessern.

Sehr guter Kontrast – empfohlen von Barrierefreiheits-Experten.

Conformità WCAG per i link

Garantire il giusto contrasto dei link è essenziale per la leggibilità e l’accessibilità. Diversi fattori influenzano la conformità: contrasto tra sfondo e testo, sfondo e link, e la distinzione tramite grassetto o sottolineatura.

Requisiti sul rapporto di contrasto

Link autonomi – 4.5:1 rispetto allo sfondo

Links that appear on their own (e.g., navigation menus, buttons, or isolated links) must have at least a 4.5:1 contrast ratio against the background.
This ensures they are clearly visible even without additional styling like underlines or bold formatting.

Link in linea – 3:1 rispetto al testo circostante (se si usa solo il colore)

When links appear within a block of text and are only differentiated by color, the contrast ratio must be at least 3:1 against surrounding text to ensure readability for users with color vision deficiencies.
If links use bold styling in addition to color, the contrast requirement applies between the link and the background, not the surrounding text.
If links are underlined, they only need to be a different color from the surrounding text, without a specific contrast ratio requirement, as long as the text and background contrast requirements are met.

Scansione gratuita dell’accessibilità del sito

Verifica più del solo contrasto: analizza subito il tuo sito per eventuali problemi di conformità WCAG.

Avvia scansione gratuita

Errori comuni nei link relativi al contrasto

Un link può sembrare visibile, ma un contrasto basso può renderlo difficile da distinguere, soprattutto per chi ha problemi visivi. Il contrasto minimo contro lo sfondo è 4.5:1. Se si usa solo il colore per distinguerlo, il link deve avere almeno 3:1 rispetto al testo circostante.
Il grassetto migliora la leggibilità ma non sostituisce i requisiti di contrasto. Anche i link in grassetto devono avere almeno un rapporto di 3:1 rispetto al testo circostante.
Le sottolineature aiutano, ma se il link usa solo il colore per differenziarsi, deve avere un contrasto di almeno 4.5:1 rispetto al testo intorno. In alternativa, usa sia il colore sia lo stile per distinguerli.
Gli stati hover non devono ridurre la visibilità. Se il colore cambia con hover o focus, assicurati che il contrasto rimanga alto anche durante l’interazione.
Un design leggibile in ambienti luminosi può diventare difficile da leggere in condizioni di scarsa luce. Assicurati che il testo sia leggibile in tutte le condizioni.

Grazie per il tuo feedback 😊

Il team di tabnav tiene molto al tuo feedback e lavora continuamente per migliorarsi.