Linkteksten zichtbaar maken zonder kleur alleen

Een bezoeker moet een link kunnen herkennen op meer manieren dan één. Kleur is een zwak signaal: wie kleurenblind is, een scherm in felle zon gebruikt of een zwart-wit modus aanzet, ziet het verschil mogelijk niet. Daarom combineer je kleur met een tweede aanwijzing, zoals een onderstreping.

De Web Accessibility Initiative van het W3C biedt tutorials met praktische richtlijnen om content toegankelijk te maken, gebaseerd op succescriteria en technieken uit WCAG 2 (W3C WAI-tutorials). Dat geeft je een betrouwbare referentie. De tutorials zijn best-practice richtlijnen; ze vervangen geen volledige beoordeling en maken geen certificering mogelijk. Gebruik ze als maatstaf, niet als garantie.

Begin met een snelle visuele proef. Dit is een testprocedure die je met je eigen website kan uitvoeren.

1. Open een representatieve pagina met doorlopende tekst en links erin.
2. Zet je scherm of browser in grijstinten. Hoe je dat doet, hangt af van je toestel; zoek de instelling in je eigen systeem.
3. Lees een paragraaf en kijk: zie je zonder kleur welke woorden een link zijn?
4. Herhaal dit voor links in menu's, knoppen en voettekst, want die hebben vaak een andere vormgeving dan links in lopende tekst.
5. Noteer elke plaats waar je twijfelt.

Een link in lopende tekst die alleen via kleur opvalt, krijgt het beste een onderstreping of een ander visueel kenmerk dat niet van kleur afhangt. Voor menu's en knoppen kan de plaats, vorm of rand al een duidelijk signaal zijn. Beoordeel dat per element.

Naast de herkenning telt het contrast tussen tekst en achtergrond, en tussen linktekst en omringende tekst. Meet dat met een contrasttool naar keuze. Welke tool je gebruikt en welke drempelwaarde je hanteert, controleer je in de actuele WCAG-documentatie; de bronnen bij dit artikel noemen geen exacte getallen, dus die vermeld ik hier niet.

Werk zo:

• Meet de linkkleur tegen de achtergrond.
• Meet de linkkleur tegen de kleur van de omringende lopende tekst, voor links die alleen via kleur verschillen.
• Test ook de staat bij muisaanwijzing en na een bezoek.
• Test op een echt scherm en niet alleen op een stalen kleurenkaart, want weergave verschilt per toestel.

Noteer de gemeten waarden naast de paginanaam. Zo heb je een voor-en-na vergelijking als je de stijl aanpast.

Wie met het toetsenbord navigeert, ziet alleen aan de focusstaat waar hij zich bevindt. Test dit zelf: druk herhaald op de tab-toets en volg de focus door de pagina.

Gebruik deze beslisregels als checklist:

• Is op elk moment duidelijk welk element de focus heeft?
• Valt de focusmarkering ook op zonder kleur, bijvoorbeeld via een dikke rand of een omlijning?
• Verdwijnt de focus nergens onder een vaste kop of een venster dat de link bedekt?
• Volgt de tabvolgorde de leesvolgorde?
• Werkt een link ook met de enter-toets?

Als je merkt dat de browserstandaard is uitgeschakeld in je stijlen, vervang je die door een eigen, goed zichtbare markering en test je opnieuw. Zet dus nooit de omlijning uit zonder alternatief.

Gebruik de tabel om te beslissen wat je aanpast.

Een fictief scenario: een denkbeeldig bedrijf heeft een dienstenpagina waarbij de links in lopende tekst alleen blauw zijn. De invoer is die ene pagina. De verwachte controles zijn: grijstinten-test, contrastmeting, tabtest en een controle van de hover- en bezocht-staat. Of dit tot meer klikken of betere vindbaarheid leidt, kan ik niet voorspellen en dat is niet het doel; het doel is dat elke bezoeker de links kan herkennen. Heb je twijfels over de impact van stijlwijzigingen op laadtijd, meet dat dan zelf voor en na de wijziging; algemene achtergrond vind je in de cursus over webperformantie, die niets specifieks over linkstijlen zegt.

Leg na de aanpassing vast wat je veranderde, op welke pagina's en met welke testtoestellen en browsers. Dat vormt de overdracht voor wie de stijlen later wijzigt, en voorkomt dat een nieuw thema de onderstreping stilletjes verwijdert.

Let op de grenzen. Deze gids beschrijft een eigen controle, geen toegankelijkheidscertificering en geen juridisch advies. Instellingen in je websitebouwer of thema kunnen verschillen; controleer waar je stijlen beheert in je eigen systeem. Wil je zien welke zichtbare signalen je website publiek toont, bekijk die dan met Marketing Scan. Een publieke scan meet zichtbare signalen en bewijst geen volledige technische implementatie.