WCAG-farvekontrast for designere
4.5:1-reglen, kontrastforholdsmatematik og gratis værktøjer til at tjekke ethvert farvepar.
Hvis din tekst ikke opfylder WCAG AA-kontrast, kan anslået 285 millioner synshæmmede personer ikke læse den. Plus du er på stadig mere vaklende juridisk grund i EU og USA. Den gode nyhed: reglen er enkel.
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+ almindelig 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.
Sådan beregnes kontrastforhold
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 kontrasttjekker til at indsætte to farver og se forholdet.
Almindelige fejltilfælde
- Lysegrå 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 lysegrå. Test den faktiske omgivende baggrund.
- Brandfarver der ser fantastiske ud — de fejler ofte. Tilføj en off-white baggrund eller mørk teksten.
Vælg 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). Tjekkeren håndterer begge.
Wallpapers der ikke kæmper mod dine widgets
Hvis du er designer og sætter wallpapers bag ur-widgets og notifikationer, så vælg wallpapers med kontrast under 5:1 i widget-zonerne. 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 guider parres med et praktisk værktøj, du kan bruge lige nu — ingen tilmelding nødvendig for første kørsel:
- Billedstørrelsesændrer — pixel-perfekt nedskalering + opskalering.
- Konverter til WebP — 30-50% mindre filer end JPG.
- Baggrundsfjerner — et-klik udklip, gennemsigtig PNG.
- Favicon-generator — alle browserstørrelser fra én kilde.
- Sociale medier-størrelsesændrer — alle platformes nøjagtige dimensioner.
- Batchbehandling — anvend ethvert værktøj på op til 200 billeder på én gang.
Gennemse det fulde værktøjskatalog.
