# কালার কনট্রাস্ট চেকার

<https://www.fixreports.com/bn/color-contrast-checker>

এখানেই WCAG 2.2 অনুযায়ী লেখার একটি রঙের সঙ্গে পটভূমির একটি রং তুলনা করুন, অথবা একটি পেজের ঠিকানা দিয়ে ন্যূনতম কনট্রাস্টের নিচে থাকা প্রতিটি লেখা খুঁজুন, সঙ্গে থাকবে মাপা রং এবং উত্তীর্ণ হয় এমন নিকটতম রং।

## এই টুল কী যাচাই করে
- যেকোনো দুটি রঙের WCAG অনুপাত: ক্যালকুলেটর WCAG 2.2-এর সংজ্ঞায় দেওয়া relative luminance (আপেক্ষিক উজ্জ্বলতা) সূত্র ব্যবহার করে এবং সাধারণ লেখা, বড় লেখা ও ইন্টারফেসের অংশের জন্য AA ও AAA-তে ফলাফল দেখায়। এটি আপনার ব্রাউজারেই চলে।
- উত্তীর্ণ হয় এমন রং, হিসাব করে বের করা: কোনো রঙের জোড়া ব্যর্থ হলে এটি একই আভার (hue) এমন নিকটতম লেখার রং খুঁজে বের করে যা 4.5:1 বা 7:1-এ পৌঁছায়, যাতে আপনার ডিজাইনে যতটা সম্ভব কম পরিবর্তন করতে হয়।
- একটি পেজের কম কনট্রাস্টের প্রতিটি লেখা: পেজ স্ক্যান একটি আসল Chrome ব্রাউজারে axe-core-এর color-contrast নিয়ম চালায় এবং প্রতিটি ব্যর্থ এলিমেন্ট তার লেখার রং, পটভূমির রং, ফন্টের আকার ও অনুপাতসহ তালিকাভুক্ত করে।
- রঙের জোড়া অনুযায়ী সাজানো: ব্যর্থতাগুলো লেখা ও পটভূমির রং অনুযায়ী সাজানো হয়, কারণ থিমের একটি রঙে একটি পরিবর্তন সাধারণত সেই রং ব্যবহার করা প্রতিটি এলিমেন্ট ঠিক করে দেয়।
- বড় লেখার জন্য সঠিক সীমা: অন্তত 24 পিক্সেল, বা বোল্ড হলে 18.66 পিক্সেলের লেখার জন্য 4.5:1-এর বদলে 3:1 প্রয়োজন। স্ক্যান প্রতিটি এলিমেন্টের কম্পিউটেড আকার ও ফন্টের ওজন (weight) দেখে তাতে সঠিক সীমা প্রয়োগ করে।
- যা এটি মাপতে পারেনি, এবং কেন: ছবি, গ্রেডিয়েন্ট বা একটির ওপর আরেকটি চেপে থাকা এলিমেন্টের ওপরের লেখা কারণসহ আলাদা করে তালিকাভুক্ত হয়, যাতে আপনি ঠিক জানেন কী চোখে দেখে যাচাই করতে হবে।

## যা এটি যাচাই করতে পারে না
- ছবি, গ্রেডিয়েন্ট বা ভিডিওর ওপরের লেখা মাপা। প্রতিটি অক্ষরের পেছনে ছবির কোন অংশ আছে, সফটওয়্যার তা জানতে পারে না, তাই এগুলো আপনার যাচাইয়ের জন্য তালিকাভুক্ত হয়।
- hover, focus বা অন্য অবস্থা যাচাই করা। স্ক্যান পেজটিকে লোড হওয়ার সময়ের অবস্থায় দেখে; ওই রংগুলো ক্যালকুলেটর দিয়ে যাচাই করুন।
- WCAG 1.4.11-এর জন্য পেজের আইকন, বর্ডার ও ফর্ম ফিল্ড স্ক্যান করা। আপনি যে রঙের জোড়াই দিন, ক্যালকুলেটর তার জন্য 3:1-এর ফলাফল দেখায়।
- ছবির অংশ হয়ে থাকা লেখা পড়া, যেমন এমন একটি ব্যানার যার শব্দগুলো ছবির মধ্যেই বসানো।
- আপনার দেওয়া পেজের বাইরে অন্য পেজ পরীক্ষা করা। পূর্ণ ফ্রি স্ক্যান সর্বোচ্চ পাঁচটি গুরুত্বপূর্ণ পেজ পরীক্ষা করে।

