Ontwerp

Kleuren kiezen die iedereen kan lezen

Door Het AsasWeb-team 1 min lezen

WCAG vereist een contrastverhouding van minstens 4,5:1 voor lopende tekst en 3:1 voor grote tekst en interface-elementen. De betrouwbare route naar die doelen is ze vanaf het begin in het palet bouwen, kies een donkere inktkleur en een licht oppervlak die ruim slagen, en controleer daarna elk kleurenpaar met een contrasttool. Geef nooit iets aan met kleur alleen, en controleer dark mode apart, want een palet dat op wit slaagt kan op bijna zwart falen.

Tekst met laag contrast ziet er elegant uit in een ontwerptool en verdwijnt in het echte leven: in zonlicht, op een goedkoop scherm, of voor iedereen met verminderd zicht. Toegankelijke kleur gaat niet over uw merk verflauwen. Het gaat erover dat mensen het daadwerkelijk kunnen lezen.

Ken de doelen

WCAG stelt duidelijke minima. Bodytekst heeft een contrastverhouding van minstens 4,5 op 1 ten opzichte van zijn achtergrond nodig. Grote tekst, vanaf ongeveer 24 pixels, en gebruikersinterface-elementen hebben minstens 3 op 1 nodig. Dit zijn ondergrenzen, geen doelen, en ze zijn eenvoudig te controleren met elke contrasttool.

Bouw contrast in uw palet

De truc is het palet vanaf het begin rond deze doelen te ontwerpen, in plaats van fouten aan het eind te ontdekken. Kies een donkere inkt en een licht oppervlak die ruim slagen, kies dan accentkleuren die werken als zowel tekst als vlak. Op deze site is elk kleurenpaar gedocumenteerd met zijn gemeten verhouding, zodat er niets doorglipt.

Vertrouw niet alleen op kleur

Kleur mag nooit de enige manier zijn waarop u iets signaleert. Een verplicht veld, een fout, een link in een alinea: elk heeft een tweede signaal nodig, zoals tekst, een icoon of een onderstreping. Mensen die kleurverschillen niet waarnemen, hebben de boodschap nog steeds nodig.

Let op dark mode

Een palet dat slaagt in light mode kan falen in dark mode, waar een merkkleur die er op wit prima uitzag, te flets kan zijn op een bijna-zwart oppervlak. Elk thema heeft zijn eigen gecontroleerde waarden nodig.

We behandelen contrast als een gemeten getal, geen gok. Als u niet zeker weet of uw merkkleuren slagen, start een project en we auditen ze en vinden een palet dat zowel on-brand als leesbaar is.

Wilt u deze standaard op uw eigen site?

Vertel ons over uw project en wij reageren met eerlijke, praktische vervolgstappen.