Post🎯 تیتر و دکمه‌ای که واقعا دیده می‌شود

🎯 تیتر و دکمه‌ای که واقعا دیده می‌شود خیلی وقت‌ها طراحی‌مون قشنگه، اما متن روی دکمه یا تیتر اصلی «خوانا» نیست. مشکل اغلب از کنتراست رنگی ضعیف بین متن و پس‌زمینه است؛ مخصوصا در UI روشن و مینیمال. ترفند سریع: همیشه کنتراست رنگ متن و پس‌زمینه را با یک ابزار معتبر (مثل ابزار WCAG) چک کن؛ حداقل نسبت 4.5:1 برای متن معمولی و 3:1 برای تیترها و دکمه‌های درشت. 🧩 مثال کاربردی در طراحی UI فرض کن دکمه‌ات اینه: • پس‌زمینه: #F5C2C2 (صورتی روشن) • متن: #FFFFFF (سفید) این ترکیب روی مانیتور خوب شاید اوکی به‌نظر برسد، اما طبق WCAG کنتراستش خیلی پایینه و روی موبایل زیر نور آفتاب تقریبا ناپدید می‌شود. با یک تغییر کوچک: • پس‌زمینه: #E53935 (قرمز تیره‌تر) • متن: #FFFFFF (سفید) کنتراست به محدوده قابل قبول می‌رسد، دکمه هم همچنان «برند» می‌ماند، هم واقعا قابل کلیکه. 🛠 نمونه چک‌کردن کنتراست در کد این فقط یک نمونه برای فهم پشت‌صحنه محاسبه کنتراسته: function relativeLuminance(rgb) { const srgb = rgb.map(v => { v = v / 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2]; } function contrastRatio(rgb1, rgb2) { const L1 = relativeLuminance(rgb1); const L2 = relativeLuminance(rgb2); const light = Math.max(L1, L2); const dark = Math.min(L1, L2); return (light + 0.05) / (dark + 0.05); } 🍀 چند نکته عملی • اول «خوانایی» بعد «برند رنگی»؛ اگر رنگ برند کنتراست خوب نمی‌دهد، برای متن از رنگ خنثی (مثل تقریبا مشکی) استفاده کن. • روی چند حالت مختلف تست کن: حالت Light/Dark، نمایشگرهای مختلف، و مخصوصا موبایل در نور زیاد. • برای متن روی عکس، حتما از لایه تیره/روشن (Overlay) یا پس‌زمینه نیمه‌شفاف استفاده کن تا متن گم نشود. 📚 رفرنس معتبر برای جزییات کامل معیارهای کنتراست از راهنمای رسمی WCAG استفاده کن: Guideline – Contrast (Minimum) امتحان این ترفند روی تیتر و دکمه‌های مهم در طراحی فعلی، معمولا در چند دقیقه تأثیر محسوسی روی وضوح و حس حرفه‌ای بودن UI می‌گذارد. 🔖 #Design #طراحی #UI #UX #Contrast #WCAG #Color #Accessibility #UI #UX 👤 Developix 💎 Channel: @DevelopixDesign