## কেন এটি গুরুত্বপূর্ণ
কম কনট্রাস্ট ওয়েবে অ্যাক্সেসিবিলিটির সবচেয়ে সাধারণ ত্রুটি। WebAIM-এর 2026 সালের বিশ্লেষণে শীর্ষ 10 লাখ হোম পেজের 83.9%-এ কম কনট্রাস্টের লেখা পাওয়া গেছে, প্রতি পেজে গড়ে 34টি ঘটনা।

ফিকে লেখা কম দৃষ্টিশক্তিসম্পন্ন বা রং চিনতে অসুবিধা (color vision deficiency) আছে এমন মানুষের পক্ষে, এবং কড়া রোদে ফোন ব্যবহার করছেন এমন যে কারও পক্ষে পড়া কঠিন। WCAG 2.2-এর সাফল্যের মানদণ্ড 1.4.3, লেভেল AA-তে, সাধারণ লেখার জন্য ন্যূনতম 4.5:1 এবং বড় লেখার জন্য 3:1 নির্ধারণ করে।

এটি ঠিক করার দিক থেকে সবচেয়ে সস্তা সমস্যাগুলোর একটিও: বেশিরভাগ সাইটে হাতে গোনা কয়েকটি থিম রং প্রায় সব ব্যর্থতার কারণ, আর সেগুলো বদলালে একসঙ্গে সব পেজ ঠিক হয়ে যায়।

## ফলাফল কীভাবে বুঝবেন
- কনট্রাস্ট অনুপাত: 1:1 (একই রং দুবার) থেকে 21:1 (সাদার ওপর কালো) পর্যন্ত। অনুপাত নিচের দিকে রাউন্ড করা হয়, তাই যে জোড়া 4.49:1 দেখায়, সেটি 4.5:1-এর ন্যূনতম সীমায় ব্যর্থ হয়।
- সাধারণ লেখা, AA (4.5:1): WCAG 1.4.3 অনুযায়ী মূল লেখা, লিংক, লেবেল ও বাটনের লেখার জন্য ন্যূনতম সীমা।
- বড় লেখা, AA (3:1): অন্তত 24 পিক্সেল, বা বোল্ড হলে 18.66 পিক্সেলের লেখার জন্য। WCAG বড় লেখাকে 18 পয়েন্ট, বা বোল্ড হলে 14 পয়েন্ট হিসেবে সংজ্ঞায়িত করে।
- AAA (7:1 ও 4.5:1): WCAG 1.4.6-এর উন্নত (enhanced) স্তর। AA সামঞ্জস্যের জন্য এটি দরকার নেই, তবে এতে আরও বেশি পাঠকের সুবিধা হয়।
- আইকন, বর্ডার ও ফর্ম ফিল্ড (3:1): কন্ট্রোল ও গ্রাফিক্সের যেসব অংশ ব্যবহার করতে মানুষের দেখতে পাওয়া দরকার, সেগুলোর জন্য WCAG 1.4.11 পাশের রঙের তুলনায় 3:1 চায়।
- ব্যর্থ লেখা: স্ক্যান যে এলিমেন্টগুলোকে তাদের সীমার নিচে মেপেছে, প্রতিটি তার selector, রং, আকার ও অনুপাতসহ। এর মার্কআপ এবং পাওয়া গেলে একটি স্ক্রিনশট দেখতে যেকোনো একটি খুলুন।
- চোখে দেখে যাচাই করার মতো: যে লেখা axe-core মাপতে পারেনি, কারণসহ, যেমন এর পেছনে একটি ছবি বা গ্রেডিয়েন্ট থাকা।

