Contrast is het zichtbare verschil tussen elementen in een ontwerp, en heel praktisch is het wat tekst leesbaar maakt. Donkere tekst op een lichte achtergrond heeft veel contrast en leest makkelijk; lichtgrijze tekst op wit heeft weinig contrast en vermoeit het oog. Contrast stuurt ook de aandacht en laat een knop of kop opvallen tussen alles eromheen.
Stel je voor dat je een menukaart leest in een schemerig restaurant. Vette zwarte letters op crèmekleurig papier zijn moeiteloos, maar dunne grijze tekst op een drukke fotoachtergrond betekent turen. Datzelfde verschil bepaalt of jouw website prettig of vermoeiend is om te gebruiken, en daarom hangen toegankelijkheid-normen er harde cijfers aan. De WCAG-richtlijnen bepalen minimale contrastratio’s die tekst moet halen om voor de meeste mensen leesbaar te zijn.
Contrast gaat niet alleen over kleur. Ook grootte, dikte en ruimte maken contrast en helpen een layout te tonen wat als eerste telt. Een sterk kleurenschema is er een dat er goed uitziet én die leesbaarheidsdrempels haalt, in plaats van het een boven het ander te kiezen. Er is een snelle manier om het te checken. Veel tools geven een ratio, waarbij 21 op 1 zwart op wit is en 1 op 1 helemaal geen verschil. Bodytekst heeft meestal minstens 4,5 op 1 nodig, en grote koppen mogen op 3 op 1 slagen. De dunne grijze placeholder-tekst waar ontwerpers van houden, zakt vaak gewoon. Browser-devtools en gratis contrastcheckers wijzen het in seconden aan, dus er is weinig excuus om tekst te lanceren die mensen niet kunnen lezen.
Bij TopDevs toetsen we contrast op elk scherm aan toegankelijkheidsnormen, zodat de content van een klant leesbaar blijft voor iedereen, op elk apparaat en bij elk lichtniveau.
