Contrast

<div style={{ padding: '4em' }}>
    <Paragraph>
      Det fine med kontrastseksjoner er at man ikke trenger å tenke på hvordan
      de skal brukes. Du kan bare plassere dem rundt litt kode, og komponentene
      inni vil endre utseendet basert på CSS-variabler.
    </Paragraph>
  </div>
  <Contrast>
    <div style={{ padding: '4em' }}>
      <Paragraph>
        Det fine med kontrastseksjoner er at man ikke trenger å tenke på hvordan
        de skal brukes. Du kan bare plassere dem rundt litt kode, og
        komponentene inni vil endre utseendet basert på CSS-variabler.
      </Paragraph>
    </div>
  </Contrast>

Bruk Contrast når

du vil skape et visuelt hierarki og informere brukeren om hvilke handlinger og interaksjoner som er viktige, og hvilke som er sekundære
du vil gi fokus til bestemte elementer i designet og fange brukerens oppmerksomhet

Riktig bruk av Contrast på ulike seksjoner kan være et effektfullt grep som bidrar til intuitiv navigering og en mer brukervennlig side. Contrast-seksjoner kan også redusere mengden lys, som gjør det lettere for øynene å se på skjermen, og kan forbedre lesbarheten på avstand og ved ulike lysforhold.

Eksempler

Før og etter Contrast
<div style={{ padding: '4em' }}>
    <Paragraph>
      Det fine med kontrastseksjoner er at man ikke trenger å tenke på hvordan
      de skal brukes. Du kan bare plassere dem rundt litt kode, og komponentene
      inni vil endre utseendet basert på CSS-variabler.
    </Paragraph>
  </div>
  <Contrast>
    <div style={{ padding: '4em' }}>
      <Paragraph>
        Det fine med kontrastseksjoner er at man ikke trenger å tenke på hvordan
        de skal brukes. Du kan bare plassere dem rundt litt kode, og
        komponentene inni vil endre utseendet basert på CSS-variabler.
      </Paragraph>
    </div>
  </Contrast>

Bruk Contrast når

Retningslinjer

Eksempler

Før og etter Contrast