Sepehran Babaei
Sepehran Babaei
خواندن ۳ دقیقه·۸ ماه پیش

دستورالعمل های طراحی برای کاربران کوررنگ

کوررنگی چیست ؟

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

آمار کوررنگی در افراد :

طبق آمار تخمین زده می‌شود که حدود ۳۰۰ میلیون نفر در جهان درگیر کوررنگی هستند که :

  • در مرد‌ها از هر ۱۲ مرد ۱ نفر دچار کوررنگی است یعنی چیزی حدود ۸٪
  • در زن ها از هر ۲۰۰ زن ۱ نفر دچار کوررنگی است یعنی چیزی حدود ۰.۵٪


انواع کوررنگی :

سه نوع کوررنگی تاکنون کشف شده است :


۱- کوررنگی قرمز-سبز

شایع ترین کوررنگی رایج در جهان است که در این افراد تفاوت دو رنگ قرمز و سبز دشوار است.

این افراد به ۴ دسته تقسیم می‌شوند :

  • گروه Deuteranomaly : این افراد رنگ سبز را قرمز میبینند.
  • گروه Protanomaly : این افراد قرمز را سبز روشن میبینند.
  • گروه Protanopia و Deuteranopia : این گروه هیچ جوری نمی‌توانند تفاوت رنگ قرمز و سبز را تشخصی دهند.

۲- کوررنگی آبی-زرد

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

این افراد به ۲ دسته تقسیم می‌شوند :

  • گروه Tritanomaly : این افراد در تشخیص رنگ‌های ابی، سبز و رزرد وقرمز دشواری دارند.
  • گروه Tritanopia : این افراد تفاوت رنگ های ابی و سبز و تفاوت ابی و سبز و تفاوت رنگ‌های بنفش و قرمز و تفاوت رنگ‌های زرد و صورتی را تش


۳-کوررنگی کامل (تک رنگ) :

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

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

برخی از مواردی که با رعایت ان‌ها میتوانید دسترسی پذیری رنگ‌ها را بهتر کنیم :

۱- از برجسب‌ها برای رنگ‌ها استفاده کنید:

همیشه از برچسب‌های مناسب برای دسترسی پذیری رنگ‌ها استفاده کنید

۲- هم از رنگ‌ همراه با نماد‌ها استفاده کنید

از نماد یا ایکون‌های مرتبط به همراه تغییر رنگ‌ها استفاده کنید

۳- برای لینک‌ها از خط زیر متن استفاده کنید

همیشه برای لینک‌ها علاوه بر تغییر رنگ ابی از خط زیر متن استفاده کنید

۴- از حداقل رنگ‌ها استفاده کنید و از ترکیب رنگ‌های نامرتبط خودداری کنید.

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

۵- دسترسی پذیری رنگ‌ها در استفاده از نمودار‌ها دقت کنید.

در هنگام استفاده از نمودار‌ها چون ممکن است از ترکیب رنگ‌های متعدد استفاده گردد و باعث سردرگمی کاربر می‌شود.

برای مثال در نمودار‌ها از بورد‌های هم رنگ بک گراند استفاده کنید.

۶- دسترسی دکمه‌های کال توی اکشن خود را تقویت کنید.

دکمه‌ها CTA یا کال تو اکشن دکمه‌های مهمی هستند که باید دسترسی بالایی نسبت به سایر دکمه‌ها داشته باشند.

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

۷- از نشانه‌های خاص برای فیلد‌های اجباری و اختیاری استفاده کنید

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

ابزارهای تست دسترسی پذیری رنگ‌ها

در ادامه برخی ار ابزارهای مهم برای تست دسترسی پذیری رنگ ها اشاره شده است :

  • khroma
  • colorbox
  • whocanuse
  • colorsafe
  • getstark
  • happyhues


نتیجه‌گیری :

امیدوارم نکته‌های بالا کمک کنه که دنیای یکسان و فرصت‌های برابری برای همه افراد ایجاد کنیم در ادامه به مرور نکته‌های بالا بصورت کوتاه اشاره می‌کنیم:

۱- برای ایجاد تمایز فقط به رنگ‌ها اکتفا نکنید و از نماد و ایکون ها هم برای دسترسی استفاده کنید.

۲- برای لینک‌ها علاوه بر تغییر رنگ از خط زیر متن نیز استفاده کنید

۳- رنگ‌ها را محدود کنید و از ترکیب رنگ‌هایی که باهم ترکیب بد و نامناسبی می‌شوند، خودداری کنید

۴- از نماد‌های خاص از فیلد‌های فرم‌ها برای اجباری و اختیاری بودن، استفاده کنید

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







designuiuxکوررنگیدسترسی پذیری
در درجه اول یک متفکر محصول در قالب طراح محصول هستم با ذهنت build in public
شاید از این پست‌ها خوشتان بیاید