Modul 3 · Kapitel 3.2

Färg, typografi och läsbarhet

Design ska hjälpa användaren att läsa, förstå och hitta rätt.

Mål

Efter kapitlet ska du kunna...

ange färger med namn, hex, RGB och HSL
förstå värdeområdena i RGB och HSL
kontrollera kontrast mellan text och bakgrund
välja läsbara fonter och font stacks
använda line-height och text-align med omdöme

Färgformat

Fyra sätt att ange färg

Format	Exempel
Namn	`green`
Hex	`#40A0DC`
RGB	`rgb(64 160 220)`
HSL	`hsl(201 69% 56%)`

Färg i CSS

Text, bakgrund och varning

body {
  color: #172026;
  background-color: rgb(246 248 247);
}

.warning {
  background-color: hsl(35 90% 55%);
}

Så visas färgerna i webbläsaren

Vanlig text på sidan

Texten använder color: #172026 och sidans bakgrund använder rgb(246 248 247).

Det här är en varningsruta med hsl(35 90% 55%).

Hexkod

Tre par beskriver RGB

En hexkod börjar med # och har tre par tecken: rött, grönt och blått. Varje par går från 00 till FF, vilket motsvarar 0 till 255 i RGB.

#40A0DC

40 är röd kanal och betyder 64.
A0 är grön kanal och betyder 160.
DC är blå kanal och betyder 220.

Därför är #40A0DC samma färg som rgb(64 160 220).

RGB

Rött, grönt och blått ljus

Varje kanal går från 0 till 255.
rgb(0 0 0) är svart.
rgb(255 255 255) är vitt.
rgb(255 0 0) är rött.

HSL

Färgton, mättnad och ljushet

Del	Värde
Hue	`0–360`: röd 0, grön 120, blå 240
Saturation	`0–100%`: grått till fullt mättad
Lightness	`0–100%`: svart till vitt

Interaktiv färgväljare

Jämför RGB och HSL

Testa färgen

RGB

Röd 64

Grön 160

Blå 220

HSL

Hue 201

Röd 0/360Grön 120Blå 240

Saturation 69%

Lightness 56%

background-color: #40A0DC;
background-color: rgb(64 160 220);
background-color: hsl(201 69% 56%);

Kontrast

Texten måste gå att läsa

Ljusgrå text på vit bakgrund är svårläst.

Mörk text på vit bakgrund är tydligare.

I övningen är målet minst 7:1, vilket motsvarar WCAG AAA för vanlig text.

Interaktiv kontrast

Testa två färger

Textfärg Bakgrund

GODKÄNT · 15.98:1 · klarar 7:1

Exempeltext

Byt färger och kontrollera läsbarheten.

Fonter

Olika kategorier har olika uttryck

Sans-serif

Webbutveckling Arial

Webbutveckling Helvetica

Webbutveckling Verdana

Serif

Webbutveckling Georgia

Webbutveckling Times New Roman

Webbutveckling Cambria

Monospace

Webbutveckling Consolas

Webbutveckling Courier New

Webbutveckling Menlo

Cursive och display

Webbutveckling Brush Script MT

Webbutveckling Copperplate

Webbutveckling Impact

Brödtext bör vara lättläst. Dekorativa fonter används bäst i små mängder.

Font stack

Ge webbläsaren alternativ

body {
  font-family: Arial, Helvetica, sans-serif;
}

Försök använda Arial.
Om den saknas: använd Helvetica.
Annars: använd en tillgänglig sans-serif-font.

Interaktiv font stack

Jämför textens uttryck

Läsbar rubrik

Webbutveckling handlar om både kod och tydlig kommunikation.

font-family: system-ui, sans-serif;

Systemfont eller webfont?

Prestanda och integritet

Systemfont	Google Fonts
Finns ofta redan på enheten.	Kan behöva laddas från en extern server.
Snabb och enkel.	Ger fler val men kan påverka laddning och integritet.

Radavstånd

line-height

p {
  line-height: 1.5;
}

För brödtext fungerar ofta ett värde runt 1.5.

För litet radavstånd gör raderna svårare att följa.

Textjustering

Vänster är oftast lättast att läsa

Värde	Passar för
`left`	Längre stycken och vanlig brödtext.
`center`	Korta rubriker eller kort introduktion.
`right`	Kort metadata, datum eller siffror.

Interaktiv text

Ändra radavstånd och justering

line-height 1.5

Det här är ett längre textstycke. Ändra inställningarna och jämför hur lätt eller svårt det blir att följa raderna.

Kontrollfråga

Vilket val är bäst för brödtext?

Ett långt stycke är centrerat och har line-height: 1.

Vad bör ändras?

Svar: vänsterställ texten och öka radavståndet till ungefär 1.5.

Prova själv

Förbättra profilsidan

Välj text- och bakgrundsfärg.
Beskriv samma färg med RGB och HSL.
Kontrollera att kontrasten når 7:1.
Lägg en font stack på body.
Sätt line-height: 1.5 på stycketext.

Sammanfattning

Kom ihåg

Hex, RGB och HSL kan beskriva samma färg.
Kontrast är viktigare än diskreta färgskillnader.
Font stacks ger webbläsaren flera alternativ.
Systemfonter är snabba och finns ofta redan på enheten.
Vänsterställd text med line-height runt 1.5 är ofta lättläst.