বাংলা অ্যাপের color contrast ঠিক করার গাইড

বাংলা মোবাইল অ্যাপে color contrast ঠিক করতে বাস্তব বাংলা লেবেল, বাংলা ও আরবি অঙ্ক, ৳-সহ BDT পরিমাণ এবং success, pending, failed পেমেন্ট স্টেট একসঙ্গে পরীক্ষা করুন। সাধারণ টেক্সটে অন্তত 4.5:1 এবং বড় টেক্সটে 3:1 লক্ষ্য রাখুন; রঙের পাশাপাশি আইকন, লেখা ও অবস্থার নাম দিন।

মূল বিষয়গুলো

• •Latin lorem ipsum দিয়ে নয়—বাংলা যুক্তাক্ষর, মিশ্র-স্ক্রিপ্ট লেবেল এবং ৳1,250-এর মতো বাস্তব কনটেন্ট দিয়ে পরীক্ষা করুন।
• •পেমেন্টে শুধু সবুজ, হলুদ বা লাল যথেষ্ট নয়; স্ট্যাটাসের নাম, আইকন এবং পরবর্তী করণীয় দৃশ্যমান রাখুন।
• •উজ্জ্বল বাইরের আলোয় ব্যবহৃত অ্যাকশন স্ক্রিনে প্রাথমিক বোতাম, টাকা এবং ত্রুটি-বার্তার কনট্রাস্ট আগে যাচাই করুন।
• •floow.design-এ একই স্ক্রিনের contrast-safe ভ্যারিয়েন্ট তৈরি করে বাস্তব বাংলা ও BDT কনটেন্ট বসিয়ে রিভিউ করুন।

এই পাতায় যা আছে

• •কনট্রাস্ট অডিট শুরু করুন বাস্তব বাংলা কনটেন্ট দিয়ে
• •৳, অঙ্ক এবং form design-এর কনট্রাস্ট আলাদা করে যাচাই করুন
• •পেমেন্ট স্টেটে রঙকে একমাত্র সংকেত বানাবেন না
• •বাইরের আলো ও ডিভাইসে শেষ রিভিউ করুন

কনট্রাস্ট অডিট শুরু করুন বাস্তব বাংলা কনটেন্ট দিয়ে

বাংলাদেশের সংবিধানের Article 3 অনুযায়ী বাংলা রাষ্ট্রভাষা। তাই আপনার অ্যাপের accessibility পরীক্ষা কেবল ইংরেজি লেবেল বা Latin placeholder দিয়ে শেষ করা যাবে না। পেমেন্ট করুন, মোবাইল নম্বর, ভুল পিন, আজকের লেনদেন—এ ধরনের বাংলা লেবেল বসান। সঙ্গে বাংলা numeral, আরবি numeral এবং mixed-script UI string রাখুন: অফার ২৫%, OTP expires in 30 sec, ৳ 1,250.00।

প্রথমে স্ক্রিনের টেক্সটকে তিন ভাগে নিন: সাধারণ body ও field label, বড় heading, এবং নিষ্ক্রিয় বা সহায়ক লেখা। WCAG অনুযায়ী সাধারণ টেক্সটের জন্য 4.5:1, বড় টেক্সটের জন্য 3:1 কনট্রাস্ট লক্ষ্য করুন। ছোট, পাতলা বাংলা ফন্টে ন্যূনতম অনুপাত পেলেও বাস্তব ডিভাইসে পড়তে কষ্ট হতে পারে; তাই label-এর ওজন, আকার ও line-height বাড়িয়ে দেখুন।

বিশেষ করে ফর্মে placeholder-কে একমাত্র label বানাবেন না। ফিল্ড পূরণ হওয়ার পরেও নাম, অ্যাকাউন্ট নম্বর বা পরিমাণ লেবেল দৃশ্যমান থাকলে রঙ ফিকে হলেও ব্যবহারকারী প্রসঙ্গ হারান না।

৳, অঙ্ক এবং form design-এর কনট্রাস্ট আলাদা করে যাচাই করুন

বাংলাদেশি টাকা প্রতীক ৳-এর গ্লিফে স্বতন্ত্র বাঁক ও বিস্তারিত অংশ থাকে। ফলে শুধু $100 বা 1234 দিয়ে কনট্রাস্ট পরীক্ষায় পাস করলেই ৳ ১,২৫০, ৳1,250, বা মোট: ৳ 5,000 সমানভাবে পাঠযোগ্য হবে না। প্রকৃত BDT পরিমাণ বসিয়ে প্রতিটি ওজন ও সাইজে পরীক্ষা করুন। বিশেষত ছোট সারাংশ কার্ড, ইনপুটের suffix, ট্রানজ্যাকশন তালিকা এবং confirmation sheet-এ এই সমস্যা বেশি দেখা যায়।

