লার্ন কম্পিউটার একাডেমি
English

কালার ও কনট্রাস্ট স্টুডিও

একটি রং থেকে প্যালেট তৈরি করুন, তার বিরুদ্ধে আসল WCAG কনট্রাস্ট ম্যাথ যাচাই করুন, আর দেখুন colour blindness-এ এটি কেমন টেকে — শুধু pass/fail ব্যাজ নয়, কেন তা-ও।

CSS রং পাঠটি পড়ুন

মূল রং

প্যালেট স্কিম

প্রতিটি সোয়াচ মূল রঙের saturation আর lightness একই রাখে — শুধু hue রং-চাকার চারপাশে ঘোরে।

হেক্স কোড কপি করতে একটি সোয়াচে ক্লিক করুন।

Tints ও shades

একই hue আর saturation, lightness প্রায়-সাদা থেকে প্রায়-কালো পর্যন্ত ধাপে ধাপে বদলায়।

কনট্রাস্ট চেকার

লেখার রং
ব্যাকগ্রাউন্ড রং

দ্রুত বাদামি শিয়াল অলস কুকুরের উপর দিয়ে লাফ দেয়।

দ্রুত বাদামি শিয়াল অলস কুকুরের উপর দিয়ে লাফ দেয়।

কনট্রাস্ট রেশিও17.74:1
সাধারণ লেখাAAA
বড় লেখা (18pt+/24px, বা 14pt+ বোল্ড)AAA
UI কম্পোনেন্ট ও গ্রাফিক্সAA

কালার-ব্লাইন্ডনেস সিমুলেশন

একটি রেশিও WCAG পাস করেও আসল সমস্যা থেকে যেতে পারে — শুধু hue দিয়ে আলাদা করা দুটো রং এখানে একরকম হয়ে যেতে পারে, ভালো সংখ্যাগত কনট্রাস্ট থাকলেও।

দ্রুত বাদামি শিয়াল অলস কুকুরের উপর দিয়ে লাফ দেয়।

একটি আনুমানিক হিসাব (sRGB-এ সরাসরি প্রয়োগ করা একটি সাধারণ ওয়েব-সিমুলেটর ম্যাট্রিক্স) — আসল সমস্যা দেখানোর জন্য যথেষ্ট, কোনো ক্লিনিক্যাল ডায়াগনস্টিক টুল নয়।

এগুলো চেষ্টা করুন

এক্সপোর্ট

:root {
  --color-base: #3366ff;
  --color-scheme-1: #3366ff;
  --color-scheme-2: #ffcc33;
  --color-text: #111827;
  --color-background: #ffffff;
}

Relative luminance: #111827 (লেখা) বনাম #ffffff (ব্যাকগ্রাউন্ড) — রেশিও হলো (উজ্জ্বলতর + 0.05) / (গাঢ়তর + 0.05)।