🌓

ነፃ WCAG የቀለም ንፅፅር ማረጋገጫ

ሁለት ቀለሞች የWCAG AA እና AAA ንፅፅር ደረጃዎችን ለተደራሽነት እንደሚያሟሉ ያረጋግጡ። በብዙ የጽሑፍ መጠኖች ቀጥታ ቅድመ-እይታ ከንፅፅር ዝቅተኛ ሲሆን በራስ-ሰር ጥቆማዎች ጋር።

በአሳሽዎ ውስጥ ይሰራልምዝገባ የለም፣ ብቅ-ባይ መስኮቶች የሉምምዝገባ አያስፈልግምለዘላለም ነፃ

ከተጫነ በኋላ ከመስመር ውጭ ይሠራል

የጽሑፍ ቀለም

የጀርባ ቀለም

ትልቅ ርዕስ ጽሑፍ

መካከለኛ የአካል ጽሑፍ (18px) ለንባብ እና ይዘት።

መደበኛ የአካል ጽሑፍ (16px) ለአንቀጾች።

ትንሽ የአካል ጽሑፍ (14px) ለመግለጫ ጽሑፎች እና metadata።

14.63:1

የንፅፅር መጠን

✓WCAG AA — መደበኛ ጽሑፍ

4.5:1 ያስፈልጋል · 14.63:1 አለዎት

✓WCAG AA — ትልቅ ጽሑፍ

3.0:1 ያስፈልጋል · 14.63:1 አለዎት

✓WCAG AAA — መደበኛ ጽሑፍ

7.0:1 ያስፈልጋል · 14.63:1 አለዎት

✓WCAG AAA — ትልቅ ጽሑፍ

4.5:1 ያስፈልጋል · 14.63:1 አለዎት

✓የUI ክፍሎች / ምስላዊ ነገሮች

3.0:1 ያስፈልጋል · 14.63:1 አለዎት

ፈጣን ቅድመ ማዋቀሮች

በWCAG 2.1 የንፅፅር መመሪያዎች ላይ የተመሠረተ። ትልቅ ጽሑፍ = 18pt (24px) መደበኛ ወይም 14pt (18.66px) ደማቅ። ሄክስ ኮዶች በሁለቱም አቅጣጫዎች ይዘምናሉ፦ ሄክስ ይተይቡ ወይም ቀለም ይምረጡ፣ ሁለቱም ግቤቶች ተመሳስለው ይቆያሉ።

እንዴት እንደሚሠራ

የንፅፅር ፍተሻው ሙሉ በሙሉ በአሳሽዎ ውስጥ በWCAG 2.1 አንጻራዊ ብሩህነት ስልተ-ቀመር ይሠራል — ምንም ላይብረሪ፣ ምንም አገልጋይ የለም፤ መስፈርቱን በትክክል የሚከተል በእጅ የተጻፈ ሒሳብ ብቻ ነው። ሲተይቡ ወይም ቀለም ሲመርጡ እያንዳንዱ ውጤት ወዲያውኑ ይዘምናል።

1
የhex ግቤት እና መደበኛ ማድረግ
ባለ 3 አሃዝ (#abc) እና ባለ 6 አሃዝ (#aabbcc) የhex እሴቶች ሁለቱም ይቀበላሉ እና ወደ ሙሉ የRGB ሦስትዮሽ ይቀየራሉ። ልክ ያልሆነ ግቤት በዝምታ ወደ ጥቁር ከመቀየር ይልቅ ወዲያውኑ ውድቅ ይደረጋል፤ ስለዚህ አሳሳች የ«አልፏል» ውጤት ፈንታ ቀይ ድንበር ይታያል።
2
የWCAG ብሩህነት ስሌት
እያንዳንዱ ቀለም በWCAG 2.1 ቀመር ወደ አንጻራዊ ብሩህነት ይቀየራል፤ የsRGB ቻናል እሴቶች በክፍልፋይ የgamma ማስተካከያ መስመራዊ ይደረጋሉ (ከ0.03928 በታች በ12.92 ይካፈላሉ፣ ከዚያ በላይ በ2.4 ኃይል ይነሳሉ)፣ ከዚያም እንደ 0.2126R + 0.7152G + 0.0722B ይመዘናሉ።
3
የንፅፅር ጥምርታ እና የተገዢነት ፍተሻዎች
የንፅፅር ጥምርታው (ፈዛዛው + 0.05) / (ጠቆር ያለው + 0.05) ተብሎ ይሰላል እና ከአምስቱም የWCAG ገደቦች ጋር ይነጻጸራል፦ AA መደበኛ ጽሑፍ (4.5:1)፣ AA ትልቅ ጽሑፍ (3:1)፣ AAA መደበኛ ጽሑፍ (7:1)፣ AAA ትልቅ ጽሑፍ (4.5:1) እና የUI ክፍሎች (3:1)። ውጤቶቹ በእያንዳንዱ የቁልፍ ጭነት ይዘምናሉ።
4
ቀለሙን የሚጠብቁ የማስተካከያ ጥቆማዎች
ጥንዱ WCAG AAን ካላለፈ መሣሪያው በHSL ብርሃንነት ውስጥ ይፈልጋል — ከመጀመሪያው ብርሃንነት ወደ ሁለቱም አቅጣጫ ደረጃ በደረጃ በመሄድ — ተመሳሳይ ቀለም እና ሙሌት ይዞ 4.5:1ን የሚያልፈውን የእያንዳንዱን ቀለም ቅርብ አማራጭ ለማግኘት። የEyeDropper API (Chromium) ማንኛውንም ቀለም ከማያ ገጽዎ በቀጥታ ለመውሰድም ይገኛል።