مجله خبری هاست ایران » طراحی و توسعه » راهنمای استفاده از کنتراست رنگ ها برای طراحان
طراحی و توسعه گرافیک

راهنمای استفاده از کنتراست رنگ ها برای طراحان

کنتراست رنگ در طراحی

رنگ‌هایی که طراحان در طراحی پوستر، وب‌سایت و … انتخاب می‌کنند بر روی موفقیت طراحی تأثیر مستقیمی دارد. هر رنگ روانشناسی خاص خود را دارد. طراحان باید موارد استفاده از هر رنگ را بشناسند و با رعایت کردن نکات مربوط به آن مخاطبان بیشتری جذب کنند.

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


مقاله مرتبط: ١٢ وب سایت کاربردی برای انتخاب رنگ بندی مناسب


برای بالا بردن زیبایی‌شناسی درزمینهٔ شناخت کنتراست‌ها با ما همراه باشید.

چرا استفاده از کنتراست به طراحی کمک می‌کند؟

اگر بخواهیم بدون مقدمه‌چینی پاسخ این سؤال را بدهیم باید بگوییم کنتراست نظر مخاطب را جلب می‌کند.

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

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

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

قوطی کوکاکولا قرمزرنگ با نوشته سفید است. تصور کنید که اگر قوطی به‌صورت یکدست قرمز بود دیگر جذابیتی نداشت و مخاطب به‌سختی می‌توانست کوکاکولا را از میان نوشیدنی‌های دیگر تشخیص دهد. استفاده به‌جا از رنگ سفید درزمینهٔ قرمز باعث شده تا هر فردی با دیدن قوطی کوکاکولا آن را بشناسد.

چگونه از کنتراست بهترین استفاده را ببریم؟

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

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


مقاله مرتبط: راهنمای سبک (style guide) برای طراحی سایت


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

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

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

کنتراست رنگی تأثیر زیادی بر روی بازده صفحه شما می‌گذارد. در صفحه‌های وب دکمه‌ای با عنوان با ما تماس بگیرید (همان  CTA) وجود دارد که درصورتی‌که کاربر نیاز به خدمات یا سفارشی داشته باشد باید بر روی این دکمه کلیک کند. استفاده از رنگ‌هایی با کنتراست خوب باعث می‌شود تا کاربر پس از گشت زدن در صفحه وب‌سایت به‌راحتی این دکمه را پیدا کند و در سایت سرگردان نشود.

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

کنتراست رنگ در طراحی سایت

یکی از سایت‌هایی که از کنتراست به بهترین شکل ممکن استفاده کرده است سایت Trip Advisor است. ترکیب رنگ‌های سفید، سبز و زرد جلوه زیبایی به این سایت داده است. در بالای این سایت نواری سبزرنگ دیده می‌شود و رنگ سایر بخش‌های سایت سفید است.

کنتراست رنگ در سایت Trip Advisor

استفاده از رنگ زرد یکی دیگر از استفاده‌های درست از کنتراست رنگی است، رنگ زرد با نوشته‌های مشکی داخل آن بهترین انتخاب برای دکمه‌های call to action مانند مشاهده جزییات و نمایش اطلاعات خرید است که برای کاربر واضح است. از رنگ آبی برای هایپر لینک‌ها در این سایت استفاده‌شده است. رنگ آبی لینک‌ها در بسیاری از سایت‌ها دیده می‌شود و مخاطب به آن عادت کرده است.

کور رنگی را فراموش نکنید

حدود ۸ درصد از مردان جهان کوررنگی دارند، این اتفاق کمتر در خانم‌ها رخ می‌دهد و از هر ۱۷ زن یک نفر کوررنگی دارد. حدود ۴.۵ درصد از افراد دنیا رنگ‌ها را آن شکلی که من و شما می‌بینیم، نمی‌بینند.

شاید این موضوع مسئله مهمی به نظر نرسد که بخواهید در طراحی خود به آن اهمیت دهید. اما جالب است بدانید که فقط در انگلستان حدود ۲.۷ میلیون فرد کور رنگ وجود دارد. بنابراین باید به آن توجه کنید، مخصوصاً اگر مخاطب کسب‌وکار مردان هستند!

انواع دو رنگ بینی

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

اگر شما از رنگ سبز به‌عنوان رنگ پس‌زمینه صفحه اصلی خود استفاده کنید حدود ۴.۵ درصد از افراد نمی‌توانند آن را تشخیص دهند و این میزان از مخاطبان شما درکی از وب‌سایت شما نخواهند داشت، حتی ممکن است خواندن حروف هم برای آن‌ها غیرممکن باشد.

کلام آخر

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

۱ دیدگاه

کلیک برای ثبت دیدگاه