এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

আপনার ওয়েবসাইট আরো পঠনযোগ্য করুন

Sofia Emelianova

কম কনট্রাস্টের লেখা আপনার ওয়েবসাইটকে সকল ব্যবহারকারীর জন্য কম পাঠযোগ্য করে তোলে, বিশেষ করে দৃষ্টিশক্তির সমস্যাযুক্ত ব্যবহারকারীদের জন্য। ডেভটুলস স্বয়ংক্রিয়ভাবে কম কনট্রাস্টের সমস্যা খুঁজে বের করতে পারে এবং সেগুলো সমাধানে আপনাকে সাহায্য করার জন্য আরও ভালো রঙের পরামর্শ দিতে পারে।

DevTools ব্যবহার করুন:

বৈসাদৃশ্যজনিত সমস্যাগুলো খুঁজে বের করুন । সমস্ত সমস্যার একটি তালিকা পেতে CSS ওভারভিউ প্যানেল, (প্রিভিউ) ইস্যু ট্যাব, অথবা একটি লাইটহাউস রিপোর্ট ব্যবহার করুন।
কনট্রাস্ট সমস্যা সমাধান করুন । ইন্সপেক্টর মোডে একটি টুলটিপের মাধ্যমে সমস্যাগুলো দেখুন এবং কনট্রাস্ট অনুপাত ঠিক করার জন্য কালার পিকারের পরামর্শ অনুযায়ী রঙ নির্বাচন করুন।
দৃষ্টিশক্তির ঘাটতি অনুকরণ করুন । আপনার ব্যবহারকারীরা আপনার সাইটটিকে যেভাবে দেখে, সেভাবে দেখুন।

কম কনট্রাস্ট টেক্সট আবিষ্কার করুন

কম কনট্রাস্ট টেক্সট খুঁজে পেতে:

আপনার পেজে ডেভটুলস খুলুন ।
তিনটি প্যানেলের মধ্যে যেকোনো একটি ব্যবহার করে সমস্ত কনট্রাস্ট সমস্যা তালিকাভুক্ত করুন:

আপনি আমাদের কোডপেন খুলে পরীক্ষা করতে পারেন।

CSS ওভারভিউ প্যানেলে বৈসাদৃশ্য সমস্যা

একটি সামগ্রিক ধারণা পেতে:

সিএসএস ওভারভিউ খুলুন।
একটি সার্বিক চিত্র ধারণ করুন ।
কালারস সেকশনটি খুলুন, কনট্রাস্ট ইস্যু- তে যান এবং কোনো সমস্যা থাকলে সেটিতে ক্লিক করুন।
কনট্রাস্ট ইস্যু টেবিলে, কোনো একটি এলিমেন্টের উপর মাউস রাখুন এবং তার পাশের লিঙ্কে ক্লিক করুন।
"কম কনট্রাস্ট টেক্সট ঠিক করুন" বিভাগে বর্ণিত পদ্ধতি অনুযায়ী সমস্যাটি সমাধান করুন।

(প্রিভিউ) ইস্যু ট্যাবে ইস্যুগুলোর মধ্যে তুলনা করুন

সমস্যাগুলোর তালিকা পেতে:

Issues ট্যাবে বৈসাদৃশ্য সংক্রান্ত সমস্যা রিপোর্টিং সক্রিয় করুন:
1. সেটিংস > পরীক্ষামূলক খুলুন।
2. ফিল্টার বারে, contrast issue লিখে অনুসন্ধান করুন।
3. ইস্যু প্যানেলের মাধ্যমে স্বয়ংক্রিয় কনট্রাস্ট ইস্যু রিপোর্টিং সক্ষম করুন নির্বাচন করুন।
4. উপরে থাকা প্রম্পটে Reload DevTools- এ ক্লিক করুন।
Issues ট্যাবটি খুলুন ।
DevTools দ্বারা চিহ্নিত কনট্রাস্ট সমস্যাগুলো এক্সপ্যান্ড করুন, তারপর এলিমেন্টস টেবিলটি এক্সপ্যান্ড করুন এবং এলিমেন্টটির পাশের লিঙ্কে ক্লিক করুন।
"কম কনট্রাস্ট টেক্সট ঠিক করুন" বিভাগে বর্ণিত পদ্ধতি অনুযায়ী সমস্যাটি সমাধান করুন।

