WCAG 2.1 / 2.2 စံနှုန်းနှင့် Contrast အချိုးကို နားလည်ခြင်း
ဝဘ်ဆိုက်များ၏ သုံးစွဲနိုင်မှုစွမ်းရည် (Accessibility) ကို တိုင်းတာရာတွင် စာသားနှင့် နောက်ခံအရောင်တို့အကြား ကွဲပြားခြားနားမှုသည် အဓိကကျသော အခန်းကဏ္ဍမှ ပါဝင်သည်။ ဤ Contrast စစ်ဆေးကိရိယာသည် WCAG 2.1 / 2.2 စံနှုန်းများအတိုင်း စာသားအရောင်နှင့် နောက်ခံအရောင်တို့၏ Contrast အချိုးကို တွက်ချက်ပေးပြီး သာမန်စာသား၊ စာသားအကြီးနှင့် UI အစိတ်အပိုင်းများအတွက် သတ်မှတ်ထားသော AA နှင့် AAA အဆင့်များ အောင်မြင်မှု ရှိမရှိကို တိကျစွာ ပြသပေးသည်။
အရောင်များ၏ Contrast အချိုးသည် အနိမ့်ဆုံး 1:1 (ကွဲပြားခြားနားမှု လုံးဝမရှိခြင်း) မှ အမြင့်ဆုံး 21:1 (အဖြူရောင်နောက်ခံပေါ်တွင် အနက်ရောင်စာသား) အထိ ရှိနိုင်သည်။ ဤကိရိယာကို စတင်ဖွင့်လှစ်ချိန်တွင် အခြေခံအရောင်များအဖြစ် စာသားအရောင်အတွက် #4f46e5 နှင့် နောက်ခံအရောင်အတွက် #ffffff ကို သတ်မှတ်ထားပြီး ၎င်းတို့၏ Contrast အချိုးသည် 6.29 ဖြစ်သည်။
ထည့်သွင်းနိုင်သော အရောင်ဖော်မတ်များနှင့် အသုံးပြုပုံ
ဤကိရိယာတွင် စာသားအရောင် နှင့် နောက်ခံအရောင် တို့ကို အောက်ပါ အရောင်ဖော်မတ်များဖြင့် ထည့်သွင်းနိုင်သည် -
- Hex တန်ဖိုးများ: ဥပမာ
#1a1a1a - rgb() တန်ဖိုးများ: ဥပမာ
rgb(26, 26, 26) - hsl() တန်ဖိုးများ
အကယ်၍ စာသားအရောင် နေရာတွင် မှားယွင်းစွာ ထည့်သွင်းမိပါက #1a1a1a သို့မဟုတ် rgb(26, 26, 26) ကဲ့သို့ မှန်ကန်သော စာသားအရောင်ကို ထည့်သွင်းပါ။ ဟူသော အမှားသတင်းစကားကို ပြသမည်ဖြစ်ပြီး၊ နောက်ခံအရောင် နေရာတွင် မှားယွင်းပါက #ffffff သို့မဟုတ် rgb(255, 255, 255) ကဲ့သို့ မှန်ကန်သော နောက်ခံအရောင်ကို ထည့်သွင်းပါ။ ဟု ပြသမည်ဖြစ်သည်။ ထို့အပြင် စာသားနှင့် နောက်ခံအရောင်များကို အပြန်အလှန်ပြောင်းရန် swap ခလုတ်ကို အသုံးပြုနိုင်သည်။
AA နှင့် AAA အဆင့်များ၏ သတ်မှတ်ချက် စည်းမျဉ်းများ
ကွဲပြားခြားနားသော စာသားအမျိုးအစားနှင့် အစိတ်အပိုင်းများအလိုက် အောင်မြင်ရန် လိုအပ်သော အနိမ့်ဆုံး Contrast အချိုးများမှာ အောက်ပါအတိုင်း ဖြစ်သည် -
| စာသား/အစိတ်အပိုင်း အမျိုးအစား | AA အဆင့် သတ်မှတ်ချက် | AAA အဆင့် သတ်မှတ်ချက် |
|---|---|---|
| သာမန်စာသား | အနည်းဆုံး 4.5:1 ရှိရမည် | အနည်းဆုံး 7:1 ရှိရမည် |
| စာသားအကြီး | အနည်းဆုံး 3:1 ရှိရမည် | အနည်းဆုံး 4.5:1 ရှိရမည် |
| UI နှင့် ဂရပ်ဖစ်များ | အနည်းဆုံး 3:1 ရှိရမည် (AA/AAA ခွဲခြားမှုမရှိပါ) | အနည်းဆုံး 3:1 ရှိရမည် (AA/AAA ခွဲခြားမှုမရှိပါ) |
ဤနေရာတွင် "စာသားအကြီး" ဆိုသည်မှာ စာလုံးအရွယ်အစား 18pt (24px ခန့်) နှင့် အထက်ရှိသော စာသားများ သို့မဟုတ် စာလုံးအထူ (Bold) ဖြစ်ပါက 14pt (18.5px ခန့်) နှင့် အထက်ရှိသော စာသားများကို ဆိုလိုသည်။ "UI နှင့် ဂရပ်ဖစ်များ" အတွက်မူ သီးခြား AA သို့မဟုတ် AAA ခွဲခြားထားခြင်းမရှိဘဲ 3:1 အချိုးတစ်ခုတည်းဖြင့်သာ အောင်မြင် သို့မဟုတ် မအောင်မြင်ကို ဆုံးဖြတ်သည်။
ရလဒ်များနှင့် သုံးသပ်ချက် Verdict များ
အရောင်နှစ်ခုကို တွက်ချက်ပြီးနောက် ကိရိယာသည် အောက်ပါ သုံးသပ်ချက် Verdict မက်ဆေ့ဂျ်များထဲမှ တစ်ခုကို ပြသပေးမည်ဖြစ်သည် -
သာမန်စာသားအတွက် AA နှင့် AAA အဆင့်များ အောင်မြင်သည်။သာမန်စာသားအတွက် AA အဆင့် အောင်မြင်သည်။စာသားအကြီးအတွက်သာ AA အဆင့် အောင်မြင်သည်။AA အနိမ့်ဆုံးသတ်မှတ်ချက်အောက် ရောက်နေပါသည် — contrast ကို မြှင့်တင်ပါ။
ကိုယ်ရေးအချက်အလက် လုံခြုံမှုနှင့် လုပ်ဆောင်ပုံ
ဤ Contrast စစ်ဆေးကိရိယာကို အသုံးပြုရာတွင် လုံခြုံမှုအတွက် စိတ်ချနိုင်သည်။ စစ်ဆေးမှုတိုင်းသည် သင့်ဘရောက်ဆာထဲတွင်သာ လုပ်ဆောင်ခြင်းဖြစ်သည်။ သင်ထည့်သွင်းသမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။
အမေးအဖြေများ (FAQ)
မေး - AA နှင့် AAA ရလဒ်များက ဘာကို ဆိုလိုသနည်း။
ဖြေ - AA သည် ဝဘ်ဆိုက်အများစု ရည်မှန်းထားသည့် အဆင့်ဖြစ်သည်- ၎င်းသည် သာမန်စာသားအတွက် အနည်းဆုံး 4.5:1 နှင့် စာသားအကြီးအတွက် 3:1 အချိုး လိုအပ်သည်။ AAA သည် ပိုမိုတင်းကျပ်သည် — သာမန်စာသားအတွက် 7:1 နှင့် စာသားအကြီးအတွက် 4.5:1 ဖြစ်သည်။ အချိုးသည် 1:1 (ကွဲပြားခြားနားမှုမရှိ) မှ 21:1 (အဖြူပေါ်တွင် အနက်) အထိ ရှိသည်။
မေး - မည်သည့်အရာကို စာသားအကြီးအဖြစ် သတ်မှတ်သနည်း။
ဖြေ - 18pt (24px ခန့်) သို့မဟုတ် စာလုံးအထူဖြစ်ပါက 14pt (18.5px ခန့်) မှစတင်သော စာသားများဖြစ်သည်။ ပိုမိုကြီးမားသော စာသားများသည် ကွဲပြားခြားနားမှုနည်းသော်လည်း ဖတ်ရှုနိုင်ဆဲဖြစ်သောကြောင့် ပိုမိုတင်းကျပ်သော သာမန်စာသားသတ်မှတ်ချက်များအစား AA တွင် 3:1 နှင့် AAA တွင် 4.5:1 ဖြင့် အောင်မြင်သည်။
မေး - မည်သည့် အရောင်ဖော်မတ်များကို ထည့်သွင်းနိုင်သနည်း။
ဖြေ - #1a1a1a ကဲ့သို့ hex တန်ဖိုး၊ rgb(26, 26, 26) ကဲ့သို့ rgb() တန်ဖိုး သို့မဟုတ် hsl() တန်ဖိုးကို ရိုက်ထည့်ပါ — သို့မဟုတ် အရောင်ရွေးချယ်ရန် swatch တစ်ခုခုကို နှိပ်ပါ။ စာသားနှင့် နောက်ခံအရောင်များကို အပြန်အလှန်ပြောင်းရန် swap ခလုတ်ကို အသုံးပြုပါ။
မေး - ၎င်းသည် WCAG 2 လား သို့မဟုတ် ပိုမိုသစ်လွင်သော APCA နည်းလမ်းလား။
ဖြေ - ၎င်းသည် ယနေ့ခေတ် သုံးစွဲနိုင်မှုဆိုင်ရာ စည်းမျဉ်းများနှင့် စစ်ဆေးမှုများတွင် ကိုးကားအသုံးပြုနေသည့် WCAG 2.1 / 2.2 ဖော်မြူလာကို အသုံးပြုထားသည်။ APCA သည် WCAG 3 အတွက် ရေးဆွဲဆဲဖြစ်သော ပိုမိုအမြင်အာရုံခံစားမှုအခြေခံသည့် နည်းလမ်းသစ်တစ်ခုဖြစ်သည် — မျှော်လင့်ချက်ရှိသော်လည်း လိုက်နာရမည့် စံနှုန်းတစ်ခု မဟုတ်သေးသောကြောင့် ဤနေရာရှိ အောင်မြင်မှုရလဒ်များတွင် ၎င်းကို အသုံးမပြုပါ။