Kontrastkontroll
Kontrastkontrollen beräknar kontrastförhållandet enligt WCAG 2.1 mellan en textfärg och en bakgrundsfärg och visar om kombinationen klarar AA och AAA för normal och stor text.
Om verktyget
Kontrastkontrollen beräknar kontrastförhållandet enligt WCAG 2.1 mellan en textfärg och en bakgrundsfärg och visar om kombinationen klarar AA och AAA för normal och stor text.
Så använder du det
- Ange eller välj textfärgen.
- Ange eller välj bakgrundsfärgen (hex-värden fungerar, även 3-siffrig kortform).
- Läs av kontrastförhållandet och resultaten för AA/AAA för normal och stor text.
- Justera någon av färgerna tills den nivå du behöver klaras.
Bra att veta
- WCAG 2.1 AA kräver ett kontrastförhållande på minst 4.5:1 för normal text och 3:1 för stor text.
- WCAG 2.1 AAA kräver minst 7:1 för normal text och 4.5:1 för stor text.
- Stor text betyder minst 18 pt (24 px) i normal vikt eller 14 pt (cirka 18.66 px) i fetstil.
- Kontrastförhållanden går från 1:1 (identiska färger) till 21:1 (svart på vitt).
- Förhållandet beräknas utifrån varje färgs relativa luminans, enligt WCAG-formeln.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Vilket kontrastförhållande krävs för tillgänglighet?
För WCAG 2.1 nivå AA behöver normal text minst 4.5:1 och stor text minst 3:1. Nivå AAA höjer detta till 7:1 och 4.5:1.
Är vit text på grönt tillgänglig?
Det beror på nyansen. Många klara gröna färger klarar inte AA med vit text; mörkare gröna klarar det oftast. Ange dina exakta hex-värden för att kontrollera.
Vad räknas som stor text i WCAG?
Text som är minst 18 punkter (24 px) i normal vikt, eller minst 14 punkter (cirka 18.66 px) i fetstil.
Gäller WCAG-kontrast för knappar och ikoner?
Framgångskriteriet 1.4.11 i WCAG 2.1 kräver minst 3:1 i kontrast för gränssnittskomponenter och meningsbärande grafik mot omgivningen.