form design-এ টাকার ইনপুটের label, প্রবেশ করানো অঙ্ক, currency symbol, উপলভ্য ব্যালান্স এবং error message-এর ভূমিকা আলাদা। সবকিছুকে একই হালকা ধূসর করলে ব্যবহারকারী কোনটি সম্পাদনা করা যায় বুঝতে পারেন না। সম্পাদনাযোগ্য অঙ্কে যথেষ্ট গাঢ় টেক্সট, ৳-এ একই বা কাছাকাছি কনট্রাস্ট, আর সহায়ক ব্যালান্সে ছোট হলেও পাঠযোগ্য রঙ ব্যবহার করুন।

পরীক্ষার সময় ৳ ০, ৳ ১০, ৳ ১,০০,০০০, ৳ 10,000.50 এবং দীর্ঘ বাংলা বাক্য রাখুন। কারণ অঙ্কের প্রস্থ, কমা, দশমিক ও প্রতীকের ফাঁক বদলালে ঘন UI-তে পাঠযোগ্যতাও বদলায়।

পেমেন্ট স্টেটে রঙকে একমাত্র সংকেত বানাবেন না

বাংলাদেশের mobile-finance অভ্যাসে bKash, Nagad এবং upay পরিচিত রেফারেন্স। এই ধরনের অ্যাপে success, pending এবং failed-payment অবস্থা উচ্চ-পরিণতির রঙ-সংক্রান্ত সিদ্ধান্ত: ভুল বোঝা মানে ব্যবহারকারী আবার পেমেন্ট করতে পারেন, অপেক্ষা না করে সহায়তায় যেতে পারেন, বা টাকা গেছে কি না নিশ্চিত হতে পারেন না।

প্রতিটি স্টেটের জন্য চারটি সংকেত দিন: স্পষ্ট নাম, পৃথক আইকন, পর্যাপ্ত কনট্রাস্টের রঙ, এবং করণীয়। যেমন পেমেন্ট সফল-এর সঙ্গে চেক আইকন ও রসিদ দেখার বোতাম; পেমেন্ট প্রক্রিয়াধীন-এর সঙ্গে ঘড়ি বা progress icon ও কিছুক্ষণ পর আবার দেখুন; পেমেন্ট ব্যর্থ-এর সঙ্গে সতর্ক আইকন ও আবার চেষ্টা করুন বা সহায়তা নিন।

লাল-সবুজে সীমাবদ্ধ থাকবেন না। pending-এর জন্য নিরপেক্ষ বা সতর্কতামূলক টোন ব্যবহার করলেও টেক্সট ও আইকন অপরিহার্য। রঙিন ব্যাকগ্রাউন্ডে সাদা লেখা দেওয়ার আগে অনুপাত মাপুন; আর pale green বা pale red card-এ গাঢ় বাংলা লেখা ও border দিন। স্ট্যাটাস চিপের ছোট টেক্সটকে বড় heading-এর কনট্রাস্ট নিয়মে বিচার করবেন না।

বাইরের আলো ও ডিভাইসে শেষ রিভিউ করুন

কনট্রাস্ট টুলের অনুপাত একটি শুরু, শেষ নয়। পেমেন্ট, ক্যাশ-আউট, OTP এবং জরুরি error screen অনেক সময় বাইরে বা উজ্জ্বল আলোতে দেখা হয়। তাই প্রধান action button, নিশ্চিত করুন, আবার চেষ্টা করুন, টাকা, fee এবং failure বার্তা বাস্তব ফোনে সর্বোচ্চ উজ্জ্বলতায় দেখুন। কম উজ্জ্বলতার ডিজাইন টোকেন, আধা-স্বচ্ছ overlay এবং ছবি-ভিত্তিক background আগে বাদ দিন।

একটি কার্যকর রিভিউ ক্রম হলো: প্রথমে default screen, পরে focused field, validation error, disabled button, loading, success, pending ও failed state। প্রতিটি অবস্থায় বাংলা label, numeral, mixed-script string এবং ৳-সহ BDT অঙ্ক বসান। স্ক্রিনশট নয়, ট্যাপযোগ্য prototype-এ দেখুন—কারণ চাপা overlay বা keyboard উঠলে রঙ ও দৃশ্যমানতা বদলাতে পারে।

floow.design-এ একই payment flow-এর contrast-safe payment, error এবং success-state ভ্যারিয়েন্ট তৈরি করুন। এরপর বাস্তব বাংলা এবং BDT কনটেন্ট বসিয়ে প্রতিটি ভ্যারিয়েন্ট রিভিউ করুন। যে ভ্যারিয়েন্টে স্ট্যাটাস, টাকা ও পরবর্তী কাজ সবচেয়ে দ্রুত বোঝা যায়, সেটিকেই আপনার UI token ও component নিয়মে নিন।

বাংলা পেমেন্ট UI-র কনট্রাস্ট রিভিউ চেকলিস্ট

সাধারণ ভুলগুলো

শুধু ইংরেজি নমুনা টেক্সট ও $ চিহ্ন দিয়ে কনট্রাস্ট মাপা।

৳ ১,২৫০, ৳1,250, বাংলা লেবেল এবং mixed-script string দিয়ে একই component পরীক্ষা করুন।

pending, success ও failed অবস্থাকে শুধু রঙে আলাদা করা।

