Ljusgrå text på en vit bakgrund kan se elegant och minimalistisk ut med ett ögonkast – och vara helt oläslig för användare med synnedsättning, starkt solljus på skärmen eller helt enkelt ansträngd ögon i slutet av en arbetsdag. Färgkontrast är ett av de mest "tekniska" kriterierna för tillgänglighet — det finns exakta siffror att uppfylla — men det är också ett av de enklaste att testa och fixa i förväg.

Kort sagt – vad den här guiden täcker

  1. Vilka förhållanden WCAG kräver
  2. Varför stor text tillåts mindre kontrast
  3. Hur man kontrollerar ett kontrastförhållande i praktiken
  4. Hur man väljer en tillgänglig färgpalett i förväg

Vilka förhållanden WCAG kräver

WCAG definierar ett kontrastförhållande som ett tal mellan 1:1 (ingen kontrast alls — identisk färg) och 21:1 (högsta möjliga kontrast — rent svart på rent vitt). På nivå AA (den obligatoriska nivån på de flesta platser, inklusive Israel) är kravet ett förhållande på minst 4,5:1 mellan vanlig text och bakgrunden bakom. På den strängare AAA-nivån stiger kravet till 7:1 .

Varför stor text tillåts mindre kontrast

Stor text förblir läsbar även med lägre kontrast, så WCAG sätter det enklare tröskelvärde: 3:1 på nivå AA (istället för 4,5:1) och 4,5:1 på nivå AAA (istället för 7:1). "Stor text" definieras som text 18 punkter eller större (cirka 24px), eller 14 punkter eller större (ca 18,7px) om den är fetstil. Stora rubriker kan till exempel "ge råd med" något lägre kontrast än ett vanligt brödstycke och ändå uppfylla kravet.

Illustrativt diagram Jämför kontrastförhållanden Tre text-på-bakgrundsexempel med olika kontrastförhållanden Kontrastförhållande mellan text och bakgrund Exempeltext 1.8:1 — ✕ misslyckas Exempeltext 7.1:1 — ✓ möter AAA också Exempeltext 5.4:1 — ✓ uppfyller nivå AA Vanlig text: minst 4,5:1 · Stor text (24px+, eller 18,7px fetstil): minst 3:1 Verktyg som WebAIM Contrast Checker ger dig det exakta förhållandet innan du slutför en färgpalett
Tre text-på-bakgrundsexempel: för lågt förhållande (1,8:1) misslyckas även på grundnivån; de andra två kvoterna uppfyller AA- respektive AAA-kraven.

Hur man kontrollerar ett kontrastförhållande i praktiken

Det finns inget behov av att beräkna det manuellt – gratisverktyg som WebAIM Contrast Checker låter dig ange text- och bakgrundsfärgkoder och omedelbart få det exakta förhållandet och en godkänd/underkänd poäng för varje nivå. Det är värt att kontrollera inte bara text på en solid bakgrund, utan även text över bakgrundsbilder eller gradienter – där kontrasten kan variera mellan olika områden i samma bild, så det är bäst att testa den mest "problematiska" platsen.

💡 Praktiskt tips

Inte bara text: samma kontrastkrav (vid en enklare tröskel, 3:1) gäller även för grafiska UI-komponenter som formfältskonturer, funktionella ikoner och knappkanter – inte bara för bokstäver.

Hur man väljer en tillgänglig färgpalett i förväg

Det mest effektiva tillvägagångssättet är att kontrollera kontrasten i malldesignstadiet, inte i varje dokument separat. När du väljer varumärkesfärger för rubriker, brödtext och länkar är det värt att bekräfta i förväg att varje text-bakgrundskombination du faktiskt använder uppfyller minst 4,5:1. På så sätt "ärver" varje nytt dokument som skapas från mallen automatiskt korrekt kontrast, istället för att kontrollera varje dokument separat efter att det redan har skrivits.

Vill du veta om dina dokument uppfyller kontrastkraven?

Vårt verktyg kontrollerar färgkontrasten som en del av den automatiska skanningen av varje PDF-fil på din webbplats.

Skanna din webbplats gratis ←