Colour Contrast Check Tool

Een goed leesbare tekst heeft voldoende contrast tussen de kleur van de tekst en de achtergrondkleur. Tips om dit makkelijk online te bepalen.

Advertisements

Wanneer is een tekst goed leesbaar op het beeldscherm? Een goed leesbare tekst heeft voldoende contrast tussen de kleur van de tekst en de achtergrondkleur. Met de Colour Contrast Check van Snook.ca kun je dat heel makkelijk controleren.

De Webrichtlijnen geven een paar aandachtspunten:

  • Positieve tekst (donkere tekst op een lichte achtergrond) wordt beschouwd als beter leesbaar dan diapositieve tekst (licht op donker).
  • Het gebruik van felle kleuren, zowel voor tekst als achtergrond (achter tekst) wordt afgeraden. Het is vermoeiend voor de ogen en komt de leesbaarheid niet ten goede.
  • Rood op zwart en zwart op rood wordt afgeraden.
  • Groen, oranje, bruin en geel worden afgeraden.
  • Zorg voor voldoende helderheidcontrast tussen tekst- en achtergrondkleur.

Roze op paars is dus geen goed idee en op Hyves krijg je al snel hoofdpijn.

Volgens de W3C

Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Color brightness = ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
The rage for color brightness difference is 125.

Color difference = (maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))
The range for color difference is
500.

Boeiend, interessant…
Gelukkig kun je het online automatisch laten berekenen.

Online tools om leesbaarheid te berekenen

Een hele mooie en uitgebreide is Colour Contrast Check van Snook.ca. Je kunt met de HTML-kleur, de RGB , Hue, Saturation en Value met schuifbalkjes instellen en je kunt meteen zien of kleuren geschikt zijn en voldoen aan de standaarden van het WCAG

Met de CSS analyser van JuicyStudio kun je de url van een stylesheet ingeven en krijg je een validatie-rapport voor niet alleen de kleuren maar ook voor meer accessibility eisen, zoals het gebruik van relatieve (%) of absolute(px) waarden voor de grootte van HTML-elementen.

bronnen en gerelaterde links

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

3 thoughts on “Colour Contrast Check Tool”

  1. Ik heb hier ooit ook een artikeltje over geschreven op mij blog. Ik vind dat tooltje van Juicystudio wel erg handig, zodat je de contrastratio kunt berekenen. De Webrichtlijnen hanteren een contrastratio van minstens 5:1.

    Bijvoorbeeld:
    * zwarte tekst op witte achtergrond levert een contrastratio op van 21:1
    * blauw op wit 8.12:1
    * en rood op wit 4:1 (voldoet dus niet)

    Maar als grafisch ontwerper loop je dan wel tegen gewetenskwesties aan, want van subtiele kleurverschillen moet je dan écht helemaal afstappen. :-s

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s