Waarom u vibrerende kleurencombinaties moet vermijden

In dit snelle artikel leert u hoe kleurtrillingen de leesbaarheid van de interface beïnvloeden in de context van web- en interfaceontwerp.

Bold of Garish?

Er is een opkomende tendens bij interface-ontwerpers om de felle kleurenschema's te imiteren die vaak worden aangetroffen in printontwerp. Hoewel deels te wijten aan ideologische trends, komt deze impuls ook voort uit het nieuwe typografische bereik dat beschikbaar is voor de moderne webontwerper, wat afdrukachtige lay-outs en een groot type stimuleert. Het is belangrijk op te merken dat de verschillen tussen elk medium die de trillende kleur veroorzaken enigszins meer toelaatbaar zijn in druk, en minder voor het web.

Trillende kleuren op de Frooti-website

In gedrukte vorm betekent het gebruik van een gedurfd kleurenschema vaak het verschil tussen genegeerd worden op een tijdschriftenrek en een verkoop doen. Aan de andere kant hebben we in de gebruikersinterface andere overwegingen die voorrang hebben boven het met geweld vastpakken van de aandacht van de gebruiker, in het bijzonder de leesbaarheid van tekst.

Wat is vibratie?

Een van de primaire verschijnselen die naar voren komen uit vet en sterk verzadigde kleuren is een schijnbaar "vibrerende" kleur, een verschijnsel waarbij de randen van twee direct aangrenzende kleuren lijken te versmelten, vervagen en gloeien, waardoor de illusie van beweging ontstaat.

De buitenste twee samples hebben tekst met een trillende kleur, terwijl het middelste sample tekst heeft met een equiluminant waarde.

Josef Albers, de bekende kleistheoreticus, waarschuwde tegen het gebruik van trillende kleuren in zijn klassieker, Interactions of Color:

"Dit aanvankelijk opwindende effect voelt ook agressief en vaak zelfs ongemakkelijk voor onze ogen. Men vindt het zelden gebruikt, behalve een schreeuwend effect in reclame, en als gevolg daarvan is het onaangenaam, niet leuk en vermeden. "

Om ervoor te zorgen dat een paar kleuren slecht zichtbaar zijn ten opzichte van elkaar, is het noodzakelijk dat ze equiluminant zijn en een vergelijkbare helderheidswaarde hebben. Om echter merkbaar te trillen, hebben de kleuren over het algemeen een hoge verzadiging en zijn ze complementair aan elkaar, ongeveer 180º verschoven op het kleurenwiel.

Blauw (HSB 210, 99, 100) op rood (HSB 12, 99, 100)

In het bovenstaande voorbeeld zijn de rode en blauwe tinten te vinden aan weerszijden van het kleurenwiel (hoewel niet direct tegengesteld) en beide hebben een helderheid van 100.

Spotify EDM

Spotify is synoniem geworden met gewaagde kleurenschema's, die met groot effect worden gebruikt om de aandacht te trekken. Soms kunnen deze combinaties onaangenaam zijn, zelfs als ze niet in de echtste zin trillen; zoals de knop tegen de paarse achtergrond in het bovenstaande voorbeeld. De ogen van gebruikers zullen herkennen wat het is, maar sommige kunnen moeite hebben om de buitenste randen van de vorm te bepalen. 

Leesbaarheid

Interfacetekst wordt aanzienlijk bemoeilijkt wanneer deze wordt ingesteld in equiluminant, trillende kleur. Ik heb deze trillende kleuren op maat geselecteerd:

Wanneer kleurtrilling optreedt, is het element dat het sterkst wordt beïnvloed door het gloeiende vervormingseffect de rand tussen de twee kleuren. Dit is de reden waarom trillingen bijzonder gevaarlijk zijn in de context van UI-lettertypen, kleine pictogrammen en andere gedetailleerde elementen die niet groot genoeg zijn om te compenseren voor hun wazige trillende randen.

Hier is dezelfde reeks stalen, deze keer gezien door iemand met kleurenblindheid:

In aanvulling op de vaak irritante trillende en wazige kleuren voor diegenen die in kleur zien, gegeven kleuren van gelijke helderheid, kunnen degenen met kleurenblindheid uiteindelijk helemaal niets zien. Hoewel er verschillende niveaus van kleurenblindheid zijn, is het het beste om veilig te spelen als het gaat om toegankelijkheid.

Hier is bijvoorbeeld het prullenbakpictogram op de Apple Watch niet zichtbaar voor mensen met kleurenblindheid:

Kleurzicht (links) versus kleurenblindheid (rechts)

Conclusie

Vibrerende kleuren kunnen met goed resultaat worden gebruikt, maar ze brengen reële gevaren met zich mee voor de bruikbaarheid van gebruikersinterfaces, en kunnen zwaarhandig zijn als ze niet opzettelijk worden overwogen voor gebruik. Houd dit in gedachten tijdens het ontwerpen!