Een screenshot in je documentatie. Met een rode cirkel om het knopje dat je moet klikken.
Rood op een lichte achtergrond. Ziet er duidelijk uit, toch?
Niet per se. Dat hangt af van welk rood. En welke achtergrond.
Een dunne rode cirkel (#FF0000) op een witte achtergrond heeft een contrast van 4:1. Dat is voldoende. Maar op een lichtgrijze achtergrond kan het al zakken naar 2,5:1.
En geel? Een gele markering op een lichte screenshot? Contrast vaak onder de 2:1. Helemaal onzichtbaar voor iemand met verminderd gezichtsvermogen.
Dit speelt bij:
- Handleidingen en tutorials met geannoteerde screenshots
- Supportdocumentatie met markeringen
- Presentaties en trainingsmateriaal
- Bug reports met visuele annotaties
Twee oplossingen:
Gebruik donkere kleuren met voldoende dikte:
- Donkerrood (#C62828) in plaats van felrood
- Dikke lijn (3px+) in plaats van 1px
- Eventueel een witte schaduw of rand om de markering
Combineer de visuele markering met tekst:
- Pijl met label: “Klik hier”
- Nummering: stap 1, stap 2, stap 3
- Tekstuele beschrijving naast de screenshot
De annotaties op je screenshots zijn informatieve grafische elementen. Ze moeten 3:1 contrasteren met hun directe achtergrond.