প্রতিটি অবস্থায় নাম, স্বতন্ত্র আইকন এবং পরবর্তী করণীয় যোগ করুন।

placeholder-কে label ধরে ফর্ম তৈরি করা।

ফিল্ডের স্থায়ী label রাখুন এবং error state-এ label, entered value ও error text-এর কনট্রাস্ট আলাদা করে দেখুন।

রঙের অনুপাত পাস করলেই বাইরের আলোয় পরীক্ষা বাদ দেওয়া।

বাস্তব ফোনে উজ্জ্বল আলোতে action, টাকা, ফি ও error message যাচাই করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

বাংলা লেখার জন্য color contrast কত হওয়া উচিত?

বাংলা অ্যাপের সাধারণ টেক্সট ও form label-এর জন্য সাধারণত অন্তত 4.5:1 color contrast লক্ষ্য করুন; বড় টেক্সটের জন্য 3:1 গ্রহণযোগ্য হতে পারে। তবে ছোট বাংলা অক্ষর, যুক্তাক্ষর ও পাতলা ফন্টে বাস্তব ফোনে পড়ার পরীক্ষা জরুরি। পেমেন্ট করুন বা ভুল পিন-এর মতো প্রকৃত বাংলা লেখা দিয়েই অনুপাত ও পাঠযোগ্যতা যাচাই করুন।

৳ চিহ্ন ও টাকার অঙ্কের contrast কীভাবে পরীক্ষা করব?

৳ চিহ্ন ও টাকার অঙ্কের contrast পরীক্ষা করতে $100-এর বদলে ৳ ১,২৫০, ৳1,250 এবং মোট: ৳ 5,000-এর মতো বাস্তব BDT কনটেন্ট ব্যবহার করুন। বাংলাদেশি টাকা প্রতীকের গ্লিফে সূক্ষ্ম বিস্তারিত অংশ আছে, তাই ছোট সাইজ, হালকা ওজন, input suffix এবং transaction list-এ প্রতীক ও অঙ্ক আলাদা করে পাঠযোগ্য কি না দেখুন।

সবুজ-লাল ছাড়া পেমেন্ট স্ট্যাটাস কীভাবে দেখাব?

সবুজ-লাল ছাড়া পেমেন্ট স্ট্যাটাস দেখাতে স্পষ্ট স্ট্যাটাস লেখা, স্বতন্ত্র আইকন, কনট্রাস্ট-নিরাপদ টোন এবং পরবর্তী করণীয় একসঙ্গে দিন। যেমন পেমেন্ট সফল-এর সঙ্গে চেক আইকন, প্রক্রিয়াধীন-এর সঙ্গে ঘড়ি আইকন, এবং পেমেন্ট ব্যর্থ-এর সঙ্গে সতর্ক আইকন দিন। bKash, Nagad বা upay-ধরনের flow-তে শুধু রঙের ওপর নির্ভর করা ঝুঁকিপূর্ণ।

floow.design-এ কনট্রাস্ট ভ্যারিয়েন্ট কীভাবে রিভিউ করব?

floow.design-এ payment screen-এর default, error, success, pending ও failed ভ্যারিয়েন্ট তৈরি করুন। প্রতিটি ভ্যারিয়েন্টে বাস্তব বাংলা label, mixed-script UI string এবং ৳-সহ BDT পরিমাণ বসান। তারপর button, status chip, field label, error text ও confirmation amount-এর পাঠযোগ্যতা বাস্তব ফোনের উজ্জ্বল আলোতে তুলনা করুন; সবচেয়ে স্পষ্ট ভ্যারিয়েন্টটি component নিয়মে নিন।

শেষ কথা

ভালো কনট্রাস্ট মানে শুধু রঙের অনুপাত নয়; বাংলা অক্ষর, ৳-এর গ্লিফ, অঙ্ক এবং পেমেন্টের ফলাফল দ্রুত বোঝানো। বাস্তব কনটেন্টে পরীক্ষা করুন, রঙের সঙ্গে লেখা ও আইকন দিন, তারপর floow.design ভ্যারিয়েন্ট থেকে সবচেয়ে পাঠযোগ্য স্টেটটি বেছে নিন।

---

আগে স্ক্রিনগুলো ডিজাইন করুন

সহজ ভাষায় আপনার অ্যাপের বর্ণনা দিন—floow.design আপনার জন্য iOS ও Android স্ক্রিন তৈরি করে দেবে, যা আপনি পরে আরও পরিমার্জন করে হ্যান্ডঅফ করতে পারবেন।

বিনামূল্যে ডিজাইন শুরু করুন →

---

সূত্র

• •বাংলাদেশের সংবিধান ও আইনভান্ডার — Article 3
• •W3C Web Content Accessibility Guidelines (WCAG)
• •bKash-এর অফিসিয়াল ওয়েবসাইট
• •Nagad-এর অফিসিয়াল ওয়েবসাইট
• •upay-এর অফিসিয়াল ওয়েবসাইট

Related reading

• •অ্যাপের জন্য bangla typography গাইড
• •বাংলা অ্যাপের ui ux design নীতি
• •বাংলা মোবাইল form design চেকলিস্ট