2026-03-13 13:09:04 +01:00
<!DOCTYPE html>
< html lang = "nb" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Lønnsforskjellen vokser — interaktiv kalkulator< / title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link href = "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel = "stylesheet" >
< link rel = "stylesheet" href = "style.css" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" > < / script >
< / head >
< body >
< header >
< p class = "eyebrow" > Samme prosent. Ikke det samme resultatet.< / p >
< h1 > Lønnsforskjellen< br > < em > vokser< / em > < / h1 >
< p class = "lead" > Prosentvise lønnstillegg ser rettferdige ut — men de gjør de rike rikere, hvert eneste år. Se hva som skjer over tid.< / p >
< div class = "stamp" > Spis de rike< / div >
< / header >
< div class = "small-diff-banner" >
< span class = "sd-icon" > ↗< / span >
< span > Selv en liten forskjell på < strong > 50 000 kr< / strong > i startlønn blir til over < strong id = "banner-gap" > —< / strong > i løpet av en karriere — med identisk prosentvekst.< / span >
< / div >
< main >
< div class = "controls-card" >
< h2 > Sjekk selv< / h2 >
< div class = "controls-grid" >
< div class = "control-group" >
< label > Lønn A — lav startlønn< / label >
< div class = "val-row" >
< input type = "range" id = "salA" min = "300000" max = "1200000" step = "10000" value = "500000" >
< span class = "val-display" id = "salA-out" > 500 000 kr< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Lønn B — høy startlønn< / label >
< div class = "val-row" >
< input type = "range" id = "salB" min = "300000" max = "2000000" step = "10000" value = "550000" >
< span class = "val-display" id = "salB-out" > 550 000 kr< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Årslig lønnsvekst (% — lik for begge)< / label >
< div class = "val-row" >
< input type = "range" id = "pct" min = "1" max = "10" step = "0.5" value = "3.5" >
< span class = "val-display" id = "pct-out" > 3,5 %< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Antall år< / label >
< div class = "val-row" >
< input type = "range" id = "yrs" min = "5" max = "40" step = "1" value = "20" >
< span class = "val-display" id = "yrs-out" > 20 år< / span >
< / div >
< / div >
< / div >
< / div >
< div class = "stat-strip" >
< div class = "stat" >
< div class = "stat-label" > Lønn A etter < span class = "yr-lbl" > 20< / span > år< / div >
< div class = "stat-value" id = "st-finalA" > —< / div >
< div class = "stat-sub" id = "st-monthA" > —< / div >
< div class = "stat-sub" id = "st-subA" style = "margin-top:2px;" > —< / div >
< / div >
< div class = "stat" >
< div class = "stat-label" > Lønn B etter < span class = "yr-lbl" > 20< / span > år< / div >
< div class = "stat-value" id = "st-finalB" > —< / div >
< div class = "stat-sub" id = "st-monthB" > —< / div >
< div class = "stat-sub" id = "st-subB" style = "margin-top:2px;" > —< / div >
< / div >
< div class = "stat stat-diff" >
< div class = "stat-label" > B tjener mer enn A< / div >
< div class = "stat-value" id = "st-diffyr" style = "color:var(--accent);" > —< / div >
< div class = "stat-sub" id = "st-diffmnd" > —< / div >
< div class = "stat-sub" id = "st-diffstart" style = "margin-top:2px;" > —< / div >
< / div >
< div class = "stat" >
< div class = "stat-label" > Akkumulert differanse< / div >
< div class = "stat-value" id = "st-cumgap" > —< / div >
< div class = "stat-sub" id = "st-cumgap-sub" > over < span class = "yr-lbl" > 20< / span > år< / div >
< / div >
< / div >
<!-- Diagram 1: Årslønn -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Årslønn over tid< / div >
< div class = "chart-desc" > Begge lønninger vokser med samme prosentsats< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#1a4a8a;" > < / span > Lønn A< / span >
< span > < span class = "swatch" style = "background:#c0392b;" > < / span > Lønn B< / span >
< / div >
< / div >
< div class = "chart-wrap h-240" > < canvas id = "chart1" > < / canvas > < / div >
< / div >
<!-- Diagram 2: Årlig gap -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Absolutt lønnsforskjell per år< / div >
< div class = "chart-desc" > Kroneforskjellen i årslønn — vokser hvert år< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#4a3a8a;" > < / span > Gap (år)< / span >
< / div >
< / div >
< div class = "chart-wrap h-200" > < canvas id = "chart2" > < / canvas > < / div >
< / div >
< div class = "insight" id = "insight-monthly" > < / div >
<!-- Diagram 3: Månedlig gap -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Lønnsforskjell per måned< / div >
< div class = "chart-desc" > Hva B mottar ekstra på kontoen — hver måned< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#2c6e49;" > < / span > Gap (måned)< / span >
< / div >
< / div >
< div class = "chart-wrap h-200" > < canvas id = "chart3" > < / canvas > < / div >
< / div >
<!-- Diagram 4: Akkumulert -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Akkumulert total lønn utbetalt< / div >
< div class = "chart-desc" > Summen av alle utbetalinger gjennom hele perioden< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#1a4a8a;" > < / span > Akkum. A< / span >
< span > < span class = "swatch" style = "background:#c0392b;" > < / span > Akkum. B< / span >
< span > < span class = "swatch" style = "background:#b5620a;" > < / span > Akkum. gap< / span >
< / div >
< / div >
< div class = "chart-wrap h-240" > < canvas id = "chart4" > < / canvas > < / div >
< / div >
<!-- Forklaring -->
< div class = "explainer" >
< h3 > Hvorfor er dette viktig?< / h3 >
< p > Prosentvise lønnstillegg < strong > ser< / strong > rettferdige ut fordi alle får det samme prosenttallet. Men matematikken er asymmetrisk: jo høyere startlønn, jo flere kroner får man i absolutt tillegg — hvert eneste år.< / p >
< div class = "formula-box" >
Lønn etter n år = < span > Startlønn × < / span > < br >
Kroneforskjell = < span > (B₀ − × < / span >
< / div >
< p > Legg merke til at faktoren < em > (B₀ − < / em > — den opprinnelige forskjellen — aldri forsvinner. Den < strong > multipliseres< / strong > eksponentielt. Det er derfor gapet vokser selv om begge får akkurat samme prosentsats.< / p >
< p > Alternativet som bremser gapet er < strong > kronetillegg< / strong > : et fast beløp til alle, uavhengig av lønnsnivå. Det gir lavtlønte relativt sett mer og bremser den eksponentielle gapveksten. Norske fagforbund har historisk kjempet for nettopp dette.< / p >
< / div >
< / main >
< footer >
2026-03-13 13:18:45 +01:00
Laget med Chart.js · Tallene er illustrative og ikke finansiell rådgivning · < a href = "https://kode.naiv.no/olemd/forskjeller.naiv.no" > Kildekode< / a >
2026-03-13 13:09:04 +01:00
< / footer >
< script src = "app.js" > < / script >
< / body >
< / html >
