0
Shares
0
0
0
0

Als je op straat een willekeurige man tegen het lijft loopt, is de kans groter dat hij kleurenblind is, dan dat hij een Twitter-account heeft. Niet alleen omdat kleurenblinden te pas en te onpas door rood lopen, maar ook omdat er gewoon meer van zijn. Je website optimaliseren voor kleurenblinden kan dus zomaar voor een conversiestijging zorgen die in de procenten loopt.

Waarom zou je een website optimaliseren voor kleurenblinden? Je mag misschien niet zo denken, maar laten we eerlijk zijn: dat doe je toch. Alle politiek correcte idealen ten spijt, je website optimaliseren aanpassen kost tijd en geld. Bovendien, hoeveel kleurenblinden kent ons land nou helemaal? Tweehonderd? Driehonderd?

Mannen

Nou, tel daar nog maar wat bij op. Hoewel kleurenblindheid vooral een mannelijke aangelegenheid is (bij vrouwen komt het nagenoeg niet voor), is het er wel een waar maar liefst 8 procent van de mannen mee te kampen heeft. 8 procent! Dat betekent dat 1 op de 12 mannen kleurenblind is.

Voetbalelftal met kleurenblinde keeper.
Bij voetbal is dat zelfs 1 op 11. Foto: Wikimedia Commons

Of, om dat nog beter in perspectief te plaatsen, dat betekent dat er meer mannen met kleurenblindheid zijn dan met een:

  • Twitter-account (1 op 16)
  • Blackberry (marktaandeel: 1 op 29)
  • Mac-besturingssysteem (marktaandeel: 1 op 14)

Terwijl jij dus bezig bent met het implementeren van Tweet-buttons op je website, laat je wellicht veel traffic en conversie liggen omdat kleurenblinden er de weg niet kunnen vinden.

Hoe maak je je website kleurenblind-proof?

Er zijn drie soorten kleurenblindheid:

  • Protanopia: moeite met het onderscheiden van blauwe en groene, en rode en blauwe kleuren.
  • Deuteranopia: problemen bij het onderscheiden van vooral de kleuren rood en groen. Verreweg de meest voorkomende vorm van kleurenblindheid.
  • Tritanopia: moeite om de kleuren blauw en groen, en geel en violet uit elkaar te houden.

Albumcover Harry Connick - Blue Light
De aan protanopia lijdende Harry Connick was zo onder de indruk van zijn bezoek aan de Wallen dat hij er een plaat over schreef. Foto: Wikimedia Commons

Kleurenblinden zien dus niet alles in zwart-wit, maar hebben vaak moeite met het onderscheiden van bepaalde contrasten. Dat betekent natuurlijk niet dat je sommige kleuren niet meer mag gebruiken, maar het is wel beter om met een aantal zaken rekening te houden:

Leun niet te veel op de boodschap die een bepaalde kleur afgeeft

Ga er bij een webformulier bijvoorbeeld niet van uit dat alle bezoekers begrijpen wat je bedoelt als je verkeerd ingevulde velden rood maakt. Natuurlijk kan je dit nog steeds doen voor de mensen die deze kleur wél van groen kunnen onderscheiden, maar vul dit dan aan met een stuk tekst bij als ‘Een postcode moet uit minimaal vier cijfers en twee letters bestaan en mag geen spaties bevatten.’.

Gebruik kleurcontrasten die voor iedereen zichtbaar zijn

Plaats geen groene button tegen een blauwe achtergrond, om maar een voorbeeld te noemen. Houd er verder rekening mee dat niet iedereen kan zien waar de groene bestel- en de rode annuleerknop precies in elkaar overlopen. Plaats deze dus nooit te dicht op elkaar, of maak gebruik van andere kleuren.

I love the colorblind
En vergeet de mensen met deuteranopia niet af en toe een hart onder de riem te steken.

Testen

Hoe test je nou of je website geschikt is voor kleurenblinden? Je kan het vragen aan een kleurenblinde (grote kans dat minstens één van je collega’s dat is), maar je kan ook een van deze online tools gebruiken:

  • Chromanope: toont websites zoals ze er voor kleurenblinden uitzien. Werkt voor alle drie de soorten kleurenblindheid. De tool is soms wel erg traag.
  • Colblindor: upload afbeeldingen en bekijk hoe kleurenblinden ze zien.

Ken jij meer (online) tools waarmee je kan testen hoe kleurenblind-proof een website is? Of heb je andere aanvullende tips? Laat een reactie achter!

Foto homepage: TheConstructor

0 Shares:
Deel 0
Deel 0
Tweet 0
E-mail 0
Deel 0
Deel 0

Internetter van het eerste uur, html'de op zijn dertiende zijn eerste website in elkaar. Bleef ook in de jaren erna actief met het produceren van internetcontent. Eerst in zijn vrije tijd, later ook professioneel. Het produceren van content is nog steeds een groot deel van zijn werkzaamheden, maar daarnaast houdt hij zich ook bezig met gerelateerde zaken als pr en seo. Overigens werkte hij ook een tijd als redacteur van een aantal papieren kranten.

