Przejdź do treści
Discebo.dk

§ 02

Kontrast kolorów (WCAG)

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

Odpowiedź: 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.

Wzór

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 i jednostki we wzorze
SymbolZnaczenieJednostka
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

Ważność i źródło

Źródło
WCAG 2.1, succeskriterium 1.4.3 og 1.4.6 (W3C)

Nie dotyczy, gdy

  • 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.

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

  • 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

Dawca

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

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

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.

Krok za krokiem

  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).

Typowe błędy

  • 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.

Przykłady z codzienności

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

To znaczy: 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

To znaczy: 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

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

Reguła praktyczna

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

Jak sprawdzić odpowiedź

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