WCAG farvekontrast for designere
4.5:1 reglen, kontrastforhold matematik og gratis værktøjer til at tjekke ethvert farvepar.
Hvis din tekst ikke opfylder WCAG AA kontrast, kan anslået 285 millioner synshandicappede mennesker ikke læse den. Plus du er på stadig mere usikker juridisk grund i EU og USA. Den gode nyhed: reglen er simpel.
4.5:1 reglen
Brødtekst skal have et kontrastforhold på mindst 4.5:1 mod sin baggrund for at bestå WCAG AA. Stor tekst (24px+ normal eller 18px+ fed) har en lavere grænse på 3:1.
For AAA overensstemmelse: 7:1 for brødtekst, 4.5:1 for stor tekst.
Hvordan kontrastforhold beregnes
WCAG bruger relativ luminans — konverter hver farve til en luminansværdi (0 = sort, 1 = hvid) ved hjælp af en specifik formel, beregn derefter (L1 + 0.05) / (L2 + 0.05), hvor L1 er den lysere farve.
Du behøver ikke at lave matematikken — brug vores gratis kontrastkontrol til at indsætte to farver og se forholdet.
Almindelige fejltilfælde
- Lys grå på hvid — #999 på #fff = 2.85 (fejler). #767676 på #fff = 4.54 (består).
- Hvid på gul — fejler næsten altid. Brug mørk tekst på gul.
- Farvede links i brødtekst — de fleste blå links består mod hvid, men fejler mod lys grå. Test den faktiske omgivende baggrund.
- Brandfarver der ser godt ud — de fejler ofte. Tilføj en off-white baggrund eller mørkere teksten.
Valg af tilgængelige farvepar
Tre pålidelige mønstre:
- Mørk på lys — #1f2937 på #fff = 14:1 (perfekt).
- Hvid på mørk — #fff på #1f2937 = 14:1 (perfekt).
- Mørk på accent — #1f2937 på #fbbf24 = 9:1 (perfekt til knapper).
Ud over tekst
WCAG 2.1 kræver også 3:1 for ikke-tekst elementer (knapper, fokusringe, formularrammer). Kontrolløren håndterer begge.
Wallpapers der ikke bekæmper dine widgets
Hvis du er designer og sætter wallpapers bag ur-widgets og notifikationer, skal du vælge wallpapers med kontrast under 5:1 i widgetzonerne. Vores Gaussian blur værktøj kan blødgøre travle områder af ethvert wallpaper for bedre widget læsbarhed.
Prøv vores gratis værktøjer
De fleste af disse guides parres med et praktisk værktøj du kan bruge lige nu — ingen tilmelding krævet for den første kørsel:
- Billede størrelsesændring — pixel-perfekt nedskalering + opskalering.
- Konverter til WebP — 30-50% mindre filer end JPG.
- Baggrundsfjerner — ét-klik udskæring, transparent PNG.
- Favicon generator — alle browserstørrelser fra én kilde.
- Social-media størrelsesændring — hver platforms præcise dimensioner.
- Batch behandling — anvend ethvert værktøj på op til 200 billeder på én gang.
Gennemse det fulde værktøjskatalog.
