§ 12

Kontrastforhold mellem folie- og bundfarve

Er kontrasten mellem foliefarven og bundfarven høj nok til at teksten er let at læse?

Svar: Beregner kontrastforholdet mellem to farver (fx foliefarve og skiltets bundfarve) efter W3C's WCAG 2.1-kontrastformel, som bruges til at vurdere om tekst er let læselig. Indtast RGB-værdier (0-255) for hhv. forgrunds- og baggrundsfarve. Et forhold på mindst 4,5:1 svarer til WCAG's krav til normal tekst, 3:1 til stor tekst. Erstatter ikke en visuel vurdering under de faktiske lysforhold på stedet.

Formel

relativ luminans L = 0,2126·R + 0,7152·G + 0,0722·B, hvor R/G/B er gamma-korrigerede kanalværdier (WCAG 2.1, W3C)

kontrastforhold = (L_lys + 0,05) ÷ (L_mørk + 0,05)

kanalværdi v (0-255, normeret til 0-1): v ≤ 0,03928 → v/12,92; ellers ((v+0,055)/1,055)^2,4

Symboler og enheder i formlen
Symbol	Betydning	Enhed
r1	Forgrund — rød (R)	—
g1	Forgrund — grøn (G)	—
b1	Forgrund — blå (B)	—
r2	Baggrund — rød (R)	—
g2	Baggrund — grøn (G)	—
b2	Baggrund — blå (B)	—
=	Kontrastforhold	:1
=	Relativ luminans, forgrund	—
=	Relativ luminans, baggrund	—

Gyldighed og kilde

Kilde: WCAG 2.1 (W3C)

Gælder ikke når

WCAG 2.1 anbefaler mindst 4,5:1 til normal brødtekst og 3:1 til stor/fed tekst. Gælder fladt, jævnt lys — vurder altid skiltet i både dagslys og mørke i praksis.

Regneeksempel

Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.

Sat ind

Forgrund — rød (R)255
Forgrund — grøn (G)255
Forgrund — blå (B)255
Baggrund — rød (R)200
Baggrund — grøn (G)30
Baggrund — blå (B)30

Giver

Kontrastforhold5,74 :1
Relativ luminans, forgrund1,000
Relativ luminans, baggrund0,133

Kun for medlemmer

Selve beregneren er låst

Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

Sådan bruger du den

Når du vælger folie- og bundfarve til et skilt, skal teksten kunne læses, også af folk med nedsat syn. WCAG's kontrastformel giver et tal, der er let at sammenligne med anbefalingerne: mindst 4,5:1 til normal tekst og 3:1 til stor tekst.

Trin for trin

Find RGB-værdierne for de to farver i farvekortet eller designprogrammet.
Indtast forgrund (tekst) og baggrund (bund).
Beregneren regner luminansen for hver farve og forholdet mellem dem.
Se om forholdet når 4,5:1 til normal tekst eller 3:1 til stor tekst.

Typiske fejl

At vurdere kontrasten på en skærm. Folie og print ser anderledes ud i dagslys.
At glemme at belyste skilte om aftenen har en anden kontrast end om dagen.
At tro at to «stærke» farver giver god kontrast. Rød og grøn kan have næsten samme luminans.

Eksempler fra hverdagen

Hvid tekst på rød bund

En pizzeria vil have hvid tekst på en rød facadeplade.

Forgrund — rød (R): 255
Forgrund — grøn (G): 255
Forgrund — blå (B): 255
Baggrund — rød (R): 200
Baggrund — grøn (G): 30
Baggrund — blå (B): 30

Det betyder: Kontrasten er 5,74 :1. Det klarer kravet til normal tekst.

Gul tekst på hvid bund

En kunde ønsker gul tekst på hvid bund.

Forgrund — rød (R): 255
Forgrund — grøn (G): 204
Forgrund — blå (B): 0
Baggrund — rød (R): 255
Baggrund — grøn (G): 255
Baggrund — blå (B): 255

Det betyder: Kontrasten er kun 1,51 :1. Teksten bliver svær at læse. Foreslå en sort eller mørkeblå kant om bogstaverne, eller en anden bund.

Sort tekst på gul bund

Samme gule farve bruges nu som bund med sort tekst.

Forgrund — rød (R): 0
Forgrund — grøn (G): 0
Forgrund — blå (B): 0
Baggrund — rød (R): 255
Baggrund — grøn (G): 204
Baggrund — blå (B): 0

Det betyder: Kontrasten er 13,89 :1. Det er meget højt og en af de mest læsbare kombinationer.

Tommelfingerregel

Lys tekst på mørk bund eller omvendt. Sort på hvid er 21:1, det højest mulige.

Sådan tjekker du svaret

Byt om på forgrund og baggrund. Forholdet skal være det samme.