লাইটহাউস রিপোর্টে বৈসাদৃশ্যপূর্ণ বিষয়সমূহ

রিপোর্ট চালাতে:

DevTools-এ , খুলুন আরও ট্যাব > বাতিঘর ।
নিম্নলিখিত সেটিংস সহ একটি লাইটহাউস রিপোর্ট তৈরি করুন:
- মোড : নেভিগেশন (ডিফল্ট)
- বিভাগ : প্রবেশগম্যতা
- ডিভাইস : ডেস্কটপ
'Analyze page load'-এ ক্লিক করুন এবং Lighthouse-এর রিপোর্ট তৈরি হওয়া পর্যন্ত অপেক্ষা করুন।
কনট্রাস্ট সেকশনে যান। এলিমেন্ট লিস্ট থেকে, প্রভাবিত কোনো এলিমেন্টের লিঙ্কে ক্লিক করুন।
"কম কনট্রাস্ট টেক্সট ঠিক করুন" বিভাগে বর্ণিত পদ্ধতি অনুযায়ী সমস্যাটি সমাধান করুন।

কম কনট্রাস্ট টেক্সট ঠিক করুন

কম কনট্রাস্টের সমস্যা সমাধান করতে:

একটি কনট্রাস্ট সমস্যা খুঁজুন এবং CSS Overview প্যানেল , Issues ট্যাব বা Lighthouse রিপোর্ট থেকে প্রভাবিত এলিমেন্টের লিঙ্কে ক্লিক করুন। DevTools আপনাকে Elements প্যানেলে নিয়ে যাবে এবং সংশ্লিষ্ট এলিমেন্টটি নির্বাচন করবে।
উদাহরণস্বরূপ, আমাদের অ্যাক্সেস-অযোগ্য ডেমো কোডপেন- এ, প্রথম প্রভাবিত এলিমেন্টটি হলো h1.line1 ।
ক্লিক করুন DevTools-এর উপরের ডান কোণায় ইন্সপেক্ট করুন এবং ভিউপোর্টে থাকা এলিমেন্টটির উপর মাউস রাখুন। DevTools এই এলিমেন্টটির জন্য একটি টুলটিপ দেখাবে।
লক্ষ্য করুন টুলটিপে কনট্রাস্ট রেশিও মানের পাশে একটি সতর্কীকরণ চিহ্ন থাকে। কনট্রাস্ট রেশিও ফোরগ্রাউন্ড (টেক্সটের রঙ) এবং ব্যাকগ্রাউন্ড রঙের উজ্জ্বলতার পার্থক্য পরিমাপ করে।
এলিমেন্টের টেক্সটের কালার ডিক্লারেশনের পাশে থাকা কালার পিকারটি খুলুন এবং কালার পিকারের মধ্যে কনট্রাস্ট রেশিও সেকশনটি এক্সপ্যান্ড করুন।
কালার পিকার আপনাকে জানায় যে কন্ট্রাস্ট রেশিওটি WebAIM নির্দেশিকার AA বা AAA লেভেল পূরণ করে না।
ক্লিক করুন AAA লেভেলের পাশে থাকা সাজেস্টেড কালার বাটনটি ব্যবহার করুন । কালার পিকারটি কনট্রাস্ট রেশিওর নির্দেশিকা মেনে টেক্সটের রঙ প্রয়োগ করে।
বিকল্পভাবে, নিজে থেকে রঙ বাছাই করতে, আপনি শেডস প্রিভিউতে থাকা বৃত্তটি ড্র্যাগ করতে পারেন। AA বা AAA লেভেলের মধ্যে থাকতে, যথাক্রমে উপরের বা নিচের লাইনের নীচের একটি রঙ বেছে নিন।
একইভাবে, CSS Overview প্যানেল , Issues ট্যাব বা Lighthouse রিপোর্টে খুঁজে পাওয়া সমস্ত কনট্রাস্ট সমস্যা সমাধান করুন।