WCAG-kleurkontras vir Ontwerpers
Die 4.5:1-reël, kontrasverhouding-wiskunde en gratis gereedskap om enige kleurpaar na te gaan.
As jou teks nie WCAG AA-kontras haal nie, kan na raming 285 miljoen mense met gestremde sig dit nie lees nie. Boonop is jy op toenemend onstabiele regsgronde in die EU en VSA. Die goeie nuus: die reël is eenvoudig.
Die 4.5:1-reël
Ligteks moet 'n kontrasverhouding van ten minste 4.5:1 teen sy agtergrond hê om WCAG AA te slaag. Groot teks (24px+ gewoon of 18px+ vet) het 'n laer drempel van 3:1.
Vir AAA-nakoming: 7:1 vir liggaam, 4.5:1 vir groot teks.
Hoe kontrasverhouding bereken word
WCAG gebruik relatiewe luminansie — skakel elke kleur om na 'n luminansiewaarde (0 = swart, 1 = wit) met 'n spesifieke formule, bereken dan (L1 + 0.05) / (L2 + 0.05), waar L1 die ligter kleur is.
Jy hoef nie die wiskunde te doen nie — gebruik ons gratis kontrasnagaanhulpmiddel om enige twee kleure in te voer en die verhouding te sien.
Algemene foutgevalle
- Liggrys op wit — #999 op #fff = 2.85 (druip). #767676 op #fff = 4.54 (slaag).
- Wit op geel — druip byna altyd. Gebruik donker teks op geel.
- Gekleurde skakels in ligteks — die meeste blou skakels slaag teen wit, maar druip teen liggrys. Toets die werklike omliggende agtergrond.
- Handelsmerkkleure wat wonderlik lyk — hulle druip dikwels. Voeg 'n amper-wit agtergrond by of verdonker die teks.
Kies toeganklike kleurpare
Drie betroubare patrone:
- Donker op lig — #1f2937 op #fff = 14:1 (perfek).
- Wit op donker — #fff op #1f2937 = 14:1 (perfek).
- Donker op aksent — #1f2937 op #fbbf24 = 9:1 (perfek vir knoppies).
Verder as teks
WCAG 2.1 vereis ook 3:1 vir nie-tekselemente (knoppies, fokusringe, vormrande). Die nagaanhulpmiddel hanteer albei.
Wallpapers wat nie met jou widgets sal stry nie
As jy 'n ontwerper is wat wallpapers agter klokwidgets en kennisgewings stel, kies wallpapers met kontras onder 5:1 in die widgetsones. Ons Gaussiese vervaging-hulpmiddel kan besige areas van enige wallpaper versag vir beter widget-leesbaarheid.
Probeer ons gratis gereedskap
Die meeste van hierdie gidse word gepaard met 'n praktiese hulpmiddel wat jy nou kan gebruik — geen aanmelding nodig vir die eerste lopie nie:
- Beeldhervormer — presiese verkleining + vergroting.
- Skakel om na WebP — 30-50% kleiner lêers as JPG.
- Agtergrondverwyderaar — een-klik uitsny, deursigtige PNG.
- Favicon-generator — elke blaaier-grootte uit een bron.
- Sosiale media-hervormer — elke platform se presiese afmetings.
- Massa-verwerking — pas enige hulpmiddel op tot 200 beelde gelyktydig toe.
Blaai deur die volledige gereedskapkatalogus.
