কালার কনট্রাস্ট চেকার
আপনার রঙের সমন্বয় WCAG অ্যাক্সেসিবিলিটি মান পূরণ করে কিনা যাচাই করুন।
কালার কনট্রাস্ট চেকার সম্পর্কে
GuruAlpha কালার কনট্রাস্ট চেকার ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড রঙের মধ্যে কনট্রাস্ট অনুপাত WCAG (ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস) মান অনুযায়ী পরিমাপ করে। যেকোনো দুটি রঙ লিখুন এবং টুলটি তাদের কনট্রাস্ট অনুপাত গণনা করবে, যা জানাবে যে সংমিশ্রণটি সাধারণ ও বড় টেক্সটের জন্য AA বা AAA অ্যাক্সেসিবিলিটি মান পূরণ করে কিনা।
ওয়েব অ্যাক্সেসিবিলিটি একটি নৈতিক দায়িত্ব এবং একটি আইনি প্রয়োজন উভয়ই। WCAG 2.1 নির্দেশিকা ন্যূনতম কনট্রাস্ট অনুপাত নির্ধারণ করে যাতে নিশ্চিত করা যায় যে টেক্সট দৃষ্টি প্রতিবন্ধী ব্যক্তিদের জন্য পঠনযোগ্য, যার মধ্যে বর্ণান্ধতা, কম দৃষ্টি ও বয়সজনিত দৃষ্টিহ্রাস অন্তর্ভুক্ত। কনট্রাস্ট চেকার আপনার রঙ নির্বাচনের ওপর তাৎক্ষণিক প্রতিক্রিয়া দিয়ে সম্মতিকে সহজ করে তোলে।
টুলটি WCAG 2.1-এ নির্দিষ্ট আপেক্ষিক উজ্জ্বলতা সূত্র ব্যবহার করে কনট্রাস্ট অনুপাত গণনা করে। 1:1 অনুপাত মানে কোনো কনট্রাস্ট নেই (একই রঙ)। 21:1 অনুপাত সর্বোচ্চ কনট্রাস্ট (সাদার ওপর কালো)। WCAG প্রয়োজনীয়তা হলো: AA সাধারণ টেক্সটে 4.5:1, AA বড় টেক্সটে 3:1, AAA সাধারণ টেক্সটে 7:1 এবং AAA বড় টেক্সটে 4.5:1 প্রয়োজন। টুলটি স্পষ্টভাবে দেখায় যে আপনার রঙের সংমিশ্রণ প্রতিটি সীমা পূরণ করে কিনা।
ভিজ্যুয়াল প্রিভিউ আপনার টেক্সটের রঙ ব্যাকগ্রাউন্ড রঙের ওপর দেখায়, যা আপনাকে পঠনযোগ্যতার একটি বাস্তব দৃশ্য দেয়। প্রিভিউতে সাধারণ (16px) ও বড় (24px+) উভয় টেক্সট নমুনা অন্তর্ভুক্ত, কারণ বিভিন্ন আকারের জন্য বিভিন্ন WCAG প্রয়োজনীয়তা রয়েছে। রঙ সমন্বয় করার সাথে সাথে পাস/ফেল সূচকগুলো রিয়েল-টাইমে আপডেট হয়।
ওয়েব ডেভেলপার ও ডিজাইনারদের জন্য, ওয়েবসাইট সকল ব্যবহারকারীর জন্য অ্যাক্সেসযোগ্য কিনা তা নিশ্চিত করতে কনট্রাস্ট চেকার অপরিহার্য। এটি ডিজাইন ওয়ার্কফ্লোতে স্বাভাবিকভাবে মিশে যায় — রঙ বাছুন, কনট্রাস্ট যাচাই করুন, প্রয়োজনে সমন্বয় করুন এবং এই আত্মবিশ্বাস নিয়ে এগিয়ে যান যে আপনার টেক্সট পঠনযোগ্য।
কালার কনট্রাস্ট চেকার-এর প্রধান বৈশিষ্ট্য
- যেকোনো দুটি রঙের মধ্যে কনট্রাস্ট অনুপাত গণনা
- WCAG AA ও AAA সম্মতি যাচাই
- সাধারণ টেক্সট (4.5:1) ও বড় টেক্সট (3:1) সীমা
- ব্যাকগ্রাউন্ডে টেক্সটের লাইভ প্রিভিউ
- মান পূরণের জন্য প্রস্তাবিত রঙ সমন্বয়
- HEX, RGB ও HSL ইনপুট সমর্থন
- সব ডিভাইসে কাজ করে
- সাইন-আপের প্রয়োজন নেই
কালার কনট্রাস্ট চেকার কীভাবে ব্যবহার করবেন
- GuruAlpha-তে কনট্রাস্ট চেকার খুলুন।
- ফোরগ্রাউন্ড (টেক্সট) রঙ লিখুন বা নির্বাচন করুন।
- ব্যাকগ্রাউন্ড রঙ লিখুন বা নির্বাচন করুন।
- কনট্রাস্ট অনুপাত ও WCAG সম্মতির অবস্থা দেখুন।
- সাধারণ ও বড় উভয় টেক্সটের প্রয়োজনীয়তা যাচাই করুন।
- সংমিশ্রণ ব্যর্থ হলে রঙ সমন্বয় করুন।
- AA বা AAA পূরণ করতে প্রস্তাবিত সমন্বয় ব্যবহার করুন।
কালার কনট্রাস্ট চেকার ব্যবহারের টিপস
- AA সম্মতি (4.5:1) সর্বজনীন ওয়েবসাইটের জন্য ন্যূনতম।
- AAA সম্মতি (7:1) সর্বোচ্চ অ্যাক্সেসিবিলিটির জন্য পছন্দনীয়।
- বড় টেক্সটের (18px বোল্ড বা 24px রেগুলার) কনট্রাস্ট প্রয়োজনীয়তা কম।
- তথ্য জানাতে শুধু রঙের ওপর নির্ভর করবেন না — টেক্সট লেবেল বা প্যাটার্ন যোগ করুন।
- অতিরিক্ত অ্যাক্সেসিবিলিটি যাচাইয়ের জন্য বর্ণান্ধতা সিমুলেটর দিয়ে পরীক্ষা করুন।
কালার কনট্রাস্ট চেকার সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্ন
WCAG কী?
WCAG (ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস) হলো ওয়েব অ্যাক্সেসিবিলিটির আন্তর্জাতিক মান। এটি প্রতিবন্ধী ব্যক্তিদের জন্য কনটেন্ট অ্যাক্সেসযোগ্য করার প্রয়োজনীয়তা নির্ধারণ করে।
আমার কোন কনট্রাস্ট অনুপাত প্রয়োজন?
AA সাধারণ টেক্সট: 4.5:1। AA বড় টেক্সট: 3:1। AAA সাধারণ টেক্সট: 7:1। AAA বড় টেক্সট: 4.5:1। অন্তত AA সম্মতির লক্ষ্য রাখুন।
'বড় টেক্সট' কী হিসেবে বিবেচিত হয়?
18px (24pt) রেগুলার ওজন বা 14px (18.66pt) বোল্ড ওজন। বড় টেক্সটের কনট্রাস্ট প্রয়োজনীয়তা কম কারণ বড় অক্ষর পড়া সহজ।
এটি কি অ-টেক্সট উপাদান যাচাই করে?
টুলটি টেক্সট কনট্রাস্টে মনোনিবেশ করে। WCAG অ-টেক্সট UI উপাদানের জন্যও 3:1 কনট্রাস্ট দাবি করে, যা আপনি একই টুল দিয়ে ম্যানুয়ালি যাচাই করতে পারেন।