Ukaguzi wa Contrast kwa WCAG

Kagua color contrast, yaani tofauti ya mwanga kati ya maandishi na background, kulingana na WCAG 2.1. Hakiki AA au AAA kabla ya kuchapisha design.

WCAG 2.1AA & AAAMuonekano hai
Kikagua contrast
Normal text looks like this (16px)
Large text looks like this (24px)
21:1
Uwiano wa contrast
PASS
AA Normal
PASS
AA Large
PASS
AAA Normal
PASS
AAA Large
Kuhusu WCAG contrast

Kuelewa contrast ya rangi kwa WCAG

Web Content Accessibility Guidelines (WCAG) 2.1 hufafanua kiwango cha chini cha contrast ili maandishi yasomeke kwa watu wenye changamoto za kuona. Ratio hutoka 1:1, hakuna tofauti ya rangi, hadi 21:1, tofauti kubwa zaidi.

Viwango vya WCAG

  • AA Normal Maandishi: Kiwango cha chini 4.5:1
  • AA Large Maandishi: Kiwango cha chini 3:1
  • AAA Normal Maandishi: Kiwango cha chini 7:1
  • AAA Large Maandishi: Kiwango cha chini cha contrast 4.5:1

Large text ni maandishi ya 18pt (24px) au zaidi, au 14pt (18.66px) bold. Miradi mingi hutumia AA kama kiwango cha chini. Formula hutumia relative luminance kama ilivyo kwenye WCAG 2.1.

Kwa zana zinazohusiana, tumia kikokotoo rangi au gradient CSS.

Ukaguzi Contrast kwa Kiswahili. Pima contrast ya rangi kwa UI na maudhui. Matokeo ni msaada wa accessibility review, si audit kamili ya WCAG. Kwa security, API, hosting, SEO, PWA, USSD au maamuzi ya domain, hakiki output, nyaraka za provider na mazingira ya production kabla ya launch.

Ukaguzi huu wa contrast husaidia designer na developer kuona kama maandishi na background vinafikia miongozo ya WCAG 2.1. Weka rangi ya maandishi na rangi ya background, kisha zana itaonyesha ratio na kama inafikia AA au AAA kwa maandishi ya kawaida na makubwa. Tumia matokeo kama ukaguzi wa awali; kwa audit rasmi ya accessibility, hakiki pia ukubwa wa font, hali ya hover, focus states na majaribio ya watumiaji.

Maswali ya mara kwa mara

WCAG contrast ratio ni nini?
WCAG hufafanua contrast ya chini kati ya text na background. AA huhitaji 4.5:1 kwa text ya kawaida na 3:1 kwa text kubwa. AAA huhitaji 7:1 na 4.5:1 mtawalia.
Ni nini huhesabiwa kama text kubwa?
18pt (24px) or larger regular weight, or 14pt (18.66px) bold weight.
Kwa nini contrast ni muhimu?
Contrast nzuri husaidia kusomeka kwa watu wenye changamoto za kuona, upofu wa rangi au mazingira yenye mwanga mkali. Kwa miradi rasmi, hakiki pia mahitaji ya accessibility yanayotumika kwenye eneo lako.