এই নিয়ম কী যাচাই করে
নিশ্চিত করে যে লেখা ও পটভূমির রঙের কনট্রাস্ট WCAG 2 AA-এর ন্যূনতম কনট্রাস্ট অনুপাতের সীমা পূরণ করে.
কেন এটি গুরুত্বপূর্ণ
WCAG 1.4.3 অনুযায়ী সাধারণ লেখার জন্য কনট্রাস্ট অনুপাত অন্তত 4.5:1 এবং বড় লেখার জন্য 3:1 হতে হবে। হালকা রঙের দাম, ব্যাজ ও ব্যানার কম দৃষ্টিশক্তির মানুষের পক্ষে পড়া কঠিন, আর উজ্জ্বল আলোয় সবার পক্ষেই।
কীভাবে ঠিক করবেন
যেকোনো ওয়েবসাইটে
- কম কনট্রাস্টের লেখাটি খুঁজে বের করুন এবং এর লেখা ও পটভূমির রং লিখে রাখুন: একটি কনট্রাস্ট চেকার বা আপনার ব্রাউজারের ডেভেলপার টুল দুটোই দেখায়।
- আপনার থিমের CSS-এ লেখা বা পটভূমির রং বদলান, যতক্ষণ না অনুপাত অন্তত 4.5:1 হয় (24px ও তার বড় লেখা, বা 18.66px বোল্ড লেখার জন্য 3:1)।
- সেল ব্যাজ, প্লেসহোল্ডার টেক্সট, ফুটারের লিংক এবং ছবির ওপরের বাটনের দিকে বিশেষ নজর দিন।
Shopify-তে
- কম কনট্রাস্টের লেখাটি খুঁজে বের করুন এবং এর লেখা ও পটভূমির রং লিখে রাখুন: একটি কনট্রাস্ট চেকার বা আপনার ব্রাউজারের ডেভেলপার টুল দুটোই দেখায়।
- Online Store > Themes > Customize > Theme settings > Colors-এ গিয়ে প্রভাবিত কালার স্কিমের লেখার রং গাঢ় করুন বা পটভূমি হালকা করুন, যতক্ষণ না অনুপাত অন্তত 4.5:1 হয়।
- সেল ব্যাজ, প্লেসহোল্ডার টেক্সট, ফুটারের লিংক এবং ছবির ওপরের বাটনের দিকে বিশেষ নজর দিন।
সংশোধন কীভাবে যাচাই করবেন
- স্ক্যানটি আবার চালান এবং নিশ্চিত হন যে color-contrast আর দেখা যাচ্ছে না।
- হুবহু রংগুলো দিয়ে একটি কনট্রাস্ট চেকারে নমুনা যাচাই করুন।
FixReports কীভাবে এটি খুঁজে পায়
আমাদের স্ক্যান যে পেজই পরীক্ষা করে, সেখানে একটি আসল Chrome ব্রাউজারে axe-core-এর color-contrast নিয়মটি চালায়, এবং প্রতিটি ব্যর্থ এলিমেন্ট তার পেজ, মার্কআপ এবং প্রযোজ্য হলে একটি স্ক্রিনশটসহ জানায়।
একটি স্বয়ংক্রিয় পরীক্ষা নিশ্চিত করে যে এই নির্দিষ্ট সমস্যাটি আছে। পেজের বাকি অংশ অ্যাক্সেসিবল কি না, তা এটি বলতে পারে না: কিছু বাধা কেবল তখনই ধরা পড়ে, যখন একজন মানুষ পেজটি যাচাই করেন।