Zum Inhalt springen
Discebo.dk

§ 02

Farbkontrast (WCAG)

Opfylder min tekstfarve på denne baggrund WCAG's krav til kontrast?

Antwort: 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.

Formel

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)

Symbole und Einheiten in der Formel
SymbolBedeutungEinheit
trTekstfarve — rød (R)0-255
tgTekstfarve — grøn (G)0-255
tbTekstfarve — blå (B)0-255
brBaggrundsfarve — rød (R)0-255
bgBaggrundsfarve — grøn (G)0-255
bbBaggrundsfarve — blå (B)0-255
=Kontrastforhold: 1
=Tekstfarvens relative luminans
=Baggrundsfarvens relative luminans

Gültigkeit und Quelle

Quelle
WCAG 2.1, succeskriterium 1.4.3 og 1.4.6 (W3C)

Gilt nicht, wenn

  • Formlen er W3C's officielle definition, men den tager ikke højde for skrifttype, skriftvægt eller antialiasing. Brug altid et rigtigt tilgængeligheds-værktøj (fx browserens DevTools) som endeligt tjek før aflevering.

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

  • Tekstfarve — rød (R)30 0-255
  • Tekstfarve — grøn (G)30 0-255
  • Tekstfarve — blå (B)30 0-255
  • Baggrundsfarve — rød (R)255 0-255
  • Baggrundsfarve — grøn (G)255 0-255
  • Baggrundsfarve — blå (B)255 0-255

Geber

  • Kontrastforhold16,67 : 1
  • Tekstfarvens relative luminans0,013
  • Baggrundsfarvens relative luminans1,000

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

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.

Schritt für Schritt

  1. Find tekstfarven og baggrundsfarven som RGB, fx med farvevælgeren i DevTools.
  2. Linearisér hver kanal efter W3C's formel, og regn den relative luminans for begge farver.
  3. Del den lyseste luminans + 0,05 med den mørkeste + 0,05.
  4. Sammenlign med kravet: 4,5:1 for normal tekst, 3:1 for stor tekst (fra 24 px eller 18,66 px fed) og for knappers kant og ikoner (1.4.11).

Typische Fehler

  • At måle på en farve med gennemsigtighed (opacity eller rgba). Du skal måle den farve, der faktisk bliver vist oven på baggrunden.
  • At glemme tekst på billeder og gradienter. Mål på det lyseste sted bag teksten.
  • At bruge 3 : 1-grænsen for alt. Den gælder kun stor tekst og grafiske elementer, ikke brødtekst.

Beispiele aus dem Alltag

Grå brødtekst på hvid baggrund

Designet bruger #767676 (118, 118, 118) til brødtekst på hvidt for at gøre siden «luftig».

Tekstfarve — rød (R)
118 0-255
Tekstfarve — grøn (G)
118 0-255
Tekstfarve — blå (B)
118 0-255
Baggrundsfarve — rød (R)
255 0-255
Baggrundsfarve — grøn (G)
255 0-255
Baggrundsfarve — blå (B)
255 0-255

Es bedeutet: Kontrasten er 4,54 : 1. Det er lige netop over 4,5 : 1, så det består AA. Lysere grå må teksten ikke blive.

Hvid tekst på orange knap

En kunde vil have hvid tekst på sin orange brandfarve #FF6B00 (255, 107, 0) i købsknappen.

Tekstfarve — rød (R)
255 0-255
Tekstfarve — grøn (G)
255 0-255
Tekstfarve — blå (B)
255 0-255
Baggrundsfarve — rød (R)
255 0-255
Baggrundsfarve — grøn (G)
107 0-255
Baggrundsfarve — blå (B)
0 0-255

Es bedeutet: 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.

Mørkeblå på lysegrå i en sidefod

Sidefoden har tekst i #1E3A5F (30, 58, 95) på en lysegrå flade #F5F5F5 (245, 245, 245).

Tekstfarve — rød (R)
30 0-255
Tekstfarve — grøn (G)
58 0-255
Tekstfarve — blå (B)
95 0-255
Baggrundsfarve — rød (R)
245 0-255
Baggrundsfarve — grøn (G)
245 0-255
Baggrundsfarve — blå (B)
245 0-255

Es bedeutet: Kontrasten er 10,55 : 1. Den består også AAA (7 : 1) for normal tekst, så den kan bruges til småt.

Faustregel

Sort på hvid er 21 : 1. Grå lysere end #767676 på hvid fejler AA for brødtekst.

So überprüfst du die Antwort

Tjek samme farvepar i DevTools (Inspect → farveprøven viser kontrasten). Tallene skal være ens på anden decimal.