ممکن است فرض کنید که همه رنگ ها یا خوانایی متن را مانند شما درک می کنند. نحوه درک ما از رنگ می تواند به محیط ما (نورهای کم یا روشن) و توانایی های بینایی ما بستگی داشته باشد. شما یا کاربرانتان ممکن است در میان میلیون ها نفری باشید که دچار کوررنگی یا کم بینایی هستند.
برای حمایت از افراد دارای ناتوانی های بینایی مختلف، گروه WAI یک فرمول کنتراست رنگ ایجاد کرد تا از وجود کنتراست کافی بین متن و پس زمینه آن اطمینان حاصل کند. وقتی این نسبت‌های کنتراست رنگ رعایت شود، افراد با دید نسبتاً ضعیف می‌توانند متن را در پس‌زمینه بدون فناوری کمکی تقویت‌کننده کنتراست بخوانند.
به تفاوت نسبت کنتراست نشان داده شده در شکل 1 توجه کنید.
نسبت کنتراست 4.5:1 حداقل مورد نیاز تنظیم شده توسط دستورالعمل های دسترسی به محتوای وب (WCAG) 2.0 است . این جیره به این دلیل انتخاب شد که از دست دادن حساسیت کنتراست را که اغلب توسط کاربران مبتلا به کاهش بینایی تجربه می‌شود، جبران می‌کند، معادل تقریباً بینایی 20/40.
باز هم، 4.5:1 فقط حداقل است. برای حمایت از کاربران با دید کم یا سایر کوررنگی ها، سطح AAA را برآورده کنید و محتوایی با کنتراست 7:1 ایجاد کنید.
می‌توانید کنتراست رنگ خود را با یک حسابرسی دسترسی Lighthouse در DevTools بررسی کنید.
الگوریتم کنتراست ادراکی پیشرفته (APCA) روشی برای محاسبه کنتراست بر اساس تحقیقات مدرن در مورد درک رنگ است.
APCA بیشتر از سطوح AA و AAA WCAG به زمینه وابسته است.
در این مدل کنتراست بر اساس ویژگی های زیر محاسبه می شود:
- ویژگی های فضایی (وزن قلم و اندازه متن)
- رنگ متن (تفاوت سبک درک شده بین متن و پس زمینه)
- زمینه (نور محیط، محیط و هدف مورد نظر متن)
Chrome دارای یک ویژگی آزمایشی برای جایگزینی دستورالعمل‌های نسبت کنتراست AA/AAA با APCA است.
هر زمان که اطلاعات مهمی را به کاربران منتقل می کنید، هنگام اشتراک گذاری اطلاعات مهم، علاوه بر نشانه های بصری، به متن یا متن جایگزین نیز تکیه کنید. نشانه های بصری شامل رنگ ها، الگوها، تصاویر، سبک فونت و زبان جهت می باشد.
به عنوان مثال، ممکن است یک فرم تماس داشته باشید که ورودی های نامعتبر را با خط قرمز کردن آنها نشان می دهد. این علامت رنگی به صفحه‌خوان یا کاربرانی که دارای اختلالات بینایی رنگی هستند نمی‌گوید که چیزی کار نمی‌کند. ممکن است کاربر تعجب کند که چرا فرم ارسالی کار نمی کند و منصرف شود.
اطمینان حاصل کنید که به چندین روش از خطای خاص به کاربر هشدار داده اید. به عنوان مثال، می توانید یک پیام خطا اضافه کنید تا اعلام کند ورودی خاص نامعتبر است و چرا. همچنین می توانید متن راهنما را اضافه کنید که ورودی مناسب چگونه باید باشد.
همچنان می‌توانید زیر ورودی نامعتبر با قرمز خط بکشید، تا زمانی که نشانه‌های غیربصری اضافی وجود داشته باشد.
اگر به شدت به استفاده از رنگ در رابط کاربری خود متکی هستید، می توانید مشکلات کنتراست را در ابزار توسعه دهنده Chrome کشف کنید.
برای کسانی که دید ضعیفی دارند، حالت‌های کنتراست بالا می‌توانند پیمایش محتوا را در یک صفحه آسان‌تر کنند. چند راه برای تنظیم کنتراست بالا وجود دارد.
هم macOS و هم Windows راه هایی برای افزایش سطح کنتراست در سراسر سیستم عامل ارائه می دهند.
کاربران همچنین می توانند رنگ های پیش زمینه و پس زمینه را معکوس کنند (به عنوان مثال در macOS )، که به ویژه برای وب سایت ها و برنامه هایی که از حالت تاریک پشتیبانی نمی کنند مفید است.
به‌عنوان توسعه‌دهنده، می‌توانید با روشن کردن این تنظیمات و تأیید دستی قابلیت استفاده، آزمایش کنید تا مطمئن شوید رابط شما همچنان قابل مشاهده و قابل استفاده است.
به عنوان مثال، یک نوار پیمایش ممکن است از رنگ پس زمینه ظریف برای نشان دادن اینکه کدام صفحه انتخاب شده است استفاده کند. اگر آن را در حالت کنتراست بالا مشاهده کنید، این ظرافت به طور کامل ناپدید می شود و با آن درک خواننده از اینکه کدام صفحه فعال است، می رود.
اگر کنتراست سطح AA یا بالاتر داشته باشید، وقتی رنگ‌ها معکوس یا با کنتراست بالا هستند، محتوای شما همچنان همانطور که انتظار می‌رود کار کند. با این حال، برای اطمینان از اینکه تجربه مطابق انتظار است، هنوز ارزش آزمایش را دارد.