Design & UX Guide

Inkluderende Design er en Kerneværdi

Dette er ikke blot et spørgsmål om smag. For Røde Kors betyder tilgængelighed, at vi ikke udelukker nogen fra at få hjælp eller blive en del af vores fællesskab.

1. Farver & Kontrast (WCAG 2.1)

Vi skal sikre et kontrastforhold på minimum 4.5:1. Herunder kan du se forskellen på den nuværende footer og den anbefalede løsning.

Nuværende (Dårlig)

Cookies & Privatliv

Kontrast: 1.8:1 (Fejler)

❌ Svært at læse for seniorer og i sollys.
Anbefalet (God)

Cookies & Privatliv

Kontrast: 12.6:1 (Bestået)

✅ Læsbart for alle uanset synsstyrke.

2. Typografi & Læsbarhed

Brugere læser ikke – de "scanner". Prøv at ændre indstillingerne herunder for at se, hvordan det påvirker din evne til at scanne indholdet.

Mandefællesskaber i Roskilde

Vi mødes hver 14. dag til hyggelig mandesnak og spændende udflugter. I en gruppe på 5-8 mænd skaber vi et rum, hvor man kan være sig selv. Det handler om medmenneskelighed og nærvær. Når teksten har den rette størrelse og luft, bliver det langt lettere for modne mænd at navigere og finde den information, de har brug for, uden at blive trætte i øjnene.

3. Interaktive Elementer & CTA

Fitts's Lov: Jo mindre et mål er, jo sværere er det at ramme. Prøv selv testen herunder.

Klik-test

Prøv at ramme dette tekstlink:

klik her (link)

Prøv at ramme denne CTA-knap:

Hvorfor knapper vinder

  • Tommelfinger-venligt: På mobil er knapper 400% lettere at ramme end tekstlinks.
  • Visuelt hierarki: En rød knap fortæller brugeren præcis, hvad næste skridt er.
  • Handlingsorienteret: "Tilmeld" er stærkere end "Læs mere".
📖

Huskeregler (Cheat Sheet)

Indhold & Tekst

  • 18px: Den nye standard for brødtekst.
  • 1.6: Linjeafstand der giver ro.
  • Scannable: Brug punktopstillinger og overskrifter.
  • Kort: Max 60-80 tegn pr. linje.

Design & Teknik

  • Contrast: Altid hvid tekst på rød eller mørkegrå.
  • CTA: Gør telefonnumre klikbare (tel:).
  • Space: Masser af luft mellem sektioner.
  • Mobile-First: Test altid på en telefon i sollys.