نسبت کنتراست متن و پس‌زمینه باید حداقل ۴.۵:۱ باشد.
توضیحات
همهٔ کاربران وب‌سایت شما از وجود کنتراست مناسب بین متن و رنگ پس‌زمینه، سود می‌برند.
برخی کاربران دارای اختلالات بینایی برای استفاده از محتوای وب‌سایت شما در مقایسه با بقیه کاربران، به کنتراست قوی‌تری نیاز دارند؛ بنا‌بر‌این استفاده از رنگ‌های مناسب برای تحقق این هدف، ضروری است.
روش صحیح انطباق با شاخص موفقیت «حداقل کنتراست»
اطمینان حاصل کنید که بین متن و پس‌زمینه، حداقل نسبت ۴.۵:۱ برقرار است.
برای انجام این کار، از راهکار‌های زیر استفاده کنید:
- استفاده از پس‌زمینهٔ روشن و متن تیره یا
- استفاده از پس‌زمینه تیره و متن روشن و
- سنجیدن کنتراست به کمک ابزار بررسی کنتراست رنگ
موارد استثنا
- متنی که با اندازه ۱۸پوینت (معادل ۲۴ پیکسل) و یا بزرگ‌تر دارای حداقل کنتراست ۳:۱ باشد. متنی که با اندازه ۱۴پوینت (معادل ۱۸.۵ پیکسل) و یا بزرگ‌تر به صورت بولد شده باشد و دارای حداقل نسبت کنتراست ۳:۱ باشد.
- متونی که صرفاً جنبهٔ تزیینی داشته باشد.
- متنی که بخشی از تصویر است (مثلاً مردی که در حال خواندن روزنامه است یا منظره‌ای که اتفاقاً تابلوی خیابان هم در آن دیده می‌شود)
- لوگوی برند‌ها و شرکت‌ها
نکته‌ها
در CSS، اندازهٔ فونت ۱۴ پوینت را ۱۸.۵ پیکسل و فونت ۱۸ را هم ۲۴ پیکسل در نظر بگیرید.
تبدیل پوینت به پیکسل ↗
انتخاب حداقل کنتراست ۷:۱ همچنین شاخص موفقیت شمارهٔ ۱.۴.۶ موسوم به «کنتراست افزایش یافته» ↗ را که در سطح AAA آمده، محقق خواهد کرد.
به‌خاطر بسپارید که حتماً همه رنگ‌های استفاده شده باید باهم مطابقت داشته باشند. این علاوه بر محتوای اصلی، شامل لینک‌هایی که پس از یکبار استفاده تغییر رنگ می‌دهند و هِدینگ‌ها در منو‌ها و نوار‌های کناری هم می‌شود.
مطمئن شوید که نمودار‌های جاسازی شده یا عکس نمودارها، (اعم از نوار‌ها، محور‌ها و برچسب‌ها) از حداقل کنتراست بین عناصر برخوردارند.
این دستور‌العمل شامل عکسِ نوشته‌ها هم می‌شود؛ البته با این قید که شما نباید از عکسِ یک نوشته استفاده کنید. نگاه کنید به شاخص موفقیت ۱.۴.۵- «عکسِ نوشته‌ها» ↗
بهتر است لینک‌های زیر را ببینید:
- شرح شاخص موفقیت در کنسرسیوم وب: Contrast (Minimum) (Level AA) ↗
- ارائهٔ ویدئویی: چطور محصولات فراگیر را آمادهٔ استفادهٔ افرادی با ناتوانی کم‌بینایی و کوررنگی کنیم؟ ↗
- شاخص موفقیت Guideline 1.4.5 – Images of Text ↗
- شاخص موفقیت Guideline 1.4.6 – Contrast (Enhanced) ↗
- شاخص موفقیت Guideline 1.4.9 – Images of Text (No Exception) ↗
- شاخص موفقیت Guideline 1.4.11 – Non-text Contrast ↗
پدیدآورندگان:
مترجم: امید هاشمی
ویراستار فنی: آرتا مکبری
ویراستار فنی دوم: حسین شرفی