دسترسی پذیری رنگ‌ها در طراحی سایت – چیزهایی که نمی‌دانید!

  1. خانه
  2. کامپیوتر
  3. طراحی وب
  4. دسترسی پذیری رنگ‌ها در طراحی سایت – چیزهایی که نمی‌دانید!
دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

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

بذارید بحث رو اینطوری شروع کنم: هیچ میدونید ۴ درصد از جمعیت دنیا دچار کور رنگی هستن؟! بر اساس آماری که این سایت منتشر کرده، از ۱ نفر از هر ۱۲ مرد و یک نفر از هر ۲۰۰ زن دچار این عارضه هستن.
علاوه بر این، کور رنگی یه طیفه و افراد زیادی توی این طیف هستن که درک متفاوتی از رنگ‌‌ها دارن (حتی شاید خود منم اینجوری باشم، با توجه به اینکه تا حالا تست کور رنگی ندادم!)

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

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

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

مفهوم دسترسی پذیری رنگ‌ها در طراحی سایت

وقتی داریم از دسترسی پذیری صحبت میکنیم، موضوعات زیادی رو میتونیم بررسی کنیم، از نوار پیمایش (Navigation Bar) گرفته تا امکان ارتباط مستقیم با پشتیبانی سایت.

اما این بار، وقتشه به مبحث دسترسی پذیری رنگ‌ها یه نگاهی بندازیم و ببینیم چرا مهمه و چجوری میشه با استفاده از اون، طراحی سایت رو ارتقا داد.

تضاد و کنتراست رنگ ها (Contrast)

در بحث دسترسی پذیری رنگ‌ها، کنتراست مهمترین مفهومیه که باهاش سروکار داریم که شامل این بخش‌ها میشه:

  1. کنتراست متن و پس‌زمینه
  2. کنتراست رنگ متون (بعلاوه وزن weight و سایز فونت‌ها)
  3. کنتراست رنگی المان‌های موجود در صفحه نسبت به هم

راهنمای دسترسی‌پذیری محتوای وب (WCAG) که توسط W3 منتشر شده و میتونید توی این لینک اونو پیدا کنید، توضیحات کاملی درمورد دسترسی‌پذیری داره که میتونید بهش مراجعه کنید و بعدها، شاید درموردش مفصلا نوشتم.

اما اگه بخوام به طور خلاصه، فاکتورهای مهم در این موضوع رو بگم، باید به این موارد اشاره کنم:

  • مهمترین اصل، اینه که در صفحه وب، رنگها نباید تنها عاملی باشن که از طریق اون، یه پیام منتقل میشه. در غیر اینصورت، مرتکب یکی از اشتباهات مرگبار در طراحی سایت شدید!
به این ترتیب، شما باید برای نشون دادن یه المان توی صفحه یا راهنمایی کردن کاربر، از چیزای دیگه‌ای مثل نوشته‌ها یا کنتراست یا تصاویر هم استفاده کنید و فقط متکی به رنگ نباشید.

 

  • کنتراست و تضاد کافی رو بین پس زمینه (Background) و متن و محتوای اصلی (Foreground) ایجاد کنید.
  • حواستون جمع باشه که محتواهای تعاملی قابل شناسایی باشن.

برای مثال، اگه توی هدر سایت، یه لیست جمع شونده دارید، کنار اون لینک یه علامت (معمولا فلش) قرار بدید تا کاربر بفهمه با بردن ماوس روی اون لینک، میتونه به چیزای بیشتری دسترسی پیدا کنه.

  • برچسب فرم‌ها (Form Labels) باید کاملا خوانا و قابل دیدن باشن. این موضوع رو برای اخطارها و ارورها هم درنظر داشته باشید.
کنتراست متون و المان‌های تعاملی باید حداقل ۴.۵ به ۱ باشه.

در ادامه، ابزارهایی رو معرفی میکنم که از طریق اونها میتونید این تضاد رو چک کنید و به نتیجه دلخواهتون برسید.

۱۰ ابزار فوق العاده برای دسترسی پذیری رنگها

نکته: با کلیک روی عکس هرکدوم از این ابزارها، میتونید وارد سایت اونها بشید!

  1. ابزار WebAIM برای چک کردن کنتراست

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

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

 با استفاده از این سرویس، میتونید رنگ متن و بکگراند رو به صورت RGB وارد کنید و نسبت کنتراست رو دریافت کنید. علاوه بر این، خود سرویس راهنمایی تون میکنه که آیا این دو رنگ برای همدیگه مناسب هستن یا نه!

