Tilgjengelighet (Accessibility)
WCAG AA Krav
| Type |
Minimum kontrast |
| Normal tekst |
4.5:1 |
| Stor tekst (18pt+ / 14pt bold) |
3:1 |
| UI-komponenter |
3:1 |
Tilgjengelig verktøy
| Script |
Formål |
Når bruke |
check-contrast.mjs |
WCAG fargekontrast-sjekk |
Etter fargeendringer, før release |
Kjøre kontrastsjekk
node scripts/check-contrast.mjs
Hva testes
Scriptet sjekker ~50 fargekombinasjoner i dark mode:
| Kategori |
Eksempler |
| Alerts |
Info, Success, Warning, Danger tekst på bakgrunn |
| Badges |
Default, Info, Success, Warning, Danger, Neutral |
| Tags |
Neutral, Info, Warning, Frist |
| Table Rows |
TE og BH rader |
| Modal Boxes |
Gule, røde, blå bokser |
| Timeline |
Grunnlag, Vederlag, Frist badges |
| Borders |
Farget border på bakgrunner |
| Main Text |
Body tekst på mørke bakgrunner |
| Status Text |
Error, Success, Info, Warning |
| Progress Bars |
Fargede barer på subtil bakgrunn |
Tolke output
Per kombinasjon
✅ PASS Alert Info: text on bg
FG: #1a3a5a
BG: rgba(180, 210, 255, 0.85) → #b8d4f7
Ratio: 7.23:1 (Required: 4.5:1)
Kategori-oppsummering
SUMMARY BY CATEGORY
================================================================================
✅ Alerts: 4/4 passed
✅ Badges: 6/6 passed
❌ Tags: 3/4 passed
Ved feil - forslag til fiks
SUGGESTED FIXES
Tag Warning: text on bg:
Current: #3a3020 on #f0e0a0 = 3.92:1
Background luminance: 0.7234 (LIGHT)
Foreground luminance: 0.0312
Foreground needs luminance <= 0.0234
→ DARKEN the text color
Når kjøre
| Situasjon |
Anbefaling |
Endret farger i src/index.css |
Kjør kontrastsjekk |
| Ny UI-komponent med farger |
Legg til i scriptet, kjør sjekk |
| Før release |
Verifiser alle kombinasjoner passerer |
Legge til nye fargekombinasjoner
Rediger scripts/check-contrast.mjs:
- Legg til farger i
darkColors-objektet
- Legg til kombinasjoner i
combinations-arrayet:
{
name: 'My Component: text on bg',
fg: 'my-text-color', // Nøkkel i darkColors
bg: 'my-bg-color', // Nøkkel i darkColors
type: 'normal', // 'normal' (4.5:1) eller 'ui' (3:1)
category: 'My Category' // For gruppering i output
}
Kjente begrensninger
- Kun dark mode farger er definert i scriptet
- Semi-transparente farger blandes med
#1a1a2e (bg-default)
- Scriptet må oppdateres manuelt når CSS-variabler endres
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: accessibility-73description: Tilgjengelighetsverktøy for WCAG-validering. Bruk ved arbeid med farger, kontrast eller UI-komponenter. Use when this capability is needed.4---56# Tilgjengelighet (Accessibility)78## WCAG AA Krav910| Type | Minimum kontrast |11|------|------------------|12| Normal tekst | 4.5:1 |13| Stor tekst (18pt+ / 14pt bold) | 3:1 |14| UI-komponenter | 3:1 |1516## Tilgjengelig verktøy1718| Script | Formål | Når bruke |19|--------|--------|-----------|20| `check-contrast.mjs` | WCAG fargekontrast-sjekk | Etter fargeendringer, før release |2122## Kjøre kontrastsjekk2324```bash25node scripts/check-contrast.mjs26```2728## Hva testes2930Scriptet sjekker ~50 fargekombinasjoner i dark mode:3132| Kategori | Eksempler |33|----------|-----------|34| Alerts | Info, Success, Warning, Danger tekst på bakgrunn |35| Badges | Default, Info, Success, Warning, Danger, Neutral |36| Tags | Neutral, Info, Warning, Frist |37| Table Rows | TE og BH rader |38| Modal Boxes | Gule, røde, blå bokser |39| Timeline | Grunnlag, Vederlag, Frist badges |40| Borders | Farget border på bakgrunner |41| Main Text | Body tekst på mørke bakgrunner |42| Status Text | Error, Success, Info, Warning |43| Progress Bars | Fargede barer på subtil bakgrunn |4445## Tolke output4647### Per kombinasjon4849```50✅ PASS Alert Info: text on bg51 FG: #1a3a5a52 BG: rgba(180, 210, 255, 0.85) → #b8d4f753 Ratio: 7.23:1 (Required: 4.5:1)54```5556### Kategori-oppsummering5758```59SUMMARY BY CATEGORY60================================================================================61✅ Alerts: 4/4 passed62✅ Badges: 6/6 passed63❌ Tags: 3/4 passed64```6566### Ved feil - forslag til fiks6768```69SUGGESTED FIXES7071Tag Warning: text on bg:72 Current: #3a3020 on #f0e0a0 = 3.92:173 Background luminance: 0.7234 (LIGHT)74 Foreground luminance: 0.031275 Foreground needs luminance <= 0.023476 → DARKEN the text color77```7879## Når kjøre8081| Situasjon | Anbefaling |82|-----------|------------|83| Endret farger i `src/index.css` | Kjør kontrastsjekk |84| Ny UI-komponent med farger | Legg til i scriptet, kjør sjekk |85| Før release | Verifiser alle kombinasjoner passerer |8687## Legge til nye fargekombinasjoner8889Rediger `scripts/check-contrast.mjs`:90911. Legg til farger i `darkColors`-objektet922. Legg til kombinasjoner i `combinations`-arrayet:9394```javascript95{96 name: 'My Component: text on bg',97 fg: 'my-text-color', // Nøkkel i darkColors98 bg: 'my-bg-color', // Nøkkel i darkColors99 type: 'normal', // 'normal' (4.5:1) eller 'ui' (3:1)100 category: 'My Category' // For gruppering i output101}102```103104## Kjente begrensninger105106- Kun dark mode farger er definert i scriptet107- Semi-transparente farger blandes med `#1a1a2e` (bg-default)108- Scriptet må oppdateres manuelt når CSS-variabler endres109110---111> Converted and distributed by [TomeVault](https://tomevault.io/claim/khjohns) — claim your Tome and manage your conversions.112<!-- tomevault:4.0:skill_md:2026-04-13 -->
tomevault-io