Een alinea tekst. Ergens in die tekst staat een link. Geen onderstreping. Alleen een andere kleur.
De vraag is: welke kleur?
Als je linktekst blauw (#6699CC) is op een witte achtergrond, heb je een contrast van 3,0:1 met de achtergrond. Dat klinkt acceptabel — maar er is een tweede eis.
De link moet ook voldoende contrasteren met de omringende tekst. Als je tekst zwart is (#000000) en je link blauw (#6699CC), moet het contrast tussen die twee kleuren minimaal 3:1 zijn. Anders kan iemand met kleurenblindheid het verschil niet zien.
Twee eisen tegelijk:
- Link vs. achtergrond: minimaal 4,5:1
- Link vs. omringende tekst: minimaal 3:1
Dat is een smal paadje. En veel kleurcombinaties vallen eraf.
De simpelste oplossing: onderstreep je links gewoon.
/* Problematisch: link alleen door kleur herkenbaar */
a { color: #6699CC; text-decoration: none; }
/* Veilig: duidelijk contrast én onderstreping */
a { color: #2056A5; text-decoration: underline; }
Met een onderstreping is kleur niet meer de enige indicator. Dan hoef je alleen nog de 4,5:1 met de achtergrond te halen.
Waarom vermijden designers onderstreping? Omdat het “rommelig” zou zijn. Maar wat rommeliger is: een pagina vol tekst waar niemand kan zien wat klikbaar is.
