Badge-kontrast under WCAG 2.2 AA — bytt shelter_primary til warning_bg #18

New issue

Closed

opened 2026-04-29 16:53:49 +02:00 by olemd · 0 comments

olemd commented

2026-04-29 16:53:49 +02:00

Owner

Problem

Badge-en innført i 1fb9f14 («Valgt – utenfor nærområdet» på dyplenkede tilfluktsrom utenfor topp-N) bruker hvit fet 11sp tekst på shelter_primary (#FF6B35).

Målt kontrast: ~2.84:1.

WCAG 2.2 AA SC 1.4.3 krever:

≥4.5:1 for normaltekst
≥3.0:1 for large text (≥14pt fet eller ≥18pt regular)

11sp fet teller som normaltekst, ikke large text. Badge-en feiler dermed både AA-terskelen for normaltekst (4.5:1) og marginalt også 3:1-terskelen for large text.

Forslag

Bytt badge-bakgrunn fra shelter_primary til warning_bg (#BF360C) i app/src/main/res/layout/item_shelter.xml.

warning_bg finnes allerede i colors.xml med dokumentert kontrast ~5.5:1 mot hvit (kommentaren i colors.xml er eksplisitt om hvorfor den ble mørket: «#BF360C gives ~5.5:1 vs white; previous #E65100 was only 3.75:1»). Det er presedens for nettopp denne avveiningen i prosjektet.

Alternativer som ikke fungerer:

shelter_primary_dark (#E55A2B): ~3.6:1, fortsatt under AA for normaltekst
Svart tekst på #FF6B35: ~7:1, men bryter visuell konsistens (resten av appen bruker hvit-på-orange for accent-bakgrunner)

Endring

Én linje i item_shelter.xml:

-        android:background="@color/shelter_primary"
+        android:background="@color/warning_bg"

Kontroller verdt å gjøre samtidig:

Sjekk at warning_bg ikke allerede har en sterk semantisk konnotasjon i UI-en som kolliderer med «valgt»-betydningen. Strengen brukes i dag som varsel-banner-bakgrunn (jf. colors.xml-kommentaren); det er rimelig å gjenbruke nyansen for en «merk deg dette»-badge, men verifiser visuelt.

Relatert

Original commit: 1fb9f14 (#13)
PWA-paritet: #17 — den saken må selv velge badge-farge med samme kontrastkrav, og bør referere hit for konsistens.
WCAG-overholdelse: relevant for offentlig-sektor-godkjenning (Uutilsynet/WAD/EN 301 549).

## Problem Badge-en innført i 1fb9f14 («Valgt – utenfor nærområdet» på dyplenkede tilfluktsrom utenfor topp-N) bruker hvit fet 11sp tekst på `shelter_primary` (`#FF6B35`). Målt kontrast: **~2.84:1**. WCAG 2.2 AA SC 1.4.3 krever: - ≥4.5:1 for normaltekst - ≥3.0:1 for *large text* (≥14pt fet eller ≥18pt regular) 11sp fet teller som normaltekst, ikke large text. Badge-en feiler dermed både AA-terskelen for normaltekst (4.5:1) og marginalt også 3:1-terskelen for large text. ## Forslag Bytt badge-bakgrunn fra `shelter_primary` til **`warning_bg`** (`#BF360C`) i [`app/src/main/res/layout/item_shelter.xml`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/app/src/main/res/layout/item_shelter.xml). `warning_bg` finnes allerede i `colors.xml` med dokumentert kontrast **~5.5:1** mot hvit (kommentaren i [`colors.xml`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/app/src/main/res/values/colors.xml) er eksplisitt om hvorfor den ble mørket: «#BF360C gives ~5.5:1 vs white; previous #E65100 was only 3.75:1»). Det er presedens for nettopp denne avveiningen i prosjektet. Alternativer som *ikke* fungerer: - `shelter_primary_dark` (`#E55A2B`): ~3.6:1, fortsatt under AA for normaltekst - Svart tekst på `#FF6B35`: ~7:1, men bryter visuell konsistens (resten av appen bruker hvit-på-orange for accent-bakgrunner) ## Endring Én linje i `item_shelter.xml`: ```diff - android:background="@color/shelter_primary" + android:background="@color/warning_bg" ``` Kontroller verdt å gjøre samtidig: - Sjekk at `warning_bg` ikke allerede har en sterk semantisk konnotasjon i UI-en som kolliderer med «valgt»-betydningen. Strengen brukes i dag som varsel-banner-bakgrunn (jf. `colors.xml`-kommentaren); det er rimelig å gjenbruke nyansen for en «merk deg dette»-badge, men verifiser visuelt. ## Relatert - Original commit: 1fb9f14 (#13) - PWA-paritet: #17 — den saken må selv velge badge-farge med samme kontrastkrav, og bør referere hit for konsistens. - WCAG-overholdelse: relevant for offentlig-sektor-godkjenning (Uutilsynet/WAD/EN 301 549).