Kontrastkrav er ikke design-regler: de er læsbarhed i virkeligheden
Af Brian Emilius,
373 ord, ca. 2 minutter
Kontrast bliver ofte behandlet som en teknisk detalje.
Noget man lige tjekker til sidst, hvis man overhovedet gør det.
Men i praksis er kontrast ikke en design-regel.
Det er forskellen på om tekst kan læses eller ej.
Tekst oven på billeder: den mest udbredte kontrast-fejl
Tekst oven på billeder ser flot ud i designet.
Hero-billeder. Kampagnebannere. Cards.
Problemet opstår her:
- Billedet har både lyse og mørke områder
- Teksten ligger "ovenpå det hele"
- Kontrasten skifter inden for samme ord
Det betyder, at noget af teksten altid vil forsvinde, uanset farvevalg.
"Men vi har jo lagt en mørk overlay på billedet?"
Ja.
Og så er den stadig for lys ét sted og for mørk et andet.
Grå på grå: minimalistisk, moderne og ulæseligt
Grå tekst på grå baggrund er ekstremt populært.
Især til:
- Hjælpetekster
- Metadata
- Sekundær information
- Placeholder-tekst
Problemet er ikke kun farven, det er kontrasten mellem farverne.
Små skrifter + lav kontrast = tekst der kræver ekstra arbejde at læse.
Og det ekstra arbejde er præcis det, der får brugere til at:
- Skimme
- Misforstå
- Springe information over
"Det ser fint ud på min skærm"
Det er nok den mest ærlige, og mest farlige, sætning i hele processen.
For din skærm er:
- Kalibreret
- Ny
- Set i godt lys
- Kigget på i ro og mag
Brugerens skærm er måske:
- En bærbar i sollys
- En mobil med lav lysstyrke
- Et gammelt panel med ringe kontrast
- Set hurtigt, stresset eller træt
Kontrast fejler ikke kun for svagtseende.
Den fejler for helt almindelige mennesker i helt almindelige situationer.
Konkret take-away
Kontrast fejler reelt når:
- Tekst placeres direkte oven på billeder
- Grå bruges som "diskret” i stedet for "læsbart"
- Design vurderes på én skærm i ét miljø
Og derfor rammer det langt flere end "svagtseende”:
- Brugere i dårligt lys
- Brugere på mobile enheder
- Brugere med træthed eller stress
- Brugere der bare scanner hurtigt
Kontrast handler ikke om at ødelægge design.
Det handler om, at indholdet faktisk kan læses i virkeligheden.
Kontrast er et af de steder, hvor små justeringer giver stor effekt. Især når man tester det uden for designværktøjet.
