WCAG färgkontrast för designers
4.5:1-regeln, kontrastkvotens matematik och gratisverktyg för att kontrollera färgpar.
Om din text inte klarar WCAG AA-kontrast kan uppskattningsvis 285 miljoner synskadade personer inte läsa den. Dessutom står du på allt mer osäker juridisk mark i EU och USA. Den goda nyheten: regeln är enkel.
4.5:1-regeln
Brödtext måste ha ett kontrastförhållande på minst 4.5:1 mot sin bakgrund för att klara WCAG AA. Stor text (24px+ regular eller 18px+ fet) har en lägre gräns på 3:1.
För AAA-överensstämmelse: 7:1 för brödtext, 4.5:1 för stor text.
Hur kontrastkvoten beräknas
WCAG använder relativ luminans — omvandla varje färg till ett luminansvärde (0 = svart, 1 = vitt) med en specifik formel, beräkna sedan (L1 + 0.05) / (L2 + 0.05), där L1 är den ljusare färgen.
Du behöver inte göra matematiken — använd vår gratis kontroll av kontrast för att lägga in två färger och se kvoten.
Vanliga misslyckanden
- Ljusgrå på vit — #999 på #fff = 2.85 (misslyckas). #767676 på #fff = 4.54 (klarar).
- Vit på gul — misslyckas nästan alltid. Använd mörk text på gul.
- Färgade länkar i brödtext — de flesta blå länkar klarar sig mot vit men misslyckas mot ljusgrå. Testa den faktiska omgivande bakgrunden.
- Varumärkesfärger som ser bra ut — de misslyckas ofta. Lägg till en vitaktig bakgrund eller mörka texten.
Välja tillgängliga färgpar
Tre pålitliga mönster:
- Mörk på ljus — #1f2937 på #fff = 14:1 (perfekt).
- Vit på mörk — #fff på #1f2937 = 14:1 (perfekt).
- Mörk på accentfärg — #1f2937 på #fbbf24 = 9:1 (perfekt för knappar).
Bortom text
WCAG 2.1 kräver också 3:1 för icke-text element (knappar, fokusringar, formulärkanter). Kontrollen hanterar båda.
Wallpapers som inte kämpar mot dina widgets
Om du är designer och sätter wallpapers bakom klockwidgets och notiser, välj wallpapers med kontrast under 5:1 i widgetzonerna. Vårt Gaussian blur-verktyg kan mjuka upp röriga områden på valfri wallpaper för bättre widgetläsbarhet.
Prova våra gratisverktyg
De flesta av dessa guider paras med ett praktiskt verktyg du kan använda direkt — ingen registrering krävs för första körningen:
- Bildstorleksändrare — pixelperfekt nedskalning + uppskalning.
- Konvertera till WebP — 30-50% mindre filer än JPG.
- Borttagning av bakgrund — ett klick, transparent PNG.
- Favicon-generator — alla webbläsarstorlekar från en källa.
- Sociala medier-storleksändrare — varje plattforms exakta dimensioner.
- Satsvis bearbetning — tillämpa valfritt verktyg på upp till 200 bilder samtidigt.
Bläddra i hela verktygskatalogen.
