Research - contrast mode

[Camulos]

Contrast modes, what is expected and what do other design systems do?

### Tasks
- [x] Investigate other designsystems
- [x] Investigate litterature (desk-study)

Konklusjon (forslag):

• Kontrastmodus er nyttig for enkelte grupper av brukere som av ulike årsaker foretrekker eller trenger en slik modus, men dette er ikke nødvendigvis store grupper
• Kontrastmodus er som oftest beskrevet som en mørk modus, bare med mye høyere kontrast hvor helt sort og hvitt er dominant brukt, men med noe farger hvor det er kontraster på 1:16 eller mer.
• Kontrastmodus er innebygget i Windows som også automatisk lager det for nettsider, men kan gi rare resultater som vi bør teste og eventuelt justere
• Er også innebygget i MacOS, men nettsider blir ikke automatisk endret, vi må derfor tilby slikt tema selv
• Eksempel på tema kan en se i Github - de begrenser hvilke tema du kan velge mellom ut fra preferanse for lyst eller mørkt tema, men de velger ikke høykontrasttema for deg automatisk ut fra preferansen
• Media prefers-contrast og forced-colors er de vi trenger, men det finnes også eksperimentelles slike i tillegg en kan teste ut (kun noen testversjoner av nettlesere som støtter de eksperimentelle)

Forslag til prioritering
Vi bør ha stabile og velfungerende håndteringer av dark-mode først - v1 (eller like etter)
Test høykontrast i Windows når dark mode er aktiv - dokumenter utfordringer
Bygg egen modus for høykontrast-dark-mode for å støtte flere operativsystem eller kunne tilby brukeren å velge modusen selv.
Ta inspirasjomn fra Github, Windows og MacOS

[Camulos]

gov.uk beskriver "high-contrast mode" som en funksjon som kan være til hjelp for fargeblinde eller personer med svekket syn. I beskrivelsen av hva det er trekker de frem at det er en innstilling i operativsystemet som kan i noen tilfeller overstyre farger uavhengig av om appen det gjelder har lagt til rette for det eller ikke (hinter til det i hvert fall). Operativsystemet gjør dette ved å forsøke å reversere mørkt og lyst, i praksis lage en automatisk "dark-mode" med det formål å oppnå en tilsynelatende bedre kontrast. Ved å reversere fargene slik vil en i mange tilfeller kanskje oppnå bedre oppfattet kontrast og ved at det i praksis blir en generert dark-mode så gjør en det uten å øke belastningen for øyet.

Tolkning:
Utfordringen (dette er min tolkning) ved en slik tilnærming er at vi overlater det litt til tilfeldigheter om det faktisk blir bedre kontrast eller ikke. I tillegg så tolker jeg det også som at det kan være argumenter for at forhøyet kontrast i all hovedsak er noe som bør kombineres med mørk modus (dark-mode+high-contrast mode) fordi økt kontrast i en lys modus kan som en bieffekt øke belastningen for øyet.

[Camulos]

Hva sier Mozilla

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

Her er det viktig å ha med seg at forhøyet kontrast er noe som noen operativsystem faktisk (ofte ganske bra) fikser for brukeren uten at vi MÅ definere noe som helst. Men dette er kun dersom det i OS-valget også er valgt et tema/fargesett.

@media (prefers-contrast: ) kan ha verdiene "less", "more" og "custom" i tillegg til "no-preference", de viktigste for oss er nok "more" og "custom":

• More: brukeren har preferanse for mer kontrast og vil at vi skal levere det for hen, er dette valget må vi tilby hele temaet.
• Custom: brukeren har preferanse for mer kontrast og det er definert et sett med farger som ønskes brukt, vi "trenger ikke" å gjøre noe, men det kan hende at den resulterende opplevelsen har mye bedre kontrast, men at viktig informasjon forsvinner, slik som innramming av den seksjon eller tydelig skille mellom noe som ellers ville vært skilt med bakgrunn og ramme.

Custom valget tilsvarer @media (forced-colors: active), denne bør vi ikke røre før vi har testet med en demo-applikasjon for å se om det er nødvendig. Feks vil skygger typisk forsvinne, så vi kan bli nøt til å definere en border i noen tilfeller.

Ut fra hva som står hos Mozilla er det @media (prefers-contrast: more) som kanskje er der vi kan fokusere etter at vi har løst vanlig lys/mørkt tema.

[Camulos]

Hvordan unngå utfordringer med forced contrast
https://blog.logrocket.com/boost-accessibility-high-contrast-users-css/

• i en undersøkelse utført av WebAim så bruker 30% av internettbrukere med nedsatt syn forhøyet kontrast som det eneste eller et av verktøyene for å hjelpe dem.
• Når OS (Winddows) setter kontrastmodus så fjernes de fleste stiler som kun er dekorative (eller de som blir tolket slik, feks shadow), i tillegg blir en lang liste med stiler overskrevet
• I en slik tvunget modus så er det semantikken, altså hva noe er, som bestemmer fargen og (kanskje med noen få unntak) ikke fargen som er der fra før
• I et eksempel så har en knapp fått border: none og i tvunget kontrastmodus så blir det da bare tekst der fordi bakgrunnen fjernes, men det blir ikke lagt på en ramme.
• en kan løse det ovenfor ved å sette border, men ha den transparent i utgangspunktet.

Flere eksempler på uheldige resultat av tvungen kontrastmodus i lenken

De går også inn på bruk av forced-colors og forced-adjust-colors for å omgå noen av utfordringene.

[Camulos]

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast

Contrast er en funksjon som i praksis blir litt som et instagramfilter, en måte å øke kontrast i et bilde eller for en tekstblokk ut fra en enkel verdi.

[Camulos]

Prinsipp 1.1 fra Elmer er relevant:
1.1 Brukertilpassing
Løsningen skal utformes med utgangspunkt i brukerens perspektiv, og den skal tilpasse seg den enkelte bruker i den grad det er mulig.