19 comments

  1. Goed verhaal. Echter 3 dingetjes; het aantal plugins doet er niet toe. Wel de compatibiliteit onderling van die plugins. Dat laat nogal eens te wensen over.

    Ook het feit dat veel plugins alleen werken wanneer het/de javascript ervan in de header wordt geladen i.p.v. in de footer doet veel af aan de snelheid.

    Tenslotte werken veel pluginscripts erg slecht wanneer tools als Total Cache en Minify geïnstalleerd zijn.

      1. onzin. Hier nog even een voorbeeld, waar ik net tegenaan loop. Een plugin die tot 2000ms bezig is om verbinding te maken met de site van de ontwikkelaar (waarom weet ik nog niet, maar daar kom ik wel achter ;-)) Zo zijn er nog veel meer plugins die dat gedrag vertonen.. dus los van de overhead, qua code/download, komen er vaak ook extra verbindingen bij.. zie:
        https://dl.dropboxusercontent.com/u/620272/Screen…
        https://dl.dropboxusercontent.com/u/620272/Screen…

        Geeft w.m.b. vooral aan dat je voorzichtig moet zijn met zomaar wéér een plugin erbij te installeren ;-)

    2. Durk, ja, jij met je 50 plugins..ghehe.. natuurlijk doet het aantal er wel toe, het verlengt de laadttijd van de site..

    3. de defer loading javascript is trouwens een goede opmerking Durk. Helaas heeft de auteur van die plugin dat 2 jaar geleden al toegezegd om daarin te voorzien, als optie. Maar helaas… dus dat moet je dan met houtje-touwtje omzeilen. Wel jammer.. scheelt aanzienlijk.

    4. Misschien goed om in dit kader onderscheid te maken tussen laadtijd en render tijd?
      Mijn inschatting is dat het aantal plugins nauwelijks effect heeft op de laadtijd – zeker als die scripts eerst gecomprimeerd worden.

      Maar voor de rendertijd zal het een heel ander verhaal wezen…

  2. Leuk artikel. Nog even wat extra aanvullingen voor de basis.

    Alvorens te optimaliseren is het belangrijk dat de basis (server) waarop de site draait in orde is.

    In de hostingwereld zijn er nogal wat prijsvechters actief die voor een paar euro per jaar hosting aanbieden. Omdat deze prijsvechters ook investeren en dit ook vaak de enige inkomstenbron is, moeten ze flink wat winst maken op die paar euro per jaar. Om deze winst te kunnen realiseren brengen ze zo veel mogelijk klanten onder op 1 server tegen zo laag mogelijke kosten, (hardware) in een goedkoop datacenter, welke vaak niet beschikt over een snel netwerk (lees: veel hops).

    Resultaat is dat u de hardware en netwerkverbinding van deze server moet delen met een groot aantal andere klanten (vaak meer dan 200 andere klanten). Als één of meerdere van deze klanten de bronnen (geheugen, harddisk, etc.) van deze server leeg trekken, hebben alle overige klanten op dezelfde server hier last van. Resultaat, trage website.

    Investeer in een stukje kwalitatieve hosting.

    Remember: if you pay with peanuts you get monkeys..;)

  3. @ Eric: Thanks voor de tip, ik zal dat stukje later nog even toevoegen.
    @ Durk: Bedankt! Ik zal je opmerkingen meenemen en het artikel aanpassen.

  4. Op zich een goede tip! Al zou ik W3total cache niet zomaar aanraden aan beginners. Deze plugin kan ook véél problemen opleveren.. vooral als je iets complexere thema's gebruikt, en andere plugins.

    Een veroorzaker van veel conflicten, vooral als je het uiterste eruit probeert te halen via browser-caching opties en minify vooral!. Dan is WP-Super-Cache een veiliger (wellicht iets minder accelererend) alternatief. Mijn 3 centen (ik gebruik de plugin overigens zelf wel, op een flink aantal sites..). De beste performance verbetering haal je trouwens door: Dedicated server te draaien, je apache.conf te optimiliseren, zo ook voor mysql en door een CDN te gebruiken. (bijv. Amazon).

    Andere tip is, en nog gratis ook, installeer the New Relic agent. Kun je zelf in de achtergrond de performance monitorren. Google pagespeed is niet bepaald altijd indicatief genoeg voor bottle-necks.

    1. Voor sommigen is een goede VPS (RAID 10 opstelling) vaker een betere (lees: betaalbaardere optie) dan een GOEDE dedicated server…;)

  7. Nog steeds; het blijft afhangen hoe goed of hoe slecht een script geschreven is. Een goed script laat snel in en heeft geen effect op zowel laden, render of andere plugins. Da's gewoon een feit. Ik heb van sites gehoord die 100+ plugins hadden maar als een jekko downloaden.

    Helaas valt die van mij daar inderdaad niet onder, met m'n 105 plugins ;-(, maar ik durf niks weg te gooien in verband met 2300 posts. Ik bedoel; er zal een post tussen zitten die 't ineens niet meer doet ;-)

  8. Ik wist niet eens dat er een render bestond, joh. Ik ken alleen maar het fenomeen laden. Een site staat in m'n browser of hij staat er niet. ;-)

  9. Welke plugin gebruik je hiervoor, Pim? Ik had een hele goeie plugintester maar die doet 't sinds kort niet meer; P3.

    Ik zoek nog een nieuwe.

  11. Fantastic beat ! I wish to apprentice while you amend your site, how could i
    subscribe for a blog web site? The account aided me
    a acceptable deal. I had been a little bit acquainted of this your broadcast
    provided bright clear concept

    my page … verificare domenii

Comments are closed.

Dit artikel is 82.860 keer gelezen
— Previous article

Eindelijk een billboard waar de mensheid echt iets aan heeft

Next article —

Android App: Sparky Lock Screen Lite