Contrastrijk én toegankelijk ontwerpen

Als ontwerper ligt de verantwoordelijkheid voor een toegankelijke site vooral bij het uitdenken van de juiste interactie. Er is echter één klein heikel detail wat soms voor wat meer complexiteit lijkt te zorgen dan nodig is: contrast. In dit artikel probeer ik de juiste handvatten te bieden voor een probleemloze ontwerpfase met een uitdagend ontwerp als eindresultaat.

Contrast betekent voor veel mensen ‘zo zwart-wit mogelijk’. En oké, als je écht een hoog contrast wilt halen is dat theoretisch natuurlijk de te nemen route. Gelukkig is dat absoluut niet het doel van de ‘regelgeving’ rondom contrast in websites. Feitelijk brengt het je website op een hoger niveau, zit er veel meer ‘diepte’ in het ontwerp en kun je een grotere doelgroep bereiken. Bovendien zijn er diverse goede en behulpzame tools beschikbaar.

Wat zijn de spelregels?

De Web Content Accessibility Guidelines (WCAG 2) stellen dat het contrast van tekst in het formaat van minimaal 18pt (24 pixels) of 14pt bold (19px) een contrastwaarde van minimaal 3:1 moet hebben. Overige tekst dient minimaal 4,5:1 te hebben. Wat betekent dit concreet?

Soms is het simpelweg logisch terugdenken aan de kleurencirkel die je op de middelbare school hebt moeten leren.

Contrast wordt berekend door een voorgrond-kleur af te zetten ten opzichte van de achtergrondkleur. Soms is het simpelweg logisch terugdenken aan de kleurencirkel die je op de middelbare school hebt moeten leren. De kleuren die tegenover elkaar staan in de kleurencirkel hebben het hoogste contrast. In ontwerpen voor websites wordt vaak gezocht naar de mooie subtiele kleurcombinaties, en iedereen vind ‘minimal design’ fantastisch. Een witte achtergrond, zwart logo, grijze tekst en de datum en overige subteksten het liefst in heel subtiel grijs. En vooruit, misschien ergens één steunkleur. Het gevaar van zoveel grijstinten is het gebrek aan contrast. Kijk maar eens door je oogharen naar onderstaande voorbeelden.

Wat in ieder geval duidelijk blijkt is dat gebruik van heftige kleuren niet persé een probleem hoeft te vormen, mits maar op de juiste manier wordt omgegaan met de verschillen tussen voor- en achtegrondkleur. Afbeelding 1 is – naast dat het pijn doet aan je ogen – overduidelijk slecht leesbaar, door het veel te lage contrast (2,15:1). Afbeelding 3 is al beter leesbaar, maar bij de kleine tekst zie je al enigszins dat de letters ‘vollopen’. Door je oogharen bekeken is die regel al veel moeilijker leesbaar dan de bovenste regel, en met een contrast van 4:1 is dit feitelijk sowieso onjuist maar praktisch ook kantje boord. Beter is om een contrast zoals in afbeelding 2 te gebruiken. Hier is het contrast ruim boven de ijkpunten (7,88:1), en dat is duidelijk merkbaar bij het bekijken door je oogharen.

Afbeelding 4 is de contrastvorm die eigenlijk het meeste fout gaat. Grijstinten om ‘diepte’ aan te geven tussen verschillende onderdelen van je site is vaak erg mooi, maar ook erg onpraktisch. Nu zijn dit nog suffe vlakken, maar hoe vaak je zie het niet fout gaan met tekst op foto’s?

Leuk dat de stagiair bij Mercedes ook Photoshop geinstalleerd heeft, maar witte tekst op een overbelichte zand-achtergrond getuigt natuurlijk van het verstandelijk vermogen van een scharrelkip.

Voor wie doe je het?

De grap is dat deze vraag 99 van de 100 maal verkeerd zal worden beantwoord. Het juiste antwoord is namelijk feitelijk gewoon voor iedereen. Niemand vind het fijn om blauw op rood te moeten lezen, en niemand zal er van genieten als je zelfs op 15 cm afstand nauwelijks de contactinformatie kunt vinden op een hippe fotografiesite. Maar natuurlijk help je ook de man van 56 die graag een cruise met vrouw, kinderen en kleinkinderen wil boeken omdat hij en zijn vrouw 30 jaar getrouwd zijn. Of je collega die kleurenblind is, maar wel graag wil weten of de mooie dame van marketing op haar verjaardag aanwezig is om haar 3 zoenen te brengen en een stukje taart te snaaien.

Contrast zit ‘m in de subtiliteiten; in de afbeelding hierboven is suggestie 4 voor de meeste mensen vermoedelijk nog prima te lezen. Maar wat te denken van de grote groep mensen bij wie de monitor foutief staat afgesteld, waardoor grijs vaak wit wordt. Kies dan voor een kleur die net enkele tinten donkerder is, en net voldoende contrast krijgt om ook bij een slechte monitor toch nog leesbaar te blijven. Voorheen was er natuurlijk nog sprake van WAP-telefoons met een 256-kleuren scherm, maar dat tijdperk is gelukkig wel definitief voorbij!

Hoe meet ik dit?

Er zijn verschillende tools voor beschikbaar, van Adobe Photoshop plugins tot online invuloefeningen. Ik prefereer de laatste optie, omdat hiermee de waarde hard wordt teruggegeven, en er geen ruimte is voor interpretatie. Met de Photoshop plugin die ik voorheen gebruikte – en nu ook niet meer beschikbaar lijkt? Iemand een suggestie? – moest je kleuren pippeteren en dan loop je het risico net de verkeerde pixel te selecteren, waardoor de waarde onjuist blijkt.

Luminosity Colour Contrast Ratio Analyser

Op de website van Gez Lemon kun je gratis gebruik maken van zijn Luminosity Colour Contrast Ratio Analyser. Ingewikkelde term voor check-je-contrast-tool.

Het werkt eigenlijk bijzonder simpel. Je voert de  voorgrond- en achtergrondkleur in, en de tool geeft de contrastwaarde terug in twee decimalen. Daarnaast geeft hij direct terug of de ingegeven kleuren de WCAG 2 richtlijnen halen, en tot op welk niveau (A of AA). Dit is de meest veilige methode en het laat geen ruimte voor discussie; de kleuren zijn wel of niet correct.

Conclusie

De regelgeving rondom ontwerpen voor toegankelijkheidseisen is dus vooral erg duidelijk en concreet. Misschien is dat de reden dat creatievelingen het ervaren als vervelend en beperkend, maar uiteindelijk zorgt het voor een meer eenduidige beleving voor de eindgebruiker; een groter bereik van informatie dankzij betere leesbaarheid, maar ook de onafhankelijkheid van slechte schermen en fysieke beperkingen van de gebruiker. En uiteindelijk is dat toch wat de klant, én de klant van de klant graag willen.