کنتراست بین اجزای رابط کاربری، گرافیک و رنگ‌های هم‌جوار، حداقل ۳:۱ است.
توضیحات
به نفع همهٔ کاربران است که کنتراست مناسبی بین اجزای وب‌سایت شما و رنگ‌هایی که اطراف آنها استفاده شده برقرار باشد.
برخی از کاربران دارای اختلالات بینایی، در مقایسه با سایر کاربران، به کنتراست بیشتری برای تشخیص دقیق اجزایی نظیر فیلدهای ورودی، دکمه‌ها و کنترل‌ها نیاز دارند؛ پس، دقت در انتخاب رنگ‌ها، موضوعی کاملاً ضروری است.
روش صحیح انطباق با شاخص موفقیت «کنتراست بخش‌های غیر متنی»
- مطمئن شوید کنترل‌های کاربر، با رنگ‌های اطراف، حداقل کنتراست ۳:۱ را ایجاد می‌کند.
- در مواردی که کنترل‌ها در هنگام فوکوس یا استفاده، تغییر رنگ می‌دهند، اطمینان حاصل کنید که رنگ‌های به‌کار رفته، از حداقل کنتراست ۳:۱ برخوردارند. و
- اطمینان حاصل کنید که تمام عناصر گرافیکی شامل آیکن‌ها، گراف‌ها و نمودار‌ها، حداقل کنتراست ۳:۱ را با رنگ‌های هم‌جوارشان برقرار می‌کنند.
موارد استثنا
- جایی که یک جزء از رابط کاربری قابل مشاهده، اما غیرفعال است (به عنوان مثال، یک دکمه غیرفعال)
- جایی که یک عنصر گرافیکی، نقش خاصی در انتقال معنا ایفا نمی‌کند (مثلاً برچسب‌های یک نمودار، همان مفاهیمی را که خطوط رنگی یا گرافیک‌های تزیینی منتقل می‌کنند، در اختیار کاربران قرار می‌دهند)
- لوگوی برند‌ها
- بازنمایی چیز‌های دیگر (مانند اسکرین‌شات از یک وب‌سایت یا نقشهٔ حرارتی)
نکته‌ها
حالات مختلفی که ممکن است یک جزء داشته باشد را در نظر بگیرید و مطمئن شوید که همهٔ آنها در هماهنگی کامل با یکدیگر هستند.
در جایی که فیلدهای ورودی از نشانگر استفاده می‌کنند (مثلاً برای اطلاعاتی که کاربران فراموش کرده‌اند آنها را وارد کنند)، از رنگی استفاده کنید که معیار‌های کنتراست را داشته باشد.
در جایی که فیلد‌ها یا کنترل‌ها از مرز (Border) استفاده می‌کنند، مراقب باشید که مرز، با معیار‌ها مطابقت داشته باشد.
در گراف‌ها، اطمینان حاصل کنید که هر خط یا میله، هم با خطوط و میله‌های دیگر و هم با پس‌زمینه، کنتراست ۳:۱ دارد.
در نمودار‌های دایره‌ای، اطمینان حاصل کنید که هر بخش با پس‌زمینه و دو بخشِ هم‌جوار خود، کنتراست ۳:۱ دارد.
بهتر است لینک‌های زیر را ببینید:
- شرح شاخص موفقیت در کنسرسیوم وب: 1.4.11 – Non-Text Contrast (Level AA) ↗
- ارائهٔ ویدئویی: چطور محصولات فراگیر را آمادهٔ استفادهٔ افرادی با ناتوانی کم‌بینایی و کوررنگی کنیم؟ ↗
- شاخص موفقیت ۱.۴.۱ – کاربرد رنگ‌ها
- شاخص موفقیت ۱.۴.۳ – حداقل کنتراست
- شاخص موفقیت ۱.۴.۶ – کنتراستِ افزایش یافته
پدیدآورندگان:
مترجم: امید هاشمی
ویراستار فنی: آرتا مکبری
ویراستار فنی دوم: حسین شرفی