1:1 to 21:1 · AA · AAA
কনট্রাস্ট চেকার
সাদার উপর কালোর WCAG কনট্রাস্ট অনুপাত 21:1, যা সম্ভাব্য সর্বোচ্চ, আর #0060fd-এর উপর সাদার অনুপাত 5.13:1। নিজের জোড়া যাচাই করতে লেখার রং আর ব্যাকগ্রাউন্ড লিখুন।
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
আপনি লিখতে লিখতেই অনুপাত আর পাঁচটি যাচাই হালনাগাদ হয়। অনুপাত দুই দশমিকে কেটে ফেলা হয়, কখনো উপরে গোল করা হয় না, তাই 4.499 দেখায় 4.49:1 আর 4.5:1 যাচাইয়ে ব্যর্থ হয়।
Scanned by 
NortonTM Safe Web
এক নজরে
- মূল্য
- কোনো চার্জ নেই
- অ্যাকাউন্ট
- লাগে না
- আপলোড
- প্রযোজ্য নয় — আপনি রং লেখেন, কিছুই কোথাও পাঠানো হয় না
- সূত্র
- (হালকা উজ্জ্বলতা + 0.05) ÷ (গাঢ় উজ্জ্বলতা + 0.05)
- সীমা
- AA: সাধারণ 4.5:1, বড় লেখা 3:1; AAA: সাধারণ 7:1, বড় লেখা 4.5:1; ইন্টারফেসের অংশ 3:1
- মানদণ্ড
- আপেক্ষিক উজ্জ্বলতা ও কনট্রাস্ট অনুপাতের WCAG 2.2 সংজ্ঞা
পরিচিত জোড়ার কনট্রাস্ট অনুপাত
এই সারিগুলো চেকারের একই কোড দিয়ে তৈরি। টিক চিহ্ন মানে জোড়াটি শর্ত পূরণ করে; ক্রস মানে করে না।
| লেখার রং | ব্যাকগ্রাউন্ড | অনুপাত | AA সাধারণ | AA বড় | AAA সাধারণ | AAA বড় | ইন্টারফেসের অংশ |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| যাচাই | ন্যূনতম অনুপাত |
|---|---|
| AA, সাধারণ লেখা | 4.5:1 |
| AA, বড় লেখা | 3:1 |
| AAA, সাধারণ লেখা | 7:1 |
| AAA, বড় লেখা | 4.5:1 |
| AA, ইন্টারফেসের অংশ ও গ্রাফিক | 3:1 |
রঙের জোড়া কীভাবে যাচাই করবেন
দুটি রং লিখুন
লেখার রং আর ব্যাকগ্রাউন্ডের রং যেকোনো CSS নোটেশনে লিখুন, অথবা পিকার ব্যবহার করুন। অদলবদল বোতাম দুটিকে বদলে দেয়, যা গাঢ় ব্যাকগ্রাউন্ডে হালকা লেখার জন্য কাজের।
অনুপাত পড়ুন
অনুপাত 1:1 (একই রং) থেকে 21:1 (সাদার উপর কালো) পর্যন্ত। ঘরগুলোর নিচের নমুনা জোড়াটিকে 16 px আর 24 px-এ দেখায়, যাতে নিজের চোখেই ফলাফল বিচার করতে পারেন।
পাঁচটি যাচাই দেখুন
প্রতিটি টাইল একটি WCAG শর্তের জন্য পাস বা ফেল বলে: সাধারণ লেখার AA ও AAA, বড় লেখার AA ও AAA, আর ইন্টারফেসের অংশের AA। সাধারণ লেখা AA-তে ফেল করলে পেজ সবচেয়ে কাছের যে লেখার রং পাস করে তা প্রস্তাব করে।
কনট্রাস্ট অনুপাত কীভাবে হিসাব হয়
WCAG কনট্রাস্ট মাপে আপেক্ষিক উজ্জ্বলতা (relative luminance) দিয়ে, অর্থাৎ 0 (কালো) থেকে 1 (সাদা) পর্যন্ত রঙের উজ্জ্বলতা। লাল, সবুজ ও নীল প্রতিটি চ্যানেলকে 255 দিয়ে ভাগ করা হয়; 0.04045 পর্যন্ত মানকে 12.92 দিয়ে ভাগ করা হয়, আর তার চেয়ে বড় মানকে ঘাতে তোলা হয়: (মান + 0.055) ভাগ 1.055, তারপর 2.4 ঘাত। উজ্জ্বলতা তখন 0.2126 গুণ লাল যোগ 0.7152 গুণ সবুজ যোগ 0.0722 গুণ নীল, যা প্রতিটি রঙে চোখ কতটা সাড়া দেয় তা প্রতিফলিত করে। কনট্রাস্ট অনুপাত হলো হালকা উজ্জ্বলতা যোগ 0.05 ভাগ গাঢ় উজ্জ্বলতা যোগ 0.05।
WCAG 2 AA স্তরে সাধারণ লেখার জন্য অন্তত 4.5:1 আর বড় লেখার জন্য 3:1 চায়, এবং AAA স্তরে 7:1 ও 4.5:1। বড় লেখা মানে অন্তত 18 পয়েন্ট, যা 24 CSS পিক্সেল, বা বোল্ডে অন্তত 14 পয়েন্ট, প্রায় 18.66 পিক্সেল। সাফল্যের মানদণ্ড 1.4.11 ইন্টারফেসের অংশ আর পাঠকের দেখার প্রয়োজন এমন গ্রাফিক্সের জন্য, যেমন ঘরের বর্ডার বা চার্টের রেখা, 3:1 চায়। অনুপাতকে প্রতিটি সীমার সঙ্গে গোল না করেই তুলনা করা হয়। কোনো রঙে স্বচ্ছতা থাকলে মাপার আগে স্বচ্ছ ব্যাকগ্রাউন্ডকে সাদার উপর আর স্বচ্ছ লেখার রংকে ব্যাকগ্রাউন্ডের উপর বসানো হয়। এই পেজ শুধু WCAG 2.x বাস্তবায়ন করে; গাইডলাইনের পরবর্তী সংস্করণের জন্য আলোচিত APCA হিসাব করে না।
কনট্রাস্ট নিয়ে প্রশ্ন
লেখার জন্য WCAG কোন কনট্রাস্ট অনুপাত চায়?
AA স্তরে সাধারণ লেখার জন্য অন্তত 4.5:1 আর বড় লেখার জন্য অন্তত 3:1। AAA স্তরে সাধারণ লেখার জন্য 7:1 আর বড় লেখার জন্য 4.5:1। অনুপাত মাপা হয় লেখার রং আর ঠিক পেছনের রঙের মধ্যে।
কোনটি বড় লেখা ধরা হয়?
WCAG বড় লেখা বলতে অন্তত 18 পয়েন্ট বোঝায়, যা 24 CSS পিক্সেল, বা বোল্ডে অন্তত 14 পয়েন্ট, যা প্রায় 18.66 CSS পিক্সেল। এর চেয়ে ছোট সবকিছু সাধারণ লেখা, আর তার জন্য বেশি অনুপাত লাগে।
সাদার উপর AA পাস করে এমন সবচেয়ে হালকা ধূসর কোনটি?
সাদার উপর #767676-এর অনুপাত 4.54:1 আর এটি সাধারণ লেখার 4.5:1 যাচাই পাস করে। পরের হালকা ধূসর #777777 পায় 4.47:1 আর ফেল করে। 7:1 (AAA)-এর জন্য সবচেয়ে হালকা ধূসর #595959, যার অনুপাত 7.00:1।
4.49 দেখতে 4.5-এর মতো হলেও ফেল করে কেন?
যাচাইগুলো সঠিক অনুপাতকে সীমার সঙ্গে তুলনা করে। 4.499 অনুপাত 4.5-এর নিচে, তাই ফেল করে, আর পেজ তা উপরে গোল না করে 4.49:1 ছাপে। সাদার উপর খাঁটি লাল একটি বাস্তব উদাহরণ: 3.99:1 কাছাকাছি হলেও সাধারণ লেখার 4.5:1 যাচাইয়ে ফেল করে।
আইকন, বর্ডার আর ফর্মের ঘরের জন্য কত কনট্রাস্ট লাগে?
WCAG 2.1-এ যোগ হওয়া সাফল্যের মানদণ্ড 1.4.11 নন-টেক্সট কনট্রাস্ট পাঠকের দেখার প্রয়োজন এমন ইন্টারফেসের অংশ বা গ্রাফিকের, যেমন ঘরের বর্ডার, ফোকাস রিং বা চার্টের রেখা, আর পাশের রঙের মধ্যে অন্তত 3:1 চায়। নিষ্ক্রিয় কন্ট্রোল আর নিছক সাজসজ্জার গ্রাফিক এর বাইরে।
অনুপাত পাস করলেই কি পেজ অ্যাক্সেসযোগ্য হয়?
না। কনট্রাস্ট অনেক শর্তের একটি মাত্র। ফন্টের আকার ও ওজন, লাইনের ফাঁক, শুধু রং দিয়ে অর্থ বোঝানো, ফোকাস দেখা যাওয়া, ছবি ও গ্রেডিয়েন্টের উপর লেখা, আর বিভিন্ন রঙদৃষ্টির মানুষ পেজ কেমন দেখে, এসবও গুরুত্বপূর্ণ। এই ফলাফল একটি তথ্য হিসেবে নিন, আর আসল কনটেন্ট দিয়ে পেজ পরীক্ষা করুন।