কালার কনট্রাস্ট চেকার
নতুনটেক্সট ও ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG AA/AAA কনট্রাস্ট অনুপাত যাচাই করুন।
Large heading — 24px bold
Large text, 18.66px and up reads at 3:1.
Normal body text. The quick brown fox jumps over the lazy dog and reads comfortably at 4.5:1 or better.
Small print and captions — the hardest text to read.
Keeps your hue & saturation — only the lightness changes — so brand colors stay recognizable.
Pairwise palette grid
Paste several colors (hex, one per line or separated by spaces / commas) to see which foreground/background pairs pass AA (4.5:1). First 8 colors are used.
Runs entirely in your browser. Nothing is uploaded.
আপনার ব্রাউজারে WCAG কালার কনট্রাস্ট চেক করুন
এই কালার কনট্রাস্ট চেকার একটি টেক্সট এবং ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG কনট্রাস্ট রেশিও পরিমাপ করে এবং তাৎক্ষণিকভাবে জানায় জোড়াটি সাধারণ টেক্সট, বড় টেক্সট এবং UI কম্পোনেন্টের জন্য AA এবং AAA পাস করে কিনা। একটি হেক্স মান টাইপ করুন, RGB বা HSL ফিল্ড এডিট করুন, লাইটনেস স্লাইডার টানুন, বা আপনার স্ক্রিনের যেকোনো রঙ স্যাম্পল করতে আইড্রপার ব্যবহার করুন — রেশিও, পাস-ফেল ম্যাট্রিক্স, এবং লাইভ প্রিভিউ সবই আপনি টাইপ করার সাথে সাথে আপডেট হয়।
এটি ডিজাইনাররা যে টুল ইতিমধ্যে বিশ্বাস করেন সেভাবে কাজ করে — WebAIM এবং Adobe Color-এর পেছনের একই WCAG গণিত — কিন্তু একটি লাইভ পঠনযোগ্য প্রিভিউ, একটি APCA (WCAG 3) স্কোর, এবং ফেল হওয়া জোড়ার জন্য এক-ক্লিক ফিক্স যোগ করে। সবকিছু স্থানীয়ভাবে JavaScript-এ চলে: আপনার রঙ কখনও আপনার ডিভাইস ছেড়ে যায় না, এবং কোনো অ্যাকাউন্ট প্রয়োজন হয় না।
WCAG AA এবং AAA থ্রেশহোল্ড ব্যাখ্যা করা
WCAG কনট্রাস্ট রেশিও 1:1 (দুটি অভিন্ন রঙ) থেকে 21:1 (সাদার ওপর কালো) পর্যন্ত চলে। লেভেল AA — ADA এবং Section 508-এর মতো বেশিরভাগ আইন যা প্রয়োজন করে — সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1 প্রয়োজন। লেভেল AAA সেটিকে 7:1 এবং 4.5:1-এ বাড়ায়। বড় টেক্সট মানে ১৮pt (২৪px) এবং তার বেশি, বা বোল্ড হলে ১৪pt (প্রায় ১৮.৬৬px) এবং তার বেশি।
পাস-ফেল ম্যাট্রিক্স প্রতিটি থ্রেশহোল্ড আলাদাভাবে ভেঙে দেখায়, তাই আপনি এক নজরে দেখতে পারেন #767676-এর মতো একটি ধূসর সাদার ওপর 4.54:1-এ AA বডি টেক্সট সবেমাত্র পাস করে কিন্তু AAA-এর জন্য প্রয়োজনীয় 7:1-এর কম পড়ে। আপনার প্রোডাক্ট টিমকে যদি আইনি কমপ্লায়েন্স (ADA, EN 301 549, Section 508) সন্তুষ্ট করতে হয়, AA হলো ছাড়িয়ে যাওয়ার বার।
প্রিভিউ করুন, ফিক্স করুন, এবং অ্যাক্সেসিবল কালার জোড়া শিপ করুন
সংখ্যা শুধু অর্ধেক গল্প বলে, তাই লাইভ প্রিভিউ আপনার সঠিক রঙে বাস্তব হেডিং, বডি কপি, ছোট প্রিন্ট এবং একটি নমুনা বাটন ও চিপ রেন্ডার করে — শুধু রেশিও পড়ার বদলে পঠনযোগ্যতা দেখুন। একটি জোড়া ফেল করলে, ‘Make it pass’ সাজেস্টার আপনার হিউ এবং স্যাচুরেশন রেখে দেয় এবং আপনার নির্বাচিত লেভেল (AA, AA large, বা AAA) ছাড়িয়ে যাওয়া নিকটতম রঙে লাইটনেস নাড়ায়, তারপর এক ক্লিকে প্রয়োগ করে।
জোড়া-ভিত্তিক গ্রিড একটি সম্পূর্ণ প্যালেট গ্রহণ করে এবং কোন রঙ কম্বিনেশন এক নজরে পাস করে তা দেখায় — একটি ডিজাইন সিস্টেম তৈরির সময় দরকারি যেখানে প্রতিটি ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড জোড়া নিরাপদ হওয়া প্রয়োজন। একবারে একটি করে দশটি জোড়া পরীক্ষা করার বদলে, আপনি একবার আপনার প্যালেট পেস্ট করেন এবং তাৎক্ষণিকভাবে সম্পূর্ণ ম্যাট্রিক্স দেখেন।
APCA: WCAG 3 কনট্রাস্টের একটি প্রিভিউ
ক্লাসিক রেশিওর পাশাপাশি, এই চেকার একটি APCA Lc স্কোর দেখায় — WCAG 3-এর জন্য প্রস্তাবিত পারসেপচুয়াল কনট্রাস্ট মেট্রিক। APCA মডেল করে চোখ আসলে কীভাবে ডার্ক-অন-লাইট বনাম লাইট-অন-ডার্ক টেক্সট পড়ে এবং ফন্ট ওজনকে বিবেচনায় নেয়, তাই এটি WCAG 2 রেশিও কখনো কখনো মিস করা পঠনযোগ্যতা সমস্যা ধরে ফেলে। মোটামুটি লক্ষ্য: বডি টেক্সটের জন্য Lc 75+, বড় টেক্সটের জন্য Lc 60+, বড় হেডিংয়ের জন্য Lc 45+।
WCAG 3 এখনও খসড়া অবস্থায় আছে এবং WCAG 2.2 প্রতিস্থাপন করেনি, তাই আজকের কমপ্লায়েন্স মানে 4.5:1 এবং 3:1 থ্রেশহোল্ড পূরণ করা। বর্তমান রেশিওর পাশাপাশি APCA দেখানো আপনাকে স্পেক চূড়ান্ত হওয়ার জন্য অপেক্ষা না করেই আপনার প্যালেট ভবিষ্যৎ-প্রুফ করতে দেয়।
আইকন এবং UI কম্পোনেন্টের জন্য নন-টেক্সট কনট্রাস্ট
কনট্রাস্ট শুধু টেক্সট সম্পর্কে নয়। WCAG 2.1 SC 1.4.11-এ ইন্টারঅ্যাকটিভ কম্পোনেন্টের সীমানার জন্য 3:1 কনট্রাস্ট প্রয়োজন — ইনপুট বর্ডার, ফোকাস ইন্ডিকেটর, টগল স্টেট — এবং অর্থপূর্ণ আইকন ও গ্রাফিক্সের জন্য। ম্যাট্রিক্সে 3:1-এ একটি নিবেদিত UI এবং গ্রাফিক্স চেক অন্তর্ভুক্ত আছে যাতে আপনি নিশ্চিত করতে পারেন একটি বাটন আউটলাইন বা আইকন দৃশ্যমান, শুধু ভেতরের লেবেল নয়।
এটি এমন একটি ক্ষেত্র যেখানে অনেক টিম না বুঝেই অডিটে ফেল করে। একটি হালকা-ধূসর ইনপুট বর্ডার (#D1D1D1 সাদার ওপর 1.4:1) একটি সাধারণ WCAG 2.1 লঙ্ঘন এমনকি পেজের সব টেক্সট পাস করলেও। এখানে আপনার UI কম্পোনেন্ট চেক করতে কয়েক সেকেন্ড লাগে এবং একটি আনুষ্ঠানিক অডিটে বিস্ময় প্রতিরোধ করে।
এটি WebAIM, Adobe Color এবং Chrome DevTools-এর সাথে কীভাবে তুলনীয়
WebAIM-এর কনট্রাস্ট চেকার webaim.org-এ সবচেয়ে বেশি উদ্ধৃত ফ্রি অ্যাক্সেসিবিলিটি টুল এবং এখানকার মতো একই WCAG 2 ফর্মুলা ব্যবহার করে। এটি APCA দেখায় না, কোনো লাইভ টেক্সট প্রিভিউ নেই, ফেল হওয়া জোড়া অটো-ফিক্স করতে পারে না, এবং একসাথে একাধিক কালার কম্বিনেশন টেস্ট করার জন্য কোনো জোড়া-ভিত্তিক প্যালেট গ্রিড নেই।
Adobe Color-এর Accessibility Tools সেকশন AA/AAA পাস-ফেল দেখায় এবং একটি কালার ব্লাইন্ডনেস সিমুলেটর অন্তর্ভুক্ত করে, কিন্তু আপনার কাজ সংরক্ষণ করতে একটি ফ্রি Adobe অ্যাকাউন্ট প্রয়োজন, এবং এটি একটি পাসিং কালার স্বয়ংক্রিয়ভাবে সাজেস্ট করতে পারে না।
Chrome DevTools-এ Elements প্যানেলের কালার পিকারে একটি কনট্রাস্ট রেশিও ব্যাজ রয়েছে যা ইন-ব্রাউজার চেকের জন্য কাজ করে — কিন্তু শুধু DevTools-এর ভেতরে, তাই আপনি একটি নির্দিষ্ট কালার জোড়ার লিংক শেয়ার করতে পারবেন না। এই চেকার কোনো লগইন ছাড়াই চলে, WCAG 2 রেশিও এবং APCA Lc স্কোর উভয়ই দেখায়, আপনার নির্বাচিত রঙে একটি লাইভ প্রিভিউ রেন্ডার করে, এবং একটি ভিউতে একটি সম্পূর্ণ প্যালেট গ্রিড পরীক্ষা করতে দেয়।
WCAG কনট্রাস্ট রেশিও সূত্র: গণিত আসলে কীভাবে কাজ করে
কনট্রাস্ট রেশিও গণনা করা হয় (L1 + 0.05) / (L2 + 0.05) হিসেবে, যেখানে L1 হালকা রঙের আপেক্ষিক লুমিন্যান্স এবং L2 গাঢ় রঙের আপেক্ষিক লুমিন্যান্স। আপেক্ষিক লুমিন্যান্স শুধু RGB-এর একটি ব্রাইটনেস গড় নয় — এটি একটি পারসেপচুয়ালি ওয়েটেড, গামা-কারেক্টেড মান। প্রতিটি sRGB চ্যানেল প্রথমে ২৫৫ দিয়ে ভাগ করে ০ থেকে ১-এ নরমালাইজ করা হয়। ফলাফল যদি ≤ 0.03928 হয় তা লিনিয়ারাইজ করা হয় C_linear = C / 12.92 হিসেবে; অন্যথায় C_linear = ((C + 0.055) / 1.055)^2.4।
0.2126, 0.7152, এবং 0.0722 কোয়েফিশিয়েন্টগুলো লাল, সবুজ এবং নীল আলোর প্রতি মানুষের ভিজ্যুয়াল সিস্টেমের অসম সংবেদনশীলতা প্রতিফলিত করে। চোখ লাল বা নীলের চেয়ে সবুজের প্রতি অনেক বেশি সংবেদনশীল, যে কারণে একটি উজ্জ্বল, স্যাচুরেটেড সবুজের সমান উজ্জ্বল লালের চেয়ে অনেক বেশি লুমিন্যান্স থাকতে পারে। এর মানে খাঁটি সবুজ সাদার ওপর (#00FF00) 0.7152 লুমিন্যান্স রয়েছে — প্রায় সাদার মতোই উজ্জ্বল — যা মাত্র প্রায় 1.37:1 কনট্রাস্ট রেশিও দেয় যদিও এটি প্রাণবন্ত দেখায়।
ফর্মুলায় 0.05 অফসেট দুটি উদ্দেশ্য পূরণ করে: এটি উভয় রঙ খাঁটি কালো হলে শূন্য দিয়ে ভাগ প্রতিরোধ করে, এবং বাস্তব ডিসপ্লে সারফেসের অ্যাম্বিয়েন্ট প্রতিফলন মডেল করে, যা কখনও সত্যিকারের শূন্য লুমিন্যান্স অর্জন করে না। উভয় পাশেই একই অফসেট বহন করার কারণে, সর্বোচ্চ সম্ভাব্য রেশিও — খাঁটি সাদা (L = 1) বনাম খাঁটি কালো (L = 0) — ঠিক 21:1 হয়ে যায়, এবং দুটি অভিন্ন রঙ সবসময় ঠিক 1:1 দেয়।
বাস্তবে WCAG AA এবং AAA: থ্রেশহোল্ড, সংজ্ঞা এবং নন-টেক্সট কনট্রাস্ট
WCAG 2 Success Criterion 1.4.3 (Contrast Minimum, Level AA)-এ সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1 প্রয়োজন। WCAG নির্দিষ্টভাবে বড় টেক্সট সংজ্ঞায়িত করে: যেকোনো ওজনে অন্তত ১৮pt (২৪px), বা বোল্ড হলে অন্তত ১৪pt (প্রায় ১৮.৬৭px)। এগুলো ডিফল্ট জুম লেভেলে CSS পিক্সেল মান — পয়েন্ট সাইজ প্রিন্টের জগৎ থেকে আসে এবং ৯৬ dpi-এ px-এ ম্যাপ হয়।
লেভেল AAA (SC 1.4.6, Enhanced Contrast) বারকে সাধারণ টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1-এ বাড়ায়। WCAG স্পেসিফিকেশন নিজেই স্বীকার করে যে AAA সব ব্যবহারকারীর জন্য সব কনটেন্ট জুড়ে অর্জনযোগ্য নয়, এবং সম্পূর্ণ পেজের জন্য একটি ব্ল্যাঙ্কেট পলিসি রিকোয়ারমেন্ট হিসেবে সুপারিশ করা হয় না।
WCAG 2.1 SC 1.4.11 (Non-Text Contrast, Level AA) টেক্সটের বাইরে কনট্রাস্ট প্রয়োজনীয়তা প্রসারিত করে। যেকোনো ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস কম্পোনেন্ট-এর ভিজ্যুয়াল সীমানা — একটি ইনপুট ফিল্ডের আউটলাইন, একটি বাটনের বর্ডার, একটি চেকবক্সের বক্স, একটি টগলের ট্র্যাক — সংলগ্ন ব্যাকগ্রাউন্ড রঙের বিপরীতে অন্তত 3:1 অর্জন করতে হবে। ডেকোরেটিভ ছবি এবং ডিজেবলড কম্পোনেন্ট এতে অব্যাহতিপ্রাপ্ত।
আইনি প্রয়োজনীয়তা, ADA মামলা এবং European Accessibility Act
যুক্তরাষ্ট্রে, Americans with Disabilities Act (ADA)-কে আদালত কভার করা প্রতিষ্ঠানের জন্য অ্যাক্সেসিবল ওয়েবসাইট প্রয়োজন করে এমনভাবে ব্যাখ্যা করেছে। রাজ্য ও স্থানীয় সরকারি ওয়েবসাইটের জন্য প্রয়োগযোগ্য স্ট্যান্ডার্ড হিসেবে DOJ-এর ২০২৪ সালের চূড়ান্ত নিয়ম Title II-এর অধীনে আনুষ্ঠানিকভাবে WCAG 2.1 Level AA কোডিফাই করেছে। ফেডারেল এজেন্সি এবং তাদের কন্ট্রাক্টরদের জন্য, Rehabilitation Act-এর Section 508-এ ২০১৮ রিফ্রেশ থেকে WCAG 2.0 AA-এর সাথে কনফরম্যান্স প্রয়োজন।
ADA-এর অধীনে বেসরকারি খাতের ওয়েবসাইট অ্যাক্সেসিবিলিটি মামলা তীব্রভাবে বেড়েছে। US বাদীরা ২০২৩ সালে ৪,০০০-এর বেশি ডিজিটাল অ্যাক্সেসিবিলিটি মামলা দাখিল করেছে — ২০১৭ সালে প্রায় ৮০০ থেকে বেড়ে — এবং কনট্রাস্ট ব্যর্থতা ডিমান্ড লেটার এবং অভিযোগে সবচেয়ে বেশি উদ্ধৃত লঙ্ঘনগুলোর মধ্যে একটি। ল্যান্ডমার্ক কেস হলো Robles v. Domino's Pizza (৯ম সার্কিট, ২০১৯)।
ইউরোপে, European Accessibility Act (EAA) ২৮ জুন, ২০২৫ থেকে প্রয়োগে এসেছে। এটি EU-তে বিক্রি হওয়া বেশিরভাগ ডিজিটাল পণ্য ও সেবা — ই-কমার্স, ব্যাংকিং, পরিবহন, মিডিয়া, ই-বুক, টেলিফোনি — EN 301 549 স্ট্যান্ডার্ড পূরণ করা প্রয়োজন করে, যা WCAG 2.1 Level AA রেফার করে। ADA-এর বিপরীতে, EAA ভৌত অবস্থান থাকুক বা না থাকুক বেসরকারি খাতের কোম্পানিতে প্রযোজ্য।
APCA অ্যালগরিদম এবং WCAG 3-এ কনট্রাস্টের ভবিষ্যৎ
WCAG 2 কনট্রাস্ট রেশিও বাস্তব-বিশ্বের ডিজাইনের প্রান্তে স্পষ্ট হওয়া সীমাবদ্ধতার জন্য সমালোচনার মুখোমুখি হয়েছে। ফর্মুলা একটি পাতলা ১২px ফন্ট এবং একটি ভারী ৭০০-ওজনের ১৬px ফন্টকে একইভাবে বিবেচনা করে যতক্ষণ উভয়ই 4.5:1 ছাড়িয়ে যায় — কিন্তু একই রেশিওতে বোল্ড টেক্সট পাতলা টেক্সটের চেয়ে প্রমাণযোগ্যভাবে বেশি পঠনযোগ্য।
অ্যান্ড্রু সোমার্স কর্তৃক বিকশিত Advanced Perceptual Contrast Algorithm (APCA) হলো WCAG 3.0-এর কনট্রাস্ট পদ্ধতির শীর্ষস্থানীয় প্রার্থী। APCA একটি রেশিওর বদলে একটি Lc (lightness contrast) মান ফেরত দেয়। স্কেলটি মোটামুটি −১০৮ থেকে +১০৬ পর্যন্ত চলে; চিহ্নটি পোলারিটি এনকোড করে — টেক্সট ব্যাকগ্রাউন্ডের চেয়ে হালকা নাকি গাঢ়। ব্যবহারিক Lc লক্ষ্য: পছন্দের বডি টেক্সটের জন্য Lc 90, বডি-টেক্সট ফ্লোরের জন্য Lc 75, বড় ডিসপ্লে টেক্সটের জন্য Lc 60, এবং বড় ডেকোরেটিভ হেডিংয়ের জন্য Lc 45।
২০২৫ সালের মাঝামাঝি হিসেবে, WCAG 3.0 এখনও একটি Working Draft এবং একটি W3C Recommendation হিসেবে কোনো প্রক্ষেপিত প্রকাশনার তারিখ নেই। বাস্তবে এর মানে হলো WCAG 2.2 Level AA — 4.5:1 এবং 3:1 থ্রেশহোল্ডসহ — সর্বত্র বর্তমান আইনি ও প্রযুক্তিগত স্ট্যান্ডার্ড। উভয় স্কোর পাশাপাশি চালানো আপনাকে আজকের আইনি প্রয়োজনীয়তা যাচাই করতে দেয় এবং আপনার প্যালেটকে আগামী স্ট্যান্ডার্ডের সম্ভাব্য দিকে অবস্থান করে।
প্রতিবার কনট্রাস্ট পাস করার ব্যবহারিক ডিজাইন কৌশল
সবচেয়ে নির্ভরযোগ্য কৌশল হলো কয়েকটি পরিচিত-নিরাপদ মান দিয়ে আপনার প্যালেট নোঙর করা এবং বাইরের দিকে তৈরি করা। সাদার ওপর #1a1a1a 18.1:1 উৎপন্ন করে — AAA অঞ্চলের গভীরে এবং বেশিরভাগ চোখে কালো থেকে আলাদা করা যায় না। #767676 হেক্স অ্যাক্সেসিবিলিটি কাজে একটি বেঞ্চমার্ক হয়ে উঠেছে কারণ এটি সবচেয়ে হালকা নিউট্রাল ধূসর যা এখনও খাঁটি সাদা (#FFFFFF) ব্যাকগ্রাউন্ডে 4.5:1 পাস করে।
প্লেসহোল্ডার টেক্সট সবচেয়ে বেশি উপেক্ষিত সমস্যা এলাকাগুলোর একটি। ব্রাউজার ইনপুটের ভেতরে প্লেসহোল্ডার কপির জন্য ডিফল্টভাবে একটি মিডিয়াম ধূসর ব্যবহার করে, এবং সেই ডিফল্ট নিয়মিতভাবে WCAG 1.4.3 ফেল করে। WCAG স্পেসিফিকেশন নিশ্চিত করে যে প্লেসহোল্ডার টেক্সট অব্যাহতিপ্রাপ্ত নয় — এটি যদি ব্যবহারকারীকে একটি কনটেন্ট ইঙ্গিত জানায়, তাহলে এর সাধারণ বডি টেক্সটের মতো একই 4.5:1 কনট্রাস্ট প্রয়োজন।
ডার্ক মোড কনট্রাস্ট যাচাই বোঝা উল্লেখযোগ্যভাবে বাড়ায়। লাইট মোডে পাস করা প্রতিটি ফোরগ্রাউন্ড-ব্যাকগ্রাউন্ড জোড়া ডার্ক মোডেও স্বাধীনভাবে যাচাই করতে হবে — লাইট মোডে 7:1 অর্জনকারী একটি প্যালেট সহজেই রঙ নিরীহভাবে ইনভার্ট করা হলে 1.5:1-এর নিচে রেশিও উৎপন্ন করতে পারে। একটি সিস্টেম্যাটিক পদ্ধতি হলো একটি নিবেদিত ডার্ক-মোড টোকেন সেট সংজ্ঞায়িত করা এবং প্রতিটি কম্বিনেশন একটি জোড়া-ভিত্তিক গ্রিড চেকের মাধ্যমে চালানো।
Frequently asked questions
কালার কনট্রাস্ট চেকার কী?
একটি কালার কনট্রাস্ট চেকার একটি টেক্সট (ফোরগ্রাউন্ড) রঙ এবং এর ব্যাকগ্রাউন্ডের মধ্যে WCAG কনট্রাস্ট রেশিও পরিমাপ করে, তারপর জানায় জোড়াটি অ্যাক্সেসিবিলিটি গাইডলাইনের অধীনে পঠনযোগ্য কিনা। দুটি রঙ লিখুন এবং এটি 1:1 (অভিন্ন) থেকে 21:1 (সাদার ওপর কালো) পর্যন্ত একটি রেশিও প্লাস সাধারণ টেক্সট, বড় টেক্সট এবং UI কম্পোনেন্টের জন্য AA এবং AAA পাস বা ফেল ফলাফল ফেরত দেয়। উদাহরণস্বরূপ, #FFFFFF-এ #595959 7.0:1 স্কোর করে এবং AAA পাস করে। এই টুল সম্পূর্ণভাবে আপনার ব্রাউজারে চলে — কোনো রঙ সার্ভারে পাঠানো হয় না, এবং কোনো অ্যাকাউন্ট প্রয়োজন হয় না।
WCAG কালার কনট্রাস্ট রেশিও কী?
WCAG টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে ন্যূনতম কনট্রাস্ট রেশিও সংজ্ঞায়িত করে: AA লেভেলে সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1, AAA লেভেলে 7:1 এবং 4.5:1-এ বেড়ে যায়। রেশিওটি দুটি রঙের আপেক্ষিক লুমিন্যান্স তুলনা করে এবং 1:1 (কোনো কনট্রাস্ট নেই) থেকে 21:1 পর্যন্ত রেঞ্জ করে। সাদার (#FFFFFF) ওপর খাঁটি কালো টেক্সট (#000000) 21:1-এ সর্বোচ্চ। এই থ্রেশহোল্ডগুলো WCAG 2.0, 2.1 এবং 2.2 জুড়ে প্রযোজ্য — সংখ্যাগুলো কোনো ভার্সন জুড়ে পাল্টায়নি।
4.5:1 কনট্রাস্ট নিয়ম কী?
4.5:1 হলো স্বাভাবিক-আকারের বডি টেক্সটের জন্য WCAG 2 লেভেল AA ন্যূনতম কনট্রাস্ট রেশিও (Success Criterion 1.4.3, Contrast Minimum)। হালকা এবং গাঢ় রঙের আপেক্ষিক লুমিন্যান্সে অন্তত 4.5 গুণ পার্থক্য থাকতে হবে। উদাহরণস্বরূপ, সাদার ওপর #767676 ধূসর 4.54:1 — বডি টেক্সটের জন্য এখনও পাস করা সবচেয়ে হালকা ধূসরের কাছাকাছি। বড় টেক্সটের শুধু 3:1 প্রয়োজন। বেশিরভাগ ওয়েব অ্যাক্সেসিবিলিটি সংক্রান্ত ADA মামলা প্রত্যাশিত স্ট্যান্ডার্ড হিসেবে WCAG 2.1 AA উদ্ধৃত করে।
WCAG AA এবং AAA-এর মধ্যে পার্থক্য কী?
AA হলো ব্যাপকভাবে প্রয়োজনীয় বেসলাইন — সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1। AAA হলো বর্ধিত লেভেল — সাধারণ টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1। বেশিরভাগ অ্যাক্সেসিবিলিটি আইন (ADA, Section 508, এবং ইউরোপের EN 301 549) AA টার্গেট করে। AAA অর্জনযোগ্য হলে সুপারিশ করা হয়, কিন্তু WCAG স্পেসিফিকেশন নিজেই উল্লেখ করে যে এটি সম্পূর্ণ পেজের জন্য একটি ব্ল্যাঙ্কেট প্রয়োজনীয়তা হিসেবে বাস্তবসম্মত নয়।
বড় টেক্সটের জন্য আমার কোন কনট্রাস্ট রেশিও প্রয়োজন?
বড় টেক্সটের AA লেভেলে 3:1, বা AAA-তে 4.5:1 প্রয়োজন — সাধারণ টেক্সটের চেয়ে কম বার কারণ বড় গ্লিফ কম কনট্রাস্টে পড়া সহজ। WCAG বড় টেক্সটকে সংজ্ঞায়িত করে অন্তত ১৮pt (২৪px) স্বাভাবিক ওজন, বা ১৪pt (প্রায় ১৮.৬৬px) বোল্ড হিসেবে। উদাহরণস্বরূপ, সাদার ওপর #949494-এ একটি ২৪px হেডিং 3:1 পৌঁছায় এবং AA large পাস করে, কিন্তু একই রঙ বডি টেক্সটের জন্য 4.5:1 নিয়ম ফেল করবে।
কনট্রাস্ট রেশিও কীভাবে গণনা করা হয়?
কনট্রাস্ট রেশিও ফর্মুলা (L1 + 0.05) / (L2 + 0.05) ব্যবহার করে, যেখানে L1 হালকা রঙের আপেক্ষিক লুমিন্যান্স এবং L2 গাঢ় রঙের। আপেক্ষিক লুমিন্যান্স হলো লাল, সবুজ এবং নীল চ্যানেলের একটি গামা-কারেক্টেড, ওয়েটেড মিশ্রণ (প্রতিটি চ্যানেল লিনিয়ারাইজ করার পর 0.2126·R + 0.7152·G + 0.0722·B)। ফলাফল ১ থেকে ২১ পর্যন্ত চলে, যে কারণে কনট্রাস্ট 4.5:1-এর মতো একটি রেশিও হিসেবে প্রকাশ করা হয়। WebAIM-এর কনট্রাস্ট চেকার এবং এই টুল একই W3C ফর্মুলা ব্যবহার করে।
অ্যাক্সেসিবিলিটির জন্য একটি ভালো কনট্রাস্ট রেশিও কী?
বডি টেক্সটের জন্য অন্তত 4.5:1 (AA ফ্লোর) টার্গেট করুন। আরামদায়ক দীর্ঘ-ফর্ম রিডিং এবং কম-দৃষ্টিসম্পন্ন ব্যবহারকারীদের জন্য, ডিজাইন যদি অনুমতি দেয় তাহলে AAA (7:1) লক্ষ্য করুন। সাদার ওপর গাঢ় ধূসর #333333 হলো 12.6:1 — AAA-এর উপরে এবং প্রায় সব ব্যবহারকারীর জন্য আরামদায়ক। বড় হেডিংয়ের জন্য অন্তত 3:1 এবং UI কম্পোনেন্ট বর্ডারের জন্য 3:1 লক্ষ্য করুন। অ্যাক্সেসিবিলিটি ব্রাউজার এক্সটেনশন Axe সাধারণ টেক্সটের জন্য 4.5:1-এর নিচে এবং বড় টেক্সটের জন্য 3:1-এর নিচে যেকোনো কিছুকে একটি লঙ্ঘন হিসেবে ফ্ল্যাগ করে।
WCAG 2.1 নাকি 2.2 প্রয়োজন?
কনট্রাস্ট থ্রেশহোল্ড WCAG 2.0, 2.1 এবং 2.2 জুড়ে অভিন্ন (4.5:1, 3:1, এবং 7:1)। WCAG 2.1 নন-টেক্সট কনট্রাস্ট যোগ করেছে (SC 1.4.11, UI কম্পোনেন্ট এবং গ্রাফিক্সের জন্য 3:1 প্রয়োজন করে)। WCAG 2.2 বর্তমান W3C Recommendation এবং বেশিরভাগ নতুন নিয়ম যে ভার্সন রেফার করে, তাই 2.2 level AA টার্গেট করুন। বিদ্যমান 2.0 বা 2.1 AA কাজ টেক্সট কনট্রাস্টের জন্য এখনও কমপ্লায়েন্ট কারণ মূল কনট্রাস্ট প্রয়োজনীয়তা পাল্টায়নি।
আইকন এবং UI কম্পোনেন্টের কি কনট্রাস্ট প্রয়োজন?
হ্যাঁ। WCAG 2.1 SC 1.4.11 (Non-text Contrast)-এ UI কম্পোনেন্টের ভিজ্যুয়াল সীমানার জন্য সংলগ্ন রঙের বিপরীতে অন্তত 3:1 প্রয়োজন — ইনপুট বর্ডার, বাটন প্রান্ত, ফোকাস রিং, টগল স্টেট — এবং অর্থপূর্ণ আইকন ও গ্রাফিক্সের জন্য। উদাহরণস্বরূপ, সাদার ওপর একটি #D1D1D1 ইনপুট বর্ডার মাত্র 1.4:1 এবং ফেল করে, যেখানে #767676 (4.5:1) স্বচ্ছন্দে পাস করে। এই টুলের পাস-ফেল ম্যাট্রিক্সে 3:1 থ্রেশহোল্ডে একটি নিবেদিত UI ও গ্রাফিক্স সারি অন্তর্ভুক্ত।
APCA / WCAG 3 কনট্রাস্ট কী?
APCA (Accessible Perceptual Contrast Algorithm) হলো আসন্ন WCAG 3-এর জন্য প্রস্তাবিত কনট্রাস্ট পদ্ধতি। একটি একক রেশিওর বদলে এটি প্রায় -১০৮ থেকে ১০৬ পর্যন্ত একটি পারসেপচুয়াল লাইটনেস কনট্রাস্ট (Lc) মান ফেরত দেয়; মাত্রা যত বড়, কনট্রাস্ট তত বেশি। মোটামুটি গাইডেন্স: বডি টেক্সটের জন্য Lc 90 পছন্দের, বডি টেক্সটের জন্য Lc 75 ন্যূনতম, বড় টেক্সটের জন্য Lc 60 উপযুক্ত, এবং বড় হেডিংয়ের জন্য Lc 45 মানানসই।
একটি ফেল হওয়া কনট্রাস্ট রেশিও আমি কীভাবে ঠিক করব?
সবচেয়ে দ্রুত ফিক্স হলো থ্রেশহোল্ড ছাড়িয়ে না যাওয়া পর্যন্ত টেক্সট রঙ গাঢ় করা বা ব্যাকগ্রাউন্ড হালকা করা, শুধু লাইটনেস পাল্টিয়ে আপনার ব্র্যান্ড হিউ রেখে। উদাহরণস্বরূপ, #8ED1FC সাদার ওপর 1.6:1-এ ফেল করে; এর লাইটনেস #0A6CB5-এ নামিয়ে দিলে একই নীল পরিবারে থেকে 4.5:1 পৌঁছায়। এই টুলের বিল্ট-ইন ‘Make it pass’ সাজেস্টার স্বয়ংক্রিয়ভাবে এটি করে — এটি টেক্সট বা ব্যাকগ্রাউন্ডকে নিকটতম পাসিং রঙে নাড়ায় এবং এক ক্লিকে প্রয়োগ করে।
এটি WebAIM, Adobe Color এবং Chrome DevTools-এর সাথে কীভাবে তুলনীয়?
webaim.org-এ WebAIM-এর কনট্রাস্ট চেকার সবচেয়ে বেশি উদ্ধৃত অ্যাক্সেসিবিলিটি টুল এবং এখানকার মতো একই WCAG 2 ফর্মুলা ব্যবহার করে। এটি APCA দেখায় না, কোনো লাইভ টেক্সট প্রিভিউ নেই, এবং ফেল হওয়া জোড়া অটো-ফিক্স করতে পারে না বা কোনো জোড়া-ভিত্তিক প্যালেট গ্রিড নেই। Adobe Color-এর Accessibility Tools সেকশন একটি ফ্রি Adobe অ্যাকাউন্ট প্রয়োজন করে এবং একটি পাসিং কালার স্বয়ংক্রিয়ভাবে সাজেস্ট করতে পারে না। Chrome DevTools-এ একটি কনট্রাস্ট ব্যাজ আছে কিন্তু শুধু DevTools-এর ভেতরে, শেয়ার করার মতো নয়। এই চেকার কোনো লগইন প্রয়োজন করে না, উভয় স্কোর দেখায়, এবং একটি লাইভ প্রিভিউ রেন্ডার করে।
Related tools
সব টুল দেখুন
নতুন CSS Box-Shadow জেনারেটর
প্রিসেট ও লাইভ প্রিভিউ সহ মাল্টি-লেয়ার CSS box-shadow তৈরি করুন। CSS, value বা React স্টাইল তাৎক্ষণিক কপি করুন।
নতুন কালার প্যালেট জেনারেটর
complementary, analogous, triadic ও monochromatic প্যালেট তৈরি করুন।
নতুন Cubic Bezier জেনারেটর
কন্ট্রোল পয়েন্ট টেনে লাইভ প্রিভিউ সহ একটি CSS easing কার্ভ ডিজাইন করুন।
নতুন Border Radius জেনারেটর
দৃশ্যত CSS গোলাকার কোণ ও জৈব blob আকৃতি তৈরি করুন।
নতুন CSS Flexbox প্লেগ্রাউন্ড
লাইভ প্রিভিউ সহ flex প্রপার্টি সমন্বয় করুন এবং CSS কপি করুন।
নতুন CSS Grid প্লেগ্রাউন্ড
লাইভ প্রিভিউ ও CSS সহ গ্রিড কলাম, gap ও অ্যালাইনমেন্ট সমন্বয় করুন।