## সবচেয়ে সাধারণ সমস্যাগুলো কীভাবে ঠিক করবেন
- সাদার ওপর ধূসর লেখা: #767676 মোটামুটি সবচেয়ে হালকা ধূসর, যা সাদার ওপর 4.5:1-এ পৌঁছায় (4.54:1)। #999999 (2.84:1)-এর মতো আরও হালকা ধূসর ফুটার, ক্যাপশন, প্লেসহোল্ডার ও দামে ব্যর্থতার একটি সাধারণ কারণ।
- ব্র্যান্ড রঙের বাটনে সাদা লেখা: আপনার ব্র্যান্ড রঙের ওপর সাদা লেখা ব্যর্থ হলে বাটনের পটভূমি কয়েক ধাপ গাঢ় করুন বা গাঢ় রঙের লেখা ব্যবহার করুন। hover ও focus-এর রংও যাচাই করুন, কারণ সেগুলো প্রায়ই আরও হালকা হয়।
- ফর্মের প্লেসহোল্ডার টেক্সট: প্লেসহোল্ডার টেক্সটও লেখা, এবং এর জন্যও 4.5:1 প্রয়োজন। আরও ভালো হয় ফিল্ডের ওপরে একটি দৃশ্যমান লেবেল ব্যবহার করলে, যাতে প্লেসহোল্ডারই একমাত্র নির্দেশনা না থাকে।
- ছবি ও স্লাইডারের ওপর লেখা: লেখাটি একটি নিরেট বা আধা-স্বচ্ছ ব্যাকড্রপের ওপর রাখুন, অথবা ছবির ওপর একটি গাঢ় ওভারলে দিন, তারপর লেখার পেছনে থাকা ছবির সবচেয়ে হালকা অংশটি যাচাই করুন।
- সেল ব্যাজ ও ছোট অক্ষরের লেখা: নিষ্ক্রিয় (disabled) কন্ট্রোলের লেখা 1.4.3 থেকে অব্যাহতি পায়, কিন্তু সেল ব্যাজ, দাম ও ছোট অক্ষরের আইনি লেখা পায় না। স্টোরের পেজে প্রায়ই এগুলোই সবচেয়ে ফিকে লেখা।

## প্রায়শই জিজ্ঞাসিত প্রশ্ন

### WCAG কোন কনট্রাস্ট অনুপাত চায়?

লেভেল AA-র জন্য সাধারণ লেখায় 4.5:1 ও বড় লেখায় 3:1 (সাফল্যের মানদণ্ড 1.4.3), এবং ইন্টারফেস কম্পোনেন্ট ও অর্থবহ গ্রাফিক্সের জন্য 3:1 (1.4.11)। লেভেল AAA চায় 7:1 ও 4.5:1 (1.4.6)।

### কোন লেখাকে বড় লেখা ধরা হয়?

WCAG বড় আকারের (large-scale) লেখাকে অন্তত 18 পয়েন্ট, বা বোল্ড হলে 14 পয়েন্ট হিসেবে সংজ্ঞায়িত করে। CSS পিক্সেলে তা প্রায় 24px, বা বোল্ড হলে 18.66px।

### লোগোকে কি ন্যূনতম কনট্রাস্ট পূরণ করতে হয়?

না। WCAG 1.4.3 লোগো এবং লোগো বা ব্র্যান্ড নামের অংশ হয়ে থাকা লেখাকে অব্যাহতি দেয়, সেই সঙ্গে সম্পূর্ণ সাজসজ্জার লেখা ও নিষ্ক্রিয় কন্ট্রোলের লেখাকেও।

### স্ক্যান কেন ছবির ওপরের লেখা পর্যালোচনার জন্য তালিকাভুক্ত করে?

axe-core একরঙা রং মাপে। লেখার পেছনে ছবি, গ্রেডিয়েন্ট বা অন্য কোনো এলিমেন্ট থাকলে কোন কোন রং মিলছে তা এটি বলতে পারে না, তাই অনুমান না করে এলিমেন্টটি একজন মানুষের যাচাইয়ের জন্য জানায়।

### আমার কি AAA কনট্রাস্ট দরকার?

লেভেল AA সামঞ্জস্যের জন্য AAA বাধ্যতামূলক নয়, এবং W3C পুরো সাইটের জন্য AAA বাধ্যতামূলক করার পরামর্শ দেয় না। তবুও যেখানে আপনার ডিজাইন অনুমতি দেয়, সেখানে মূল লেখায় 7:1-এ পৌঁছানো ভালো চর্চা।

### APCA কি WCAG-এর অংশ?

না। APCA কনট্রাস্ট মাপার একটি ভিন্ন পদ্ধতি, যা নিয়ে WCAG 3-এর জন্য আলোচনা হয়েছে, আর WCAG 3 এখনো খসড়া। আজকের সামঞ্জস্য মাপা হয় WCAG 2-এর সেই অনুপাত দিয়ে, যা এই টুল হিসাব করে।

## সূত্র
- [W3C: WCAG 2.2 সাফল্যের মানদণ্ড 1.4.3 Contrast (Minimum)-এর ব্যাখ্যা](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum)
- [W3C: সাফল্যের মানদণ্ড 1.4.6 Contrast (Enhanced)-এর ব্যাখ্যা](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced)
- [W3C: সাফল্যের মানদণ্ড 1.4.11 Non-text Contrast-এর ব্যাখ্যা](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
- [W3C: WCAG 2.2-এ relative luminance-এর সংজ্ঞা](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance)
- [Deque: axe-core-এর color-contrast নিয়ম](https://dequeuniversity.com/rules/axe/4.13/color-contrast)
- [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)