Farvekontrast og inkluderende design

Informatik C · STX · C-niveau · Interaktionsdesign

💻 Farvekontrast og inkluderende design

Farvekontrast = forskel i lysstyrke mellem forgrund (tekst) og baggrund.

Måles: kontrast-ratio fra 1:1 (samme farve) til 21:1 (sort på hvid).

WCAG-krav: 4,5:1 for normal tekst (AA), 3:1 for stor tekst (>18pt, eller >14pt fed).

AAA: 7:1 normal, 4,5:1 stor.

Værktøjer: WebAIM Contrast Checker, Stark (Figma plugin), Browser DevTools (Chrome har indbygget).

Hvorfor: ~8% af mænd, 0,5% af kvinder har farveblindhed (rødgrøn mest almindelig, deuteranopia). Macular degeneration (aldring) → reduceret kontrastfølsomhed. Inkluderende design (Microsoft Inclusive Design Toolkit 2016) udvider tilgængelighed: "Solve for one, extend to many" — features for handicappede gavner alle. Eksempler: undertekster (døve + larmende caféer), sprogvalg (immigranter + rejsende), keyboard-shortcuts (motorisk handicap + power users).

Permanent, midlertidig, situationel: én-arm = permanent armbrud = midlertidigt amputeret = permanent / babyholdt = situationel. Design skal virke for alle 3. Apple Accessibility Awards + Microsoft Adaptive Controller (Xbox 2018) er eksempler på markedssucces.

Curb cut effect: kantsten-skråninger (oprindeligt for kørestole) bruges af cyklister, barnevogne, rejsende — gavner alle.

Læringsmål

• Anvende designprincipper (konsistens, feedback, affordans)
• Vurdere brugbarhed (usability)
• Lave bruger-test (think aloud, A/B-test)
• Anvende tilgængelighed (WCAG 2.1)
• Designe for skærmlæsere og tastaturnavigation

Sådan kan du arbejde med emnet

• Beregn kontrastforholdet for sort tekst på en grå baggrund og vurdér, om det opfylder WCAG AA
• Forklar, hvad der menes med inkluderende design, og hvad det indebærer ud over farvekontrast
• Diskutér, hvad der er de bredere fordele ved inkluderende design

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.