የWCAG 2.1 / 2.2 የንፅፅር መመሪያዎች መረዳት
የቀለም ንፅፅር በድረ-ገጾች እና ዲጂታል መተግበሪያዎች ላይ የሚቀመጡ መረጃዎች በቀላሉ እንዲነበቡ ለማድረግ መሰረታዊ መስፈርት ነው። ይህ የንፅፅር መመርመሪያ መሳሪያ የጽሑፍ ቀለም እና የጀርባ ቀለምን በማነጻጸር በዓለም አቀፍ ደረጃ ተቀባይነት ያለውን የWCAG 2.1 / 2.2 ቀመር በመጠቀም የንፅፅር መጠኑን ያሰላል።
የንፅፅር መጠኑ ከ 1:1 (ምንም ንፅፅር የሌለው፣ ለምሳሌ ነጭ በነጭ ላይ) እስከ 21:1 (ከፍተኛው ንፅፅር፣ ጥቁር በነጭ ላይ) ባለው ክልል ውስጥ ይገለጻል። መሳሪያው በነባሪነት የጽሑፍ ቀለምን በ #4f46e5 እና የጀርባ ቀለምን በ #ffffff በመጀመር የ 6.29 የንፅፅር መጠን ያሳያል። ይህንን መጠን መሰረት በማድረግ ዲዛይነሮች፣ አልሚዎች (developers) እና የይዘት አዘጋጆች ምርቶቻቸው ተደራሽ መሆናቸውን ማረጋገጥ ይችላሉ።
የAA እና AAA የተደራሽነት ደረጃዎች ልዩነት
የድር ይዘት ተደራሽነት መመሪያዎች (WCAG) ሁለት ዋና ዋና የንፅፅር ተገዢነት ደረጃዎችን ያስቀምጣሉ፦
- AA ደረጃ፦ ይህ አብዛኛዎቹ የህግ እና የኢንዱስትሪ ደረጃዎች የሚጠይቁት መሰረታዊ የተደራሽነት ደረጃ ነው። ለተለመደ ጽሑፍ ቢያንስ 4.5:1 የንፅፅር መጠን የሚያስፈልግ ሲሆን፣ ለትልቅ ጽሑፍ ደግሞ ቢያንስ 3:1 የንፅፅር መጠን ይጠይቃል።
- AAA ደረጃ፦ ይህ ይበልጥ ጥብቅ የሆነ ከፍተኛ የተደራሽነት ደረጃ ነው። ለተለመደ ጽሑፍ ቢያንስ 7:1 የንፅፅር መጠን የሚጠይቅ ሲሆን፣ ለትልቅ ጽሑፍ ደግሞ ቢያንስ 4.5:1 የንፅፅር መጠን ያስፈልገዋል።
ይህ መሳሪያ ያስገቡትን የቀለም ጥምረት በመገምገም በእያንዳንዱ ደረጃ ማለፍ ወይም አለማለፉን በግልጽ ያሳያል።
የተለመደ ጽሑፍ እና ትልቅ ጽሑፍ ትርጓሜ
በተደራሽነት መመሪያዎች ውስጥ የጽሑፍ መጠን በንፅፅር መስፈርቶች ላይ ቀጥተኛ ተጽዕኖ አለው። ትላልቅ ጽሑፎች በደካማ ንፅፅርም ቢሆን በቀላሉ ሊነበቡ ስለሚችሉ ዝቅተኛ የንፅፅር መጠን ይፈቀድላቸዋል።
- ትልቅ ጽሑፍ፦ ከ 18pt (በግምት 24px) በላይ የሆነ ጽሑፍ፣ ወይም ደማቅ (bold) ከሆነ ከ 14pt (በግምት 18.5px) በላይ የሆነ ጽሑፍ ነው።
- የተለመደ ጽሑፍ፦ ከእነዚህ መጠኖች በታች ያሉ ማናቸውም የጽሑፍ መጠኖችን ያጠቃልላል።
መሳሪያው ለእነዚህ ሁለት የጽሑፍ ዓይነቶች የተለየ የ"አልፏል" ወይም "አላለፈም" ውጤት ያሳያል።
የUI ክፍሎች እና የግራፊክስ ንፅፅር አስፈላጊነት
ከጽሑፍ በተጨማሪ እንደ የአዝራር ወሰኖች (button borders)፣ የግብዓት ሳጥኖች (input fields) እና ሌሎች የግራፊክስ አካላት ያሉ የተጠቃሚ በይነገጽ (UI) ክፍሎች በግልጽ መለየት አለባቸው።
ለ "UI እና ግራፊክስ" የሚሰላው የንፅፅር መስፈርት ቢያንስ 3:1 መሆን አለበት። ይህ ክፍል እንደ ጽሑፎቹ የAA ወይም AAA ደረጃ ልዩነት የለውም። መሳሪያው ለዚህ ክፍል አንድ ነጠላ የ 3:1 መመዘኛን ብቻ በመጠቀም "አልፏል" ወይም "አላለፈም" የሚል ውጤት ያሳያል።
የቀለም ፎርማቶች አጠቃቀም እና የግብዓት ህጎች
ይህ መሳሪያ ሶስት ዋና ዋና የቀለም ፎርማቶችን ይቀበላል፦
- Hex እሴቶች፦ ለምሳሌ
#1a1a1a - rgb() እሴቶች፦ ለምሳሌ
rgb(26, 26, 26) - hsl() እሴቶች
በመሳሪያው ላይ የጽሑፍ ቀለም እና የጀርባ ቀለም ማስገቢያ ሳጥኖች ይገኛሉ። የተሳሳተ የቀለም ፎርማት ካስገቡ መሳሪያው የሚከተሉትን የስህተት መልዕክቶች ያሳያል፦
- ለጽሑፍ ቀለም፦ "እባክዎ እንደ #1a1a1a or rgb(26, 26, 26) ያለ ትክክለኛ የጽሑፍ ቀለም ያስገቡ።"
- ለጀርባ ቀለም፦ "እባክዎ እንደ #ffffff ወይም rgb(255, 255, 255) ያለ ትክክለኛ የጀርባ ቀለም ያስገቡ።"
እንዲሁም የጽሑፍ እና የጀርባ ቀለሞችን በፍጥነት እርስ በእርስ ለመለዋወጥ የ swap ቁልፍን መጠቀም ይቻላል።
የውጤት ማጠቃለያዎች (Verdict)
መሳሪያው ቀለሞቹን ካነጻጸረ በኋላ የሚከተሉትን የማጠቃለያ መልዕክቶች (Verdict) ይሰጣል፦
| የንፅፅር ሁኔታ | የሚታየው ማጠቃለያ መልዕክት |
|---|---|
| ለተለመደ ጽሑፍ የAA እና AAA ደረጃዎችን ሲያልፍ | "ለተለመደ ጽሑፍ የAA እና AAA ደረጃዎችን ያልፋል።" |
| ለተለመደ ጽሑፍ የAA ደረጃን ብቻ ሲያልፍ | "ለተለመደ ጽሑፍ የAA ደረጃን ያልፋል።" |
| ለታላላቅ ጽሑፎች ብቻ የAA ደረጃን ሲያልፍ | "ለታላላቅ ጽሑፎች ብቻ የAA ደረጃን ያልፋል።" |
| ከAA አነስተኛ መስፈርት በታች ሲሆን | "ከAA አነስተኛ መስፈርት በታች ነው — ንፅፅሩን ይጨምሩ።" |
የግል ሚስጥራዊነት እና የውሂብ አያያዝ
በዚህ መሳሪያ ላይ የሚያከናውኑት እያንዳንዱ የንፅፅር ፍተሻ ሙሉ በሙሉ በራስዎ የድር አሳሽ (browser) ውስጥ የሚከናወን ነው። የሚያስገቡት ማንኛውም የቀለም መረጃ ወይም እሴት ወደ BroBroGo አገልጋይ አይሰቀልም።
ተደጋግመው የሚጠየቁ ጥያቄዎች (FAQ)
የAA እና AAA ውጤቶች ምን ማለት ናቸው?
አብዛኛዎቹ ድረ-ገጾች የሚያልሙት የAA ደረጃን ነው፡ ለተለመደ ጽሑፍ ቢያንስ 4.5:1 እና ለትልቅ ጽሑፍ 3:1 ንፅፅር ያስፈልገዋል። AAA የበለጠ ጥብቅ ነው — ለተለመደ ጽሑፍ 7:1 እና ለትልቅ ጽሑፍ 4.5:1። የንፅፅር መጠኑ ከ1:1 (ምንም ንፅፅር የሌለው) እስከ 21:1 (ጥቁር በነጭ ላይ) ይደርሳል።
ትልቅ ጽሑፍ የሚባለው የትኛው ነው?
ከ18pt (በግምት 24px) በላይ የሆነ ጽሑፍ፣ ወይም ደማቅ (bold) ከሆነ ከ14pt (በግምት 18.5px) በላይ የሆነ ጽሑፍ። ትልቅ ጽሑፍ በዝቅተኛ የንፅፅር መጠን በቀላሉ ሊነበብ ስለሚችል፣ ከጠንካራዎቹ መስፈርቶች ይልቅ በAA በ3:1 እና በAAA በ4.5:1 ያልፋል።
የትኞቹን የቀለም ፎርማቶች ማስገባት እችላለሁ?
እንደ #1a1a1a ያለ hex እሴት፣ እንደ rgb(26, 26, 26) ያለ rgb() እሴት፣ ወይም hsl() እሴት ያስገቡ — ወይም ቀለም ለመምረጥ አንዱን የቀለም ሳጥን ጠቅ ያድርጉ። የጽሑፍ እና የጀርባ ቀለሞችን ለመለዋወጥ የswap ቁልፍን ይጠቀሙ።
ይህ የWCAG 2 ወይስ አዲሱ የAPCA ዘዴ ነው?
ይህ መሳሪያ ዛሬ ተደራሽነትን (accessibility) ለመገምገም ጥቅም ላይ የሚውለውን የWCAG 2.1 / 2.2 ፎርሙላ ይጠቀማል። APCA ለWCAG 3 በመዘጋጀት ላይ ያለ አዲስ ዘዴ ነው — ተስፋ ሰጪ ቢሆንም ገና ደረጃ ሆኖ ስላልጸደቀ እዚህ ያሉት ውጤቶች እሱን አይጠቀሙም።