کنتراست (Contrast) و افزایش خوانایی متن — به زبان ساده

کنتراست مناسب متن و زمینه یک گرافیک چه تأثیری بر خوانایی و به طور کلی تأثیرگذاری آن گرافیک دارد؟ شاید برای شما به عنوان یک طراح گرافیک و یا حتی کاربر علاقه‌مند به طراحی وب سؤال پیش‌آمده باشد که ترکیب رنگ پس‌زمینه (Background) و پیش‌زمینه (Foreground) یک طراحی گرافیکی، برای مثال یک بنر در وب‌سایت، به چه شکل باید باشد؟ آیا استانداردی کلی برای انتخاب رنگ یا تطبیق رنگ‌های پیش‌زمینه و پس‌زمینه وجود دارند؟

خوانایی: مهم‌ترین اصل طراحی بنر

اغلب طراحان از متون تیره بر روی زمینه‌های روشن استفاده می‌کنند و برخی دیگر برعکس؛ در واقع، از متون روشن روی زمینه‌های تیره استفاده می‌کنند. ممکن است حالت دوم عامه‌پسندتر به نظر بیاید ولی نکته‌ای که اهمیت بیشتری دارد این است که آیا بنر خوانا محسوب می‌شود؟ این سوالی است که هر طراحی باید در زمان طراحی اتودهای اولیه، از خود بپرسد. تحقیقات زیادی در خصوص تفاوت این دو حالت انجام یافته است. برای مثال در یک مطالعه مربوط به سال 1980 در لندن مشخص شد که: «حروف تیره بر روی پس‌زمینه روشن نسبت به حروف روشن بر روی پس‌زمینه تیره ارجحیت دارند... مشارکت‌کنندگان در این نظرسنجی هنگامی‌که حروف تیره را بر روی پس‌زمینه روشن می‌خواندند 26 درصد دقت بیشتری نشان دادند.»

فیلم آموزش طراحی بنر مناسبتی در فتوشاپ در فرادرس

کلیک کنید

مطالعه دیگری در دانشگاه ایالتی آستین در ایالات‌متحده مشخص کرده است که: «با هر ترکیب رنگی که امتحان شده است، متون تیره بر روی پس‌زمینه‌های روشن نسبت به حالت عکس آن، خواناتر رتبه‌بندی شده‌اند». پس به‌طورکلی مشخص شد که به‌منظور رعایت استانداردهای خوانایی، بهتر است از حروف تیره بر روی پس‌زمینه‌های روشن استفاده شود. اما سؤال بعدی این است که چه میزان تیرگی در برابر چه مقدار روشنی؟

کنتراست به زبان ساده

پاسخ این سؤال در مفهومی به نام کنتراست نهفته است. کنتراست در لغت به معنی تضاد است و در تعریف گرافیکی، به زبان خیلی ساده به معنی میزان تضاد بین رنگ‌های روشن یا تیره است. هر چه اختلاف بین بخش‌های روشن و تیره تصویر بیشتر باشد تصویر اصطلاحاً کنتراست بالاتری دارد. کنتراست، مهم‌ترین کلید بهبود خوانایی نوشته محسوب می‌شود و موجب می‌شود که چشم بیننده درون طرح گرافیکی بچرخد و مانند تیری که به هدف اصابت می‌کند روی متنی که طراح در نظر دارد متوقف شود.

کنتراست رنگ

رنگ‌ها نیز درجه روشنی و تیرگی خاص خود را دارند و بدین ترتیب مفهومی به نام کنتراست رنگ مطرح می‌شود. کنتراست رنگ موجب می‌شود که حروف نوشته از زمینه جدا شوند و به چشم بیایند. روش‌های زیادی برای ایجاد کنتراست رنگ وجود دارند.

برای رعایت اصل کنتراست در یک طراحی گرافیکی نکات زیادی وجود دارند که باید در نظر گرفته شوند. به‌خصوص زمانی که قرار است حروف نوشته بر روی یک تصویر یا ویدیو قرار بگیرند، با توجه به این که ممکن است در مکان‌های مختلف تصویر یا فریم‌های در حال حرکت ویدیو جای بگیرند، این ملاحظات اهمیت بسیار بیشتری پیدا می‌کنند.

راهکارهای کنتراست

یکی از روش‌هایی که می‌توان با بهره‌گیری از آن بر این مشکل غلبه کرد، ایجاد overlay در زیر نوشته است؛ بدین شکل که مرزی بین نوشته و تصویر زیرین ایجاد می‌شود و بنابراین خوانایی آن به میزان زیادی تضمین می‌شود. روش دیگر این است که نوشته را از روی تصویر اندکی جدا کرد و در کنار آن قرار داد و بدین ترتیب، نیازی نیست هیچ یک از اجزای طراحی قربانی شوند.

فیلم آموزش اصلاح حرفه ای رنگ و کنتراست تصاویر در فتوشاپ با ابزار اکسپوژر در فرادرس

کلیک کنید

تحلیل کنتراست

اما چگونه می‌توانیم مطمئن باشیم که کنتراست کافی را در طراحی گرافیکی خود رعایت کرده‌ایم؟ برای تحلیل کنتراست رنگ، نخست باید با مفهوم مدل‌های رنگ آشنایی داشته باشیم. مدل های رنگی مختلفی وجود دارند که شامل مدل RGB، CMYK، HSB/HSV/HSL، Lab و غیره می شود. در ادامه، به بررسی مدل رنگی RGB پرداخته شده است.

مدل رنگی RGB

مدل رنگی RGB (برگرفته از حروف اول رنگ‌های قرمز، سبز و آبی)، یکی از ابتدایی‌ترین و پراستفاده‌ترین مدل‌های رنگی هست. زیرا، هنگامی که بشر برای بار نخست با استفاده از منشور موفق به تجزیه نور سفید شد، آگاهی یافت که این سه رنگ اصلی در خروجی منشور متمایز هستند.

در این مدل رنگ با استفاده از ترکیب کردن سه رنگ اصلی قرمز، سبز و آبی می‌توان همه رنگ‌های دیگر را ایجاد کرد.

در پیاده‌سازی رایانه‌ای مدل رنگی RGB، به هر یک از سه رنگ اصلی مقداری بین 0 تا 255 داده می‌شود و بدین ترتیب با کم‌ یا زیاد کردن هر یک از مقادیر، نوع رنگ و میزان روشنایی رنگ حاصل تفاوت می‌کند. دلیل انتخاب عدد 255 به محاسبات رایانه‌ای و استفاده از 8 حالت دودویی (عمق رنگ 8 بیتی) یعنی 256=8^2 بازمی‌گردد.

برای تصور بهتر این مدل رنگی، فرض کنید سه سطل از هر رنگ داریم که می‌خواهیم با مخلوط کردن آن‌ها با هم رنگ جدید ایجاد کنیم. وقتی هر سه مقدار برابر با صفر باشند، یعنی هیچ رنگی را با هم مخلوط نکرده‌ایم و رنگ حاصل مشکی است و وقتی از هر 3 رنگ مقدار 255 واحد اضافه کنیم یعنی به اشباع کامل رنگ رسیده‌ایم یعنی رنگ سفید خالص. بله می‌بینیم که برخلاف ضرب‌المثل معروف، بالاتر از سفیدی رنگی نیست! با یک ترکیب ساده متوجه می‌شویم که تعداد رنگ‌هایی که می‌توان در این سیستم تولید کرد برابر با 3^256 یعنی 16،777،216 رنگ است!

پیش از این، گفتیم که میزان روشنایی یا تیرگی رنگ موردنظر بر اساس مقدار رنگی که اضافه می‌شود، قابل‌محاسبه است. بنابراین برای دیدن اینکه یک رنگ چقدر تیره یا روشن است، می‌توان میانگین 3 رنگی که برای تولید آن صرف شده را محاسبه کرد؛ خروجی قاعدتاً عددی بین 0 تا 255 خواهد بود. پس برای طیف روشنایی هر رنگی 255 حالت مختلف وجود دارد.

طیف خاکستری

در صورتی که مقدار هر یک از رنگ‌های اصلی در یک رنگ برابر باشد، رنگ‌ها یکدیگر را خنثی می‌کنند و اصطلاحاً با طیف خاکستری مواجه هستیم که از مشکی خالص تا سفید خالص متغیر است.

اما بازگردیم به موضوع اصلی نوشته یعنی رعایت کنتراست برای استاندارد خوانایی. گفتیم که به منظور خوانایی بیشتر، بهتر است بین رنگ‌های پس‌زمینه و پیش‌زمینه کنتراست وجود داشته باشد. این بدین معنی است که میزان روشنایی رنگ‌های پس‌زمینه و پیش‌زمینه نباید به هم نزدیک باشند. در تصویر فوق، بخش یک‌سوم میانی یعنی میزان روشنایی 85 تا 170 بخشی است که چه در پس‌زمینه و چه در پیش‌زمینه استفاده شود، باعث نزدیکی بیش‌ازحد رنگ‌ها و به هم خوردن کنتراست طراحی می‌شود. لذا در انتخاب رنگ متن و زمینه باید طوری عمل کنیم که میزان روشنایی یکی از آن‌ها بالاتر از 170 و میزان روشنایی دیگری پایین‌تر از 85 قرار بگیرد. برای مثال، در تصویر زیر انتخاب رنگ‌های متن و زمینه به خوبی صورت گرفته و خوانایی بالایی را ایجاد کرده است.

اما در مثال زیر، به دلیل اینکه رنگ متن و زمینه هر دو از یک سمت طیف روشنایی انتخاب شده‌اند، کنتراست کاهش یافته و خوانایی پایین آمده است.

محاسبه روشنایی یا تیرگی رنگ‌ها

یکی از ساده‌ترین ابزارها برای تحلیل کنتراست یک نرم‌افزار طراحی است که روی هر رایانه‌ای که ویندوز دارد پیدا می‌شود. منظور ما نرم‌افزار paint ویندوز است. اگرچه این نرم‌افزار ساده به نظر می‌رسد، ولی تمام امکاناتی که برای تحلیل کنتراست یک طراحی نیاز داریم را در خود دارد. کافی است نرم‌افزار Paint را باز کنید و در منوی فوقانی روی Edit Colors کلیک کنید. در این بخش، با انتخاب هر رنگی می‌توانید سه رنگ اصلی تشکیل دهنده آن را مطابق تصویر زیر مشاهده کنید.

فیلم مجموعه آموزش فتوشاپ، طراحی و گرافیک کامپیوتری – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای محاسبه میزان روشنایی این رنگ کافی است میانگین سه رنگ اصلی آن را محاسبه کنیم یعنی:

135.33=3/(164+177+65)

مشاهده می‌کنیم که میزان روشنایی این رنگ دقیقاً در یک سوم میانی طیف روشنایی قرار می‌گیرد و بنابراین، نه برای متن و نه زمینه، رنگ مناسبی محسوب نمی‌شود. بر اساس استانداردهای طراحی، حداقل کنتراست رنگ برای خوانایی نسبت 1:4.5 است یعنی وقتی میزان روشنایی رنگ پیش‌زمینه بر پس‌زمینه تقسیم شود، باید عددی بالاتر از 4.5 به دست آید و البته مقدار بالاتر از 6.5 برای طراحی‌ها توصیه می‌شود. ابزارهای آنلاینی نیز برای تخمین کنتراست یک تصویر وجود دارند که می‌توانید از آن‌ها بهره بگیرید. برای مثال، در سه وب‌سایتی که در ادامه بیان شده‌اند، با تعیین مقادیر رنگ پس‌زمینه و پیش‌زمینه، نسبت کنتراست بین دو رنگ محاسبه می‌شود:

1. contrastchecker.com
2. msfw.com
3. webaim.org

اگر نوشته بالا برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی و گرافیک کامپیوتری
• آموزش فتوشاپ (Photoshop)
• مجموعه آموزش‌های طراحی سه‌بعدی و متحرک‌ساز
• تعریف و شناسایی رنگ‌ها — یک راهنمای مقدماتی
• اساس نظریه رنگ‌ها — به زبان ساده