Vad är en kontrastkontroll och varför använda den?

Tillgänglighet & användbarhet

Tillräcklig kontrast ökar läsbarheten för alla — särskilt för användare med nedsatt syn, färgseendeproblem eller på skärmar med låg kvalitet.

WCAG 2.1-krav

Kontrollera 1.4.3 Kontrast (Minimumnivå), 1.4.6 Kontrast (Utökad) och 1.4.11 Kontrast för icke-text för UI-komponenter och grafik.

EAA / EN 301 549

Europeiska tillgänglighetsdirektivet hänvisar till EN 301 549 som i sin tur refererar WCAG — kontrast är en nyckeldel för att uppfylla skyldigheter.

Varumärke & designkvalitet

Tillgängliga färgpaletter skapar robusta, läsbara gränssnitt som fungerar i ljusa och mörka teman och på olika enheter.

WCAG 2.1 kontrasttrösklar (snabb referens)

Normal text
AA

Minsta förhållande: 4,5:1 (text under 24 px vanlig / 19 px fet).

Stor text
AA

Minsta förhållande: 3:1 (≥ 24 px vanlig eller ≥ 19 px fet).

UI-komponenter & grafik
1.4.11

Minsta kontrast mot intilliggande färger: 3:1 (fokusramar, formulärfält, ikoner etc.).

Testa färgkontrastkontrollen

Ange förgrunds- och bakgrundsfärger (HEX). Verktyget räknar ut kontrastkvoten och visar godkänd/ej godkänd för WCAG-nivåer. Resultat uppdateras medan du skriver.

Color Contrast Checker

Example text preview
Contrast ratio: 8.67:1

Normal text

Contrast Ratio:8.67:1

Normal Text (WCAG AA)

Pass ≥ 4.5

AAA

Pass ≥ 7.0

Vanliga frågor

Ändras kontrastkraven i WCAG 2.1?
Nej, kontrasttrösklarna förblir desamma i 2.1 (4,5:1 för normal text, 3:1 för stor text, 3:1 för icke-text UI/grafik).
Kräver EAA WCAG-kontrast?
Ja. EN 301 549 (som åberopas av EAA) införlivar WCAG 2.1-krav, inklusive färgkontrast för text och icke-text.
Vad räknas som ”stor text”?
Minst 18pt (24 px) vanlig vikt eller 14pt (19 px) fet — som kvalificerar för 3:1-tröskeln.

Gör kontrastkontroller till en del av din arbetsprocess

Kör kontrastkontroller under designgranskningar och kodgranskningar. Kombinera med automatisk skanning för att fånga problem i stor skala.

Testa Accessibility ScannerHämta gratis tillgänglighetswidget