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

بهبود قابلیت خواندن وب سایت و تجربه کاربر با کنتراست کافی

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

کمترین کنتراست یک تجربه کم خواندن است

وب سایتهایی که در مقایسه با آن کم است، میتواند خواندن و استفاده از آن سخت باشد و تاثیر منفی در موفقیت هر سایت داشته باشد. مسائل کنتراست ضعیف اغلب برای شناسایی آسان است. معمولا می توانید این کار را با نگاه کردن به یک صفحه ای که در یک مرورگر وب رندر شده است انجام دهید و می توانید ببینید که متن به دلیل انتخاب های رنگ ضعیف به نظر می رسد. با این وجود، با اینکه ممکن است مشخص شود که کدام رنگ با یکدیگر همخوانی نداشته باشد، ممکن است به راحتی تعیین شود که چه رنگها در مقایسه با دیگران کارایی خوبی دارند. شما ممکن است چه چیزی کار نمی کند، اما چگونه می توان تعیین کرد که کار می کند؟ تصویر در این مقاله به شما کمک می کند رنگ های مختلفی را به شما نشان دهد و آنها را به عنوان رنگ پیش زمینه و پس زمینه مقایسه کنید. شما می توانید برخی از جفت های "خوب" و برخی از جفت "فقیر" را مشاهده کنید که به شما در انتخاب رنگ مناسب در پروژه هایتان کمک می کند.

با توجه به کنتراست

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

انتخاب رنگ

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

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

ابزارهای آنلاین

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

CheckMyColors.com تمام رنگ های سایت شما را آزمایش می کند و نسبت کنتراست بین عناصر در صفحه را گزارش می دهد.

علاوه بر این، هنگام فکر کردن در مورد انتخاب رنگ، شما همچنین باید دسترسی به وب سایت و افرادی که اشکال کور رنگی دارند را در نظر بگیرید. WebAIM.org می تواند با این کار کمک کند، همانطور که ContrastChecker.com می تواند انتخاب کند که در راستای دستورالعمل های WCAG است.