§ 02
Opfylder min tekstfarve på denne baggrund WCAG's krav til kontrast?
Svar: WCAG kræver et minimums-kontrastforhold mellem tekst og baggrund, så tekst kan læses af brugere med nedsat synsstyrke. Kontrastforholdet regnes ud fra begge farvers relative luminans (W3C's formel, som lineariserer sRGB-værdierne og vægter rød/grøn/blå forskelligt efter øjets følsomhed). Indtast begge farver som RGB (0-255) for at få det faktiske kontrastforhold. Værktøjet erstatter ikke en fuld tilgængeligheds-gennemgang, men giver et hurtigt tjek af netop dette ene kriterie.
relativ luminans L = 0,2126×R' + 0,7152×G' + 0,0722×B', hvor hver kanal først lineariseres: c' = c/12,92 hvis c ≤ 0,03928, ellers ((c+0,055)/1,055)^2,4 (c = kanalværdi/255)
kontrastforhold = (L_lys + 0,05) / (L_mørk + 0,05)
WCAG-krav: 4,5:1 (AA, normal tekst), 3:1 (AA, stor tekst), 7:1 (AAA, normal tekst)
| Symbol | Betydning | Enhed |
|---|---|---|
| tr | Tekstfarve — rød (R) | 0-255 |
| tg | Tekstfarve — grøn (G) | 0-255 |
| tb | Tekstfarve — blå (B) | 0-255 |
| br | Baggrundsfarve — rød (R) | 0-255 |
| bg | Baggrundsfarve — grøn (G) | 0-255 |
| bb | Baggrundsfarve — blå (B) | 0-255 |
| = | Kontrastforhold | : 1 |
| = | Tekstfarvens relative luminans | |
| = | Baggrundsfarvens relative luminans |
Gælder ikke når
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
Giver
Kun for medlemmer
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.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.
Før en side går i luften, skal tekst og knapper have nok kontrast til baggrunden, så folk med nedsat syn kan læse dem. Det er WCAG 1.4.3, og offentlige sites i Danmark skal overholde det efter webtilgængelighedsloven. Beregneren regner kontrastforholdet ud fra to RGB-farver.
Designet bruger #767676 (118, 118, 118) til brødtekst på hvidt for at gøre siden «luftig».
Det betyder: Kontrasten er 4,54 : 1. Det er lige netop over 4,5 : 1, så det består AA. Lysere grå må teksten ikke blive.
En kunde vil have hvid tekst på sin orange brandfarve #FF6B00 (255, 107, 0) i købsknappen.
Det betyder: Kontrasten er kun 2,86 : 1. Det fejler både for normal og stor tekst. Brug mørk tekst på knappen, eller gør orange mørkere.
Sidefoden har tekst i #1E3A5F (30, 58, 95) på en lysegrå flade #F5F5F5 (245, 245, 245).
Det betyder: Kontrasten er 10,55 : 1. Den består også AAA (7 : 1) for normal tekst, så den kan bruges til småt.
Sort på hvid er 21 : 1. Grå lysere end #767676 på hvid fejler AA for brødtekst.
Tjek samme farvepar i DevTools (Inspect → farveprøven viser kontrasten). Tallene skal være ens på anden decimal.