Hoogkleurcontrast gebruiken voor meer toegankelijk ontwerp
Een hoog bouncepercentage wordt vaak veroorzaakt door de slechte visuele toegankelijkheid van een website. Wanneer lettertypen te klein zijn, of ze zijn nauwelijks leesbaar, wanneer er te veel afleiding is of niet genoeg witruimte, veel mensen gewoon verlaat de site zonder een moment na te denken.
Een van de meest voorkomende redenen voor vroege stopzetting is de slecht gekozen kleurenschema's die de leesbaarheid verminderen van de inhoud.
Volgens de statistieken van de WHO zijn er wereldwijd ongeveer 285 miljoen mensen met een visuele beperking, van wie velen gedeeltelijk of volledig kleurenblind zijn. Mensen met een visuele handicap zien de kleuren anders, dus een laag kleurcontrast vermijden in onze ontwerpen is onvermijdelijk als we onze klanten een toegankelijke en gebruikersvriendelijke website willen bieden.
Webstandaarden voor kleurcontrast
Kleurcontrastverhouding meet het verschil in contrast tussen twee kleuren. Hoe hoger de waarde, hoe gemakkelijker het is om het object (tekst, afbeelding, afbeelding) op de voorgrond van de achtergrond te onderscheiden.
Kleuren kunnen op veel verschillende manieren contrasteren, zoals in tint, waarde en verzadiging. De kleurcontrastverhouding wordt berekend met een formule van W3C, de belangrijkste internationale standaardorganisatie voor het World Wide Web.
Het kan een waarde tussen aannemen 1: 1 (helemaal geen contrast, de voorgrond en de achtergrond hebben dezelfde kleur) en 21: 1 (het maximale contrast dat bestaat alleen tussen zwart en wit).
W3C's laatste Web Content Accessibility Guidelines (WCAG) 2.0 biedt webontwikkelaars en makers van content benchmarks voor het minimum (Level AA) en de verbeterde (Level AAA) waarde van een acceptabele kleurcontrastverhouding.
Level AA vereist minstens 4,5: 1 verhouding voor normale tekst, en 3: 1 voor grote tekst. Het is veel gemakkelijker om grote tekst zoals ondertitels te lezen, daarom heeft het een lager kleurcontrast nodig.
Als je level AAA wilt bereiken, het verbeterde niveau, moet je je kleurenschema met meer zorg ontwerpen, want het vereist minstens 7: 1 contrastverhouding voor normale tekst, en 4.5: 1 voor groot. Als een tekst onderdeel is van een logo of een merknaam, is er geen minimumkleurcontrastvereiste op elk WCAG-niveau.
We kunnen een website alleen visueel toegankelijk noemen als de kleurcontrastverhouding tussen elk voorgrondobject en de achtergrond bereikt ten minste niveau AA.
Voordelen van een hoge kleurcontrastverhouding
Door een betere leesbaarheid te bereiken, betrekt u niet alleen gebruikers met een visuele beperking, maar ook mensen die je inhoud lezen op kleine schermen zoals op een smartphone of een smartwatch, tussen slechte lichtomstandigheden, en verder monitors van mindere kwaliteit.
Mensen lezen ook sneller wanneer er een groter contrast is tussen de tekst en de achtergrond, dus het zal hoogstwaarschijnlijk langer duren voordat ze zich vervelen met de inhoud van de site.
Als je je zorgen maakt dat het toepassen van een hogere contrastratio een negatief effect zal hebben op de esthetiek van je ontwerp, moet je het Contrast Rebellion-webproject bekijken dat met voorbeelden uit de praktijk bewijst dat het vasthouden aan de hoge contrastratio-regels nog steeds kan resulteren in aantrekkelijke en coole ontwerpen.
Apps voor het controleren van kleurcontrast
Er zijn veel geweldige gratis tools overal op het internet waarmee ontwerpers de kleurcontrastverhouding van hun website kunnen controleren.
De eenvoudigste manier om uw ontwerp te testen op kleurcontrast, is door de hoofdkleuren te kiezen met Photoshop of een geschikte browserextensie zoals deze voor Firefox, en de waarden te kopiëren naar een van de onderstaande apps.
Het belangrijkste om te onthouden is dat je dat altijd moet doen vergelijk de voorgrondkleur zoals de tekstkleur met het omliggende gebied (achtergrond kleur).
1. WebAim-kleurcontrastcontrole
WebAim (Web Accessibility In Mind) is een organisatie die webtoegankelijkheid bevordert en ontwikkelaars een eenvoudige maar betrouwbare kleurcontrastcontrole biedt naast vele andere geweldige toegankelijkheidstools zoals Wave, een algemene app voor toegankelijkheidsevaluatie die u kan helpen snel de toegankelijkheidsproblemen van uw site beoordelen.
WebAim's Color Contrast Checker vertelt het u als uw kleuren voldoen aan de WCAG AA- en AAA-tests, zowel voor normale als voor grote teksten.
2. Snook-kleurcontrastcontrole
Jonathan Snook, momenteel werkzaam als vooraanstaande front-end ontwikkelaar bij Shopify, host al meer dan een decennium zijn handige tool voor kleurcontrastcontrole. Met Snook's app kun je verander de HSL- en RGB-waarden van de voor- en achtergrondkleur één voor één met behulp van handige bereikschuifregelaars totdat u een resultaat bereikt dat voldoet aan de benchmarks van WCAG 2.0.
CheckMyColours
Met CheckMyColours gemaakt door Giovanni Scala kunt u de kleurcontrastverhouding van alle voorgrond-achtergrond kleurencombinaties controleren op een live website.
Het berekent helderheidscontrastverhouding, helderheidsverschil, en kleur verschil, en biedt u een volledig rapport over de resultaten. Het CheckMyColours-rapport kan uw begrip van hoe u de visuele toegankelijkheid van uw site kunt verbeteren aanzienlijk vergemakkelijken.
Kleurenschema ontwerper
Color Scheme Designer is niet bepaald een kleurcontrastcontrole, maar een tool voor het ontwerpen van complete kleurenschema's.
We nemen het in deze verzameling op, omdat het een functie heeft waarmee u kunt zien hoe uw kleurenschema wordt waargenomen door mensen met verschillende soorten visuele handicaps. U kunt uw kleuren testen op kleurenblindheid, protanopie, deuteranopie en vele andere visuele beperkingen. De app heeft een nieuwere versie genaamd Paletton die zelfs een meer geavanceerde vision-simulatie mogelijk maakt (je kunt ook testen op zaken als waardeloze LED-weergave of zwakke CRT-weergave).
W3C biedt u ook een enorme lijst met Web Accessibility Evaluation Tools, waar u vele andere hulpmiddelen voor kleurcontrast vindt, zoals dit handige toegankelijkheidskleurenwiel.
Tips voor het maken van visueel toegankelijke websites
Als u een visueel toegankelijke website wilt maken, is het altijd een goed idee om dit te doen vermijd het gebruik van kleur alleen om functionaliteit of betekenis over te brengen. Pictogrammen die hun kleur wijzigen op basis van hun huidige status zijn hier typische voorbeelden van.
Als het mogelijk is, altijd ontwerp extra visuele aanwijzingen die mensen helpen die kleuren anders zien in het begrijpen van functionaliteit.
Vergeet het nooit besteed extra aandacht aan het kleurcontrast van knoppen, koppelingen en menu's, omdat ze het middel zijn voor navigatie op uw site. Als gebruikers niet gemakkelijk op uw site kunnen navigeren, raakt u ze snel kwijt. Toegankelijke kleuren voor call-to-action-knoppen zijn ook cruciaal voor goede conversiepercentages.
Het is een goede workflow om de kleurcontrastverhouding zo vroeg mogelijk in het ontwerpproces te testen, omdat het moeilijk zal zijn om uw klant te overtuigen om het kleurenschema van de site later in het ontwerpproces te wijzigen.
Nu lezen: praktische aanpak voor het kiezen van een website kleurenschema
