Askem

Gratis verktyg

Färgkontrastkontroll

Kontrollera kontrastförhållandet mellan två färger mot WCAG 2.1 AA- och AAA-krav. Testar normal text, stor text och grafiska UI-komponenter — samma kriterier som krävs av tillgänglighetsdirektivet.

Text color

#FFFFFF

Background color

#4D65FF

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (24px) — The quick brown fox jumps.

4.54:1 contrast ratio
WCAG AAPassNormal text4.5:1
WCAG AAPassLarge text3:1
WCAG AAAFailNormal text7:1
WCAG AAAPassLarge text4.5:1
WCAG 2.1PassUI elements3:1

Color blindness simulation

Sample text preview

Large text

Protanopia

~1.3% of males

Fail

Sample text preview

Large text

Deuteranopia

~1.2% of males

Pass

Sample text preview

Large text

Tritanopia

~0.01% of population

Pass

Sample text preview

Large text

Achromatopsia

~0.003% of population

Pass

Vad är en färgkontrastkontroll?

En färgkontrastkontroll är ett verktyg som beräknar luminansförhållandet mellan en förgrundsfärg (text) och en bakgrundsfärg och sedan jämför det med WCAG 2.1-tillgänglighetströsklar. Otillräcklig färgkontrast är det vanligaste WCAG-felet på webben — det finns på 83,6 % av startsidorna enligt WebAIM Million 2024-analysen. Detta gratisverktyg från Askem testar alla fem WCAG-kontrastkriterier och inkluderar simulering av färgblindhet för fyra syntyper.

WCAG 2.1 kontrastkrav

ElementWCAG AAWCAG AAA
Normal text (< 18pt / < 14pt fet)4,5:17:1
Stor text (≥ 18pt / ≥ 14pt fet)3:14,5:1
UI-komponenter och grafiska objekt3:1—

Hur kontrollerar man färgkontrast

Ange din textfärg och bakgrundsfärg med hex-värde, RGB-värden eller färgväljaren. Verktyget beräknar den relativa luminansen för varje färg och dividerar det ljusare värdet med det mörkare för att producera kontrastförhållandet. Sedan jämförs resultatet med alla fem WCAG 2.1-trösklar och visar godkänt eller underkänt för var och en.

Om ett färgpar underkänns föreslår verktyget automatiskt den närmaste godkända kombinationen genom att justera ljusheten på din förgrundsfärg. Klicka på Tillämpa för att uppdatera båda färgerna direkt. URL:en uppdateras vid varje ändring, så du kan dela en specifik kontrastkontroll genom att kopiera länken.

Färgkontrast och tillgänglighetsdirektivet

Tillgänglighetsdirektivet (EAA) hänvisar till standarden EN 301 549, som inkluderar kraven i WCAG 2.1 nivå AA. Det innebär att organisationer som omfattas av EAA måste säkerställa minst 4,5:1 kontrast för normal text, 3:1 för stor text och 3:1 för UI-komponenter.

En tillgänglighetsrevision flaggar typiskt färgkontrast som ett av de första problemen. Att använda en kontrastkontroll under designfasen förhindrar dessa brister innan de når produktion.

Varför färgkontrast är viktigt för tillgänglighet

När text inte har tillräcklig kontrast mot sin bakgrund blir den svår eller omöjlig att läsa för personer med nedsatt syn, färgblindhet eller alla som använder en skärm i starkt solljus. Bra kontrast gynnar alla användare — inte bara de med funktionsnedsättningar.

Det här verktyget kontrollerar ett enskilt färgpar. För att skanna hela din webbplats efter kontrastproblem och andra tillgänglighetsbrister automatiskt, se Askem Kvalitetssäkring.

Senast uppdaterad: mars 2026

Vanliga frågor

Vilket kontrastförhållande krävs för WCAG AA?
WCAG 2.1 nivå AA kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text. Stor text definieras som 18 punkter (24px) eller 14 punkter (18,66px) i fetstil.
Vilket kontrastförhållande krävs för WCAG AAA?
WCAG 2.1 nivå AAA kräver ett kontrastförhållande på minst 7:1 för normal text och 4,5:1 för stor text. AAA är den högsta nivån av överensstämmelse.
Vad räknas som stor text i WCAG?
Stor text är 18 punkter (24px) eller större, eller 14 punkter (18,66px) i fetstil eller större. Stor text har ett lägre kontrastkrav eftersom större tecken är lättare att läsa vid lägre kontrast.
Vad är minimikontrastet för UI-komponenter?
WCAG 2.1 framgångskriterium 1.4.11 kräver ett kontrastförhållande på minst 3:1 för användargränssnittskomponenter (som formulärkanter, knappar och fokusindikatorer) och grafiska objekt.
Kräver tillgänglighetsdirektivet färgkontrastöverensstämmelse?
Ja. Tillgänglighetsdirektivet (EAA) hänvisar till standarden EN 301 549, som inkluderar kraven i WCAG 2.1 nivå AA. Det innebär att alla kontrastkrav — 4,5:1 för normal text, 3:1 för stor text och 3:1 för UI-komponenter — gäller för webbplatser och digitala tjänster som omfattas av EAA.
Hur åtgärdar jag ett underkänt kontrastförhållande?
Öka ljusskillnaden mellan förgrunds- och bakgrundsfärger. Gör ljus text mörkare på en ljus bakgrund, eller ljusare text på en mörk bakgrund. Det här verktyget föreslår automatiskt den närmaste godkända färgkombinationen när ett par underkänns.
Hur påverkar färgblindhet kontrastuppfattningen?
Färgblindhet förändrar vilka färger en person kan urskilja, men WCAG-kontrastförhållanden baseras på luminans, inte nyans. Ett färgpar som klarar WCAG-kontrastkraven förblir generellt läsbart för personer med färgblindhet. Det här verktyget visar simuleringar för protanopi, deuteranopi, tritanopi och akromatopsi så att du kan verifiera.
Kan jag dela mina kontrastkontrollresultat?
Ja. URL:en uppdateras automatiskt med dina valda färger. Kopiera URL:en för att dela en specifik färgkombination. Du kan också klicka på Kopiera resultat för att få en textsammanfattning att klistra in i dokumentation eller chatt.
Vad är en färgkontrastkontroll?
En färgkontrastkontroll är ett verktyg som beräknar luminansförhållandet mellan en förgrundsfärg (text) och en bakgrundsfärg och sedan jämför det med WCAG 2.1-tillgänglighetströsklar. Det hjälper designers, utvecklare och innehållsteam att verifiera att deras färgval uppfyller tillgänglighetsstandarder innan publicering.
Är denna kontrastkontroll gratis att använda?
Ja. Denna färgkontrastkontroll är helt gratis utan inloggning, konto eller användningsbegränsningar. Den körs helt i din webbläsare — ingen data skickas till någon server.

Det här kontrollerar ett färgpar. Askem skannar hela din webbplats automatiskt.

  • Kontinuerlig WCAG-övervakning
  • Kontrast, alt-text, rubriker och mer
  • GDPR-kompatibel — EU-hostning
Boka möte