این قاعده چه چیزی را بررسی می‌کند
بررسی می‌کند که کنتراست میان رنگ متن و پس‌زمینه حداقل آستانه‌های نسبت کنتراست WCAG 2 در سطح AA را برآورده کند.
چرا اهمیت دارد
WCAG 1.4.3 برای متن معمولی نسبت کنتراست دست‌کم 4.5:1 و برای متن بزرگ 3:1 را الزامی می‌کند. قیمت‌ها، نشان‌ها و بنرهای کم‌رنگ برای افراد کم‌بینا، و برای همه در نور شدید، به‌سختی خوانده می‌شوند.
نحوه رفع
در هر وب‌سایت
- متن کم‌کنتراست را پیدا کنید و رنگ متن و پس‌زمینه آن را یادداشت کنید: یک ابزار بررسی کنتراست یا ابزارهای توسعه‌دهنده مرورگر هر دو را نشان می‌دهند.
- رنگ متن یا پس‌زمینه را در CSS قالب خود تغییر دهید تا نسبت کنتراست دست‌کم 4.5:1 شود (3:1 برای متن 24px و بزرگ‌تر، یا متن پررنگ 18.66px).
- به نشان‌های حراج، متن placeholder، لینک‌های فوتر و دکمه‌های روی تصاویر توجه ویژه داشته باشید.
در Shopify
- متن کم‌کنتراست را پیدا کنید و رنگ متن و پس‌زمینه آن را یادداشت کنید: یک ابزار بررسی کنتراست یا ابزارهای توسعه‌دهنده مرورگر هر دو را نشان می‌دهند.
- در Online Store > Themes > Customize > Theme settings > Colors، رنگ متن را تیره‌تر یا پس‌زمینه را روشن‌تر کنید، برای همان طرح رنگی که مشکل دارد، تا نسبت کنتراست دست‌کم 4.5:1 شود.
- به نشان‌های حراج، متن placeholder، لینک‌های فوتر و دکمه‌های روی تصاویر توجه ویژه داشته باشید.
نحوه بررسی اصلاح
- اسکن را دوباره اجرا کنید و مطمئن شوید color-contrast دیگر نمایش داده نمی‌شود.
- با یک ابزار بررسی کنتراست، رنگ‌های دقیق را به‌صورت نمونه‌ای بررسی کنید.
FixReports چگونه آن را پیدا می‌کند
اسکن ما قاعده color-contrast از axe-core را در یک مرورگر Chrome واقعی روی هر صفحه‌ای که تست می‌کند اجرا می‌کند و هر عنصر ردشده را همراه با صفحه، کد HTML آن و در صورت امکان یک اسکرین‌شات گزارش می‌دهد.
تست خودکار وجود همین مشکل مشخص را تأیید می‌کند. اما نمی‌تواند بگوید بقیه صفحه دسترس‌پذیر است یا نه: برخی موانع فقط وقتی آشکار می‌شوند که یک انسان صفحه را بررسی کند.