موقع استفاده از WebAIM، حواستون باشه که نسبت ۴.۵:۱ به بالا رو رعایت کنید. رنگ‌هایی با نسبت کمتر از این عدد، برای استفاده در کنار همدیگه مناسب نیستن.

  1. سرویس Colorable

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

این ابزار هم مثل قبلی، میاد کنتراست و تضاد رنگ و بکگراند رو بررسی میکنه و علاوه بر RGB، میشه از HSL هم برای بررسی استفاده کرد.

این ابزار، محیط بامزه‌ای هم داره و به نظرم حتما یه سر بهش بزنید (حداقل من که خوشم اومد، مخصوصا وقتی یهویی رنگ کل پس زمینه تغییر میکنه!)

  1. Color Safe

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

این یکی، یه مقدار وسیعتر از دو ابزار قبلی عمل میکنه. یعنی علاوه بر اینکه کنتراست رنگ‌ها رو چک میکنه، بهتون یه سری پالت رنگی پیشنهاد میده که با استفاده از اونها، میتونید مطمئن باشید که انتخاب دقیق و درستی داشتید و کاربرهای سایتتون دیگه قرار نیست بابت انتخاب اشتباه رنگها اذیت بشن!

  1. لیست راهنمای دسترسی پذیری وب (Web Accessibility Guideline)

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

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

این لیست، براساس دستورالعمل‌های WCAG (که در بالا بهش اشاره کردم) تهیه شده و میتونید یه مجموعه کامل از متون رنگی روی پس زمینه خنثی یا برعکس رو ببینید و ازشون استفاده کنید. حاضر و آماده!

  1. استارک Stark

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

استارک، یه پلاگین برای Adobe XD و اسکچ هست که با استفاده از اون، میتونید کنتراست بین متن و پس زمینه رو بررسی و بهترین گزینه رو انتخاب کنید.

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

  1. Color Blind Web Page Filter

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

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

استفاده از این ابزار میتونه یه گزینه فوق‌العاده برای چک کردن دسترسی پذیری رنگ‌ها توی سایت و دیزاین‌تون باشه!

  1. اپ Color Review

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

این سرویس، یه گزینه فوق‌العاده برای بررسی کنتراست رنگ‌هاست که میتونید با استفاده از اون، تضاد رنگهای المان‌های مختلف با پس‌زمینه رو بررسی کنید.

این ابزار، امکانات خیلی زیادی داره و روی ویندوز، مک، iOS و اندروید هم نصب میشه.
علاوه بر این، نسخه وب هم داره که میتونه خیلی سریع کارتون رو راه بندازه و پیشنهاد میکنم حتما یه سر بهش بزنید.

  1. Colors

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

یه لیست کاربردی و جمع و جور دیگه! با استفاده از این سرویس، میتونید به یه لیست ۹۰ تایی از ترکیب رنگی‌های مختلف دسترسی داشته باشید و همزمان، نسبت کنتراست اونها رو هم ببینید.

لیست Colors، یه شروع عالی و سریع محسوب میشه، مخصوصا برای مواقعی که دنبال یه پالت رنگی مناسب هستین و هیچ ایده‌ای اولیه‌ای ندارید!

  1. Contrast Grid

دسترسی پذیری رنگ‌ها در طراحی سایت - اکتااسکریپت

جدول کنتراست یا همون Contrast Grid، یه ابزار جالب و اپن سورس هست که با استفاده از اون، میتونید کنتراست رنگ‌ها رو ببینید و علاوه بر اون، ترکیب رنگی‌های مختلف رو باهم مقایسه کنید.

این ابزار، بهتون اجازه میده که رنگهای جدید و دلخواه رو توی جدول قرار بدید و بعد، بررسی میکنه که آیا این رنگ‌ها بدرد هم میخورن یا اینکه قراره طرح شما رو خراب کنن!

لازم به توضیح نیست که Contrast Grid هم از دستورالعمل WCAG پیروی میکنه و براین اساس، کار مقایسه رنگها رو انجام میده.

جمع بندی

به عنوان جمع بندی، باید بگم که کاربرد رنگ توی سایت، خیلی خیلی مهمه (حتی مهمتر از چیزی که من و شما فکر میکنیم) و اگه نتونیم به خوبی ازش استفاده کنیم، تمام تلاش هامون از بین میره.

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

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

اگرم سوال یا نظری در مورد این موضوع داشتید، خوشحال میشم توی بخش کامنت‌ها بنویسید.

مطالب مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed

فهرست