ডিজাইনারদের জন্য WCAG কালার কনট্রাস্ট

যদি আপনার টেক্সট WCAG AA কনট্রাস্ট পূরণ করতে ব্যর্থ হয়, তাহলে আনুমানিক ২৮৫ মিলিয়ন দৃষ্টি প্রতিবন্ধী ব্যক্তি এটি পড়তে পারবেন না। পাশাপাশি, ইইউ এবং মার্কিন যুক্তরাষ্ট্রে আপনি ক্রমবর্ধমান আইনি ঝুঁকির মধ্যে রয়েছেন। সুসংবাদ: নিয়মটি সহজ।

৪.৫:১ নিয়ম

বডি টেক্সটের কনট্রাস্ট রেশিও তার ব্যাকগ্রাউন্ডের বিপরীতে কমপক্ষে ৪.৫:১ হতে হবে WCAG AA পাস করার জন্য। বড় টেক্সট (২৪px+ রেগুলার বা ১৮px+ বোল্ড) এর জন্য নিম্ন সীমা ৩:১।

AAA কনফরমেন্সের জন্য: বডির জন্য ৭:১, বড় টেক্সটের জন্য ৪.৫:১।

কনট্রাস্ট রেশিও কীভাবে গণনা করা হয়

WCAG আপেক্ষিক লুমিন্যান্স ব্যবহার করে — প্রতিটি রঙকে একটি নির্দিষ্ট ফর্মুলা ব্যবহার করে লুমিন্যান্স মানে (০ = কালো, ১ = সাদা) রূপান্তর করুন, তারপর (L1 + 0.05) / (L2 + 0.05) গণনা করুন, যেখানে L1 হালকা রঙ।

আপনাকে গণনা করতে হবে না — আমাদের বিনামূল্যের কনট্রাস্ট চেকার ব্যবহার করে যেকোনো দুটি রঙ দিন এবং রেশিও দেখুন।

সাধারণ ব্যর্থতার ক্ষেত্র

• সাদার উপর হালকা ধূসর — #fff-এর উপর #999 = ২.৮৫ (ব্যর্থ)। #fff-এর উপর #767676 = ৪.৫৪ (পাস)।
• হলুদের উপর সাদা — প্রায় সবসময় ব্যর্থ হয়। হলুদের উপর গাঢ় টেক্সট ব্যবহার করুন।
• বডি টেক্সটে রঙিন লিঙ্ক — বেশিরভাগ নীল লিঙ্ক সাদার উপর পাস করে কিন্তু হালকা ধূসরের উপর ব্যর্থ হয়। প্রকৃত আশেপাশের ব্যাকগ্রাউন্ড পরীক্ষা করুন।
• ব্র্যান্ডের রঙ যা দারুণ দেখায় — এগুলি প্রায়ই ব্যর্থ হয়। অফ-হোয়াইট ব্যাকগ্রাউন্ড যোগ করুন বা টেক্সট গাঢ় করুন।

অ্যাক্সেসযোগ্য রঙের জোড়া নির্বাচন

তিনটি নির্ভরযোগ্য প্যাটার্ন:

1. হালকার উপর গাঢ় — #fff-এর উপর #1f2937 = ১৪:১ (পারফেক্ট)।
2. গাঢ়ের উপর সাদা — #1f2937-এর উপর #fff = ১৪:১ (পারফেক্ট)।
3. অ্যাকসেন্টের উপর গাঢ় — #fbbf24-এর উপর #1f2937 = ৯:১ (বাটনের জন্য পারফেক্ট)।

টেক্সটের বাইরে

WCAG 2.1-এ নন-টেক্সট এলিমেন্টের (বাটন, ফোকাস রিং, ফর্ম বর্ডার) জন্য ৩:১ প্রয়োজন। চেকার উভয়ই হ্যান্ডেল করে।

ওয়ালপেপার যা আপনার উইজেটের সাথে লড়াই করবে না

আপনি যদি একজন ডিজাইনার হন যিনি ঘড়ির উইজেট এবং নোটিফিকেশনের পিছনে ওয়ালপেপার সেট করছেন, তাহলে উইজেট জোনে ৫:১-এর কম কনট্রাস্টযুক্ত ওয়ালপেপার বেছে নিন। আমাদের গাউসিয়ান ব্লার টুল যেকোনো ওয়ালপেপারের ব্যস্ত এলাকা নরম করতে পারে যাতে উইজেট পড়া সহজ হয়।

আমাদের বিনামূল্যের টুল ব্যবহার করে দেখুন

এই গাইডগুলির বেশিরভাগই একটি হ্যান্ডস-অন টুলের সাথে জোড়া দেওয়া হয় যা আপনি এখনই ব্যবহার করতে পারেন — প্রথমবার ব্যবহারের জন্য সাইন-আপের প্রয়োজন নেই:

• ইমেজ রিসাইজার — পিক্সেল-পারফেক্ট ডাউনস্কেল + আপস্কেল।
• WebP-তে রূপান্তর — JPG-এর চেয়ে ৩০-৫০% ছোট ফাইল।
• ব্যাকগ্রাউন্ড রিমুভার — এক ক্লিকে কাটআউট, ট্রান্সপারেন্ট PNG।
• ফ্যাভিকন জেনারেটর — একটি সোর্স থেকে সব ব্রাউজার সাইজ।
• সোশ্যাল-মিডিয়া রিসাইজার — প্রতিটি প্ল্যাটফর্মের সঠিক ডাইমেনশন।
• বাল্ক প্রসেসিং — একসাথে ২০০টি ইমেজ পর্যন্ত যেকোনো টুল প্রয়োগ করুন।

সম্পূর্ণ টুল ক্যাটালগ ব্রাউজ করুন।