টেক্সট ও ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG কন্ট্রাস্ট অনুপাত পরীক্ষা করুন — সাধারণ টেক্সট, বড় টেক্সট ও UI কম্পোনেন্টের জন্য AA/AAA পাস-ফেল গ্রেড দেখুন, সাথে লাইভ প্রিভিউ ও অ্যাক্সেসিবল রঙের পরামর্শ।

টেক্সটের রঙ
টিন্ট
ব্যাকগ্রাউন্ডের রঙ
টিন্ট
কন্ট্রাস্ট অনুপাত
--:1
সাধারণ টেক্সট
১৮px-এর নিচের বডি টেক্সট (বা ১৪px বোল্ডের নিচে)
AA AAA
বড় টেক্সট
১৮px+ সাধারণ, বা ১৪px+ বোল্ড
AA AAA
UI কম্পোনেন্ট
আইকন, বর্ডার, ফর্ম কন্ট্রোল ও গ্রাফিক্স
AA AAA
লাইভ প্রিভিউ

The quick brown fox

কন্ট্রাস্ট পর্যাপ্ত হলে বড় টেক্সট আরামদায়কভাবে পড়া যায়।

এটি সাধারণ বডি টেক্সটের একটি নমুনা অনুচ্ছেদ। ভালো কালার কন্ট্রাস্ট আপনার কন্টেন্ট সবার জন্য পড়ার উপযোগী রাখে, কম দৃষ্টিশক্তি বা বর্ণান্ধতা আছে এমন ব্যক্তিদের সহ। একটি নমুনা লিঙ্ক.

ছোট প্রিন্ট ও ক্যাপশন পড়া সবচেয়ে কঠিন — এগুলোর সবচেয়ে বেশি কন্ট্রাস্ট প্রয়োজন।
নমুনা বাটন নমুনা বাটন
পরামর্শ

সবকিছু WCAG 2.x রিলেটিভ-লুমিনান্স ফর্মুলা ব্যবহার করে আপনার ব্রাউজারে লাইভ গণনা করা হয় — কোনো আপলোড নেই, কোনো সাইন-আপ নেই, সম্পূর্ণ বিনামূল্যে।


কালার কন্ট্রাস্ট চেকার সম্পর্কে

কালার কনট্রাস্ট চেকার একটি টেক্সট রঙ ও একটি ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG কনট্রাস্ট অনুপাত পরিমাপ করে, এরপর সাধারণ টেক্সট, বড় টেক্সট ও UI কম্পোনেন্টের জন্য AA ও AAA অ্যাক্সেসিবিলিটি লেভেলের বিপরীতে জোড়াটির গ্রেড দেয়। আপনি যেকোনো রঙ সমন্বয় করলে অনুপাত ও প্রতিটি পাস/ফেল রায় তাৎক্ষণিকভাবে আপডেট হয়।

একটি বাস্তবসম্মত প্রিভিউ প্যানেল আপনার বেছে নেওয়া সমন্বয়ে হেডিং, বডি কপি, ছোট প্রিন্ট, একটি বাটন ও একটি লিংক রেন্ডার করে, যাতে আপনি বিমূর্ত সোয়াচের বদলে বাস্তব কনটেন্ট দিয়ে পাঠযোগ্যতা যাচাই করতে পারেন। কোনো জোড়া ব্যর্থ হলে, টুলটি AA থ্রেশহোল্ড 4.5:1-এ পৌঁছানোর নিকটতম অ্যাক্সেসিবল টেক্সট রঙ সাজেস্ট করে, এক ক্লিকে প্রয়োগের জন্য প্রস্তুত।

গাণিতিক হিসাব WCAG 2.x রিলেটিভ-লুমিন্যান্স ফর্মুলা অনুসরণ করে এবং সম্পূর্ণ আপনার ব্রাউজারে চলে — কিছুই আপলোড হয় না এবং চেকগুলো ফ্রি। অনুপাত ও গ্রেডের একটি সংক্ষিপ্ত টেক্সট রিপোর্ট কপি করে অ্যাক্সেসিবিলিটি রিভিউ বা পুল রিকোয়েস্টে পেস্ট করতেও পারেন।

কালার কন্ট্রাস্ট চেকার কীভাবে ব্যবহার করবেন

  1. পিকার দিয়ে বা মান টাইপ করে আপনার টেক্সট রঙ ও ব্যাকগ্রাউন্ড রঙ সেট করুন।
  2. সাধারণ টেক্সট, বড় টেক্সট ও UI কম্পোনেন্টের জন্য কনট্রাস্ট অনুপাত এবং AA/AAA ফলাফল দেখুন।
  3. আপনার রঙে বাস্তব হেডিং, প্যারাগ্রাফ, বাটন ও লিংক দেখতে লাইভ প্রিভিউ পরীক্ষা করুন।
  4. জোড়াটি ব্যর্থ হলে, সাজেস্ট করা অ্যাক্সেসিবল টেক্সট রঙ প্রয়োগ করুন বা দুটি রঙ অদলবদল করুন।
  5. অনুপাত ও কমপ্লায়েন্স ফলাফল শেয়ার করতে "Copy report"-এ ক্লিক করুন।

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

WCAG AA সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সট ও আইকন ও ফর্ম বর্ডারের মতো UI কম্পোনেন্টের জন্য 3:1 প্রয়োজন। কঠোরতর AAA লেভেল সাধারণ টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1 দাবি করে।

নিয়মিত ওজনে 18px বা তার বেশি, অথবা বোল্ড হলে 14px ও তার বেশি টেক্সট। বড় গ্লিফ পড়া সহজ বলে, WCAG এগুলোকে AA লেভেলে কম কনট্রাস্ট অনুপাত 3:1 অনুমতি দেয়।

হ্যাঁ। WCAG রিলেটিভ-লুমিন্যান্স ফর্মুলা ব্যবহার করে প্রতিটি চেক তাৎক্ষণিকভাবে আপনার ব্রাউজারে হিসাব করা হয়, কোনো সাইন-আপ নেই, ব্যবহারের সীমা নেই এবং কোনো খরচ নেই।

বিল্ট-ইন সাজেশন ব্যবহার করুন: টুলটি আপনার টেক্সট রঙের নিকটতম ভ্যারিয়েন্ট খুঁজে বের করে যা বর্তমান ব্যাকগ্রাউন্ডের বিপরীতে AA পাস করে এবং সরাসরি প্রয়োগ করতে দেয়। টেক্সট রঙের কোনো ভ্যারিয়েন্ট পাস না করলে, বদলে ব্যাকগ্রাউন্ড সমন্বয় করুন।

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

না। দুটি রঙ, অনুপাত এবং সাজেশন — সবই আপনার ব্রাউজারে স্থানীয়ভাবে হিসাব করা হয় — কাজ করার সময় পেজটি কোনো সার্ভার রিকোয়েস্ট করে না।

শেয়ার করুন

জনপ্রিয় অনুসন্ধান
রঙ কনট্রাস্ট চেকার wcag কনট্রাস্ট অনুপাত অ্যাক্সেসিবিলিটি কনট্রাস্ট চেকার টেক্সট কনট্রাস্ট চেকার aa aaa কনট্রাস্ট পরীক্ষা অনলাইনে রঙ কনট্রাস্ট যাচাই
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।
সমস্যা রিপোর্ট করুন

আপনার নিজের ওয়েবসাইটে এই বিনামূল্যের টুলটি যোগ করুন — নিচের কোডটি কপি করে পেস্ট করুন।