Färgkontrastkontroll
Se till att din text och UI uppfyller WCAG 2.1-kontrastkrav, en viktig del av EAA/EN 301 549-efterlevnad. Klistra in varumärkesfärger, förhandsgranska kombinationer och få tydligt godkännande eller varning för normal text, stor text och UI-komponenter.
Betrodd av organisationer över hela Europa som arbetar mot tillgänglighetskrav enligt WCAG och EAA
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Contrast Ratio:8.67:1
Vad är en kontrastkontroll och varför använda den?
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.
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.
Europeiska tillgänglighetsdirektivet hänvisar till EN 301 549 som i sin tur refererar WCAG, kontrast är en nyckeldel för att uppfylla skyldigheter.
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)
Minsta förhållande: 4,5:1 (text under 24 px vanlig / 19 px fet).
Minsta förhållande: 3:1 (≥ 24 px vanlig eller ≥ 19 px fet).
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.
Vanliga frågor
Ändras kontrastkraven i WCAG 2.1?
Kräver EAA WCAG-kontrast?
Vad räknas som ”stor text”?
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.