ভিজ্যুয়াল ডিজাইন প্রিন্সিপল — লেআউট, টাইপোগ্রাফি, রঙ

১ · লেআউট ও গ্রিড সিস্টেম

ভালো ভিজ্যুয়াল ডিজাইন এলোমেলো নয় — এর পেছনে একটি অদৃশ্য গ্রিড থাকে যা প্রতিটি উপাদানকে সারিবদ্ধ (align) রাখে। মানুষের চোখ স্বয়ংক্রিয়ভাবে সারিবদ্ধ ও সামঞ্জস্যপূর্ণভাবে স্পেসড উপাদানগুলোকে একসাথে সম্পর্কিত হিসেবে পড়ে — এটি M2/L08-এ কভার করা গেস্টাল্ট প্রক্সিমিটি (proximity) ও অ্যালাইনমেন্ট নীতিরই ব্যবহারিক প্রয়োগ। একটি সাধারণ ১২-কলাম গ্রিড, সামঞ্জস্যপূর্ণ মার্জিন/গাটার, এবং ইচ্ছাকৃত হোয়াইটস্পেস (whitespace) — এই তিনটি একসাথে একটি পৃষ্ঠার ভিজ্যুয়াল হায়ারার্কি ও পড়ার ক্রম নির্ধারণ করে।

২ · টাইপোগ্রাফি — হায়ারার্কি ও রিডেবিলিটি

টাইপোগ্রাফি মানে শুধু "সুন্দর ফন্ট বাছাই" নয় — এটি টেক্সটের মধ্যে হায়ারার্কি তৈরি করার একটি টুল। ফন্ট সাইজ, ওজন (bold/regular) ও রঙের কনট্রাস্ট দিয়ে কোন টেক্সট শিরোনাম, কোনটি সাব-শিরোনাম, আর কোনটি বডি টেক্সট তা স্পষ্ট হয়ে ওঠে — ব্যবহারকারীকে প্রতিটি শব্দ পড়ে বুঝতে হয় না, তারা শুধু স্ক্যান করেই কাঠামো ধরতে পারে। রিডেবিলিটির জন্য দুটি ব্যবহারিক নিয়ম বিশেষভাবে গুরুত্বপূর্ণ —

৩ · রঙ তত্ত্ব ও কনট্রাস্ট — একটি সত্যিকারের গণনা

UI-তে রঙের তিনটি ব্যবহারিক ভূমিকা আছে — ব্র্যান্ড/পরিচয় প্রকাশ করা, স্ট্যাটাস যোগাযোগ করা (লাল = বিপদ/এরর, সবুজ = সফল — যদিও শুধু রঙের উপর নির্ভর করা উচিত নয়, কারণ রঙ-অন্ধ ব্যবহারকারীরা পার্থক্য নাও ধরতে পারেন), আর দৃষ্টি আকর্ষণ করা (একটি উজ্জ্বল CTA বাটন)। কিন্তু রঙ বাছাই করার সময় নান্দনিকতার পাশাপাশি একটি পরিমাপযোগ্য বাধ্যবাধকতাও থাকে — WCAG কনট্রাস্ট রেশিও, যা M10/L43-এ অ্যাক্সেসিবিলিটির প্রেক্ষাপটে বিস্তারিত আলোচনা হবে। এখানে সংক্ষেপে সূত্রটি দেখানো হলো —

$$L = 0.2126 R + 0.7152 G + 0.0722 B \qquad \text{Contrast} = \frac{L_{lighter} + 0.05}{L_{darker} + 0.05}$$

যেখানে প্রতিটি চ্যানেল (R, G, B) প্রথমে ০-১ স্কেলে লিনিয়ারাইজ করা হয় (গ্যামা-কারেকশন বাদ দিয়ে), তারপর ওজন দিয়ে যোগ করে রিলেটিভ লুমিন্যান্স (L) বের করা হয়। সাধারণ টেক্সটের জন্য WCAG AA স্ট্যান্ডার্ড ন্যূনতম ৪.৫:১ কনট্রাস্ট রেশিও দাবি করে। নিচের কোড সেলে এই সূত্রটি সরাসরি বাস্তবায়ন করে তিনটি বাস্তব UI রঙের জোড়ার উপর প্রয়োগ করা হয়েছে।

# WCAG-এর প্রকৃত রিলেটিভ-লুমিন্যান্স কনট্রাস্ট-রেশিও ফর্মুলা -- ভিজ্যুয়াল ডিজাইনের রঙ পছন্দ যাচাই

def relative_luminance(rgb):
    def channel(c):
        c = c / 255
        if c <= 0.03928:
            return c / 12.92
        else:
            return ((c + 0.055) / 1.055) ** 2.4
    r, g, b = rgb
    R, G, B = channel(r), channel(g), channel(b)
    return 0.2126 * R + 0.7152 * G + 0.0722 * B

def contrast_ratio(fg, bg):
    l1 = relative_luminance(fg)
    l2 = relative_luminance(bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

MIN_CONTRAST_AA = 4.5

pairs = [
    ("সাদা টেক্সট / ব্র্যান্ড নীল বাটন", (255, 255, 255), (37, 99, 235)),
    ("গাঢ় নেভি টেক্সট / হালকা ধূসর ব্যাকগ্রাউন্ড", (15, 23, 42), (241, 245, 249)),
    ("হালকা ধূসর 'সূক্ষ্ম' টেক্সট / সাদা ব্যাকগ্রাউন্ড", (203, 213, 225), (255, 255, 255)),
]

for label, fg, bg in pairs:
    ratio = contrast_ratio(fg, bg)
    passed = ratio >= MIN_CONTRAST_AA
    status = "পাস" if passed else "ফেইল"
    print(f"{label:42s} | কনট্রাস্ট={ratio:.2f}:1 | AA {status}")