متن های کم کنتراست باعث می شود وب سایت شما برای همه کاربران کمتر قابل خواندن باشد، حتی بیشتر برای کاربرانی که کمبود بینایی دارند. DevTools می‌تواند به‌طور خودکار مشکلات کنتراست پایین را پیدا کند و رنگ‌های بهتری را برای رفع آنها پیشنهاد کند.
از DevTools برای موارد زیر استفاده کنید:
- مشکلات کنتراست را کشف کنید . از پانل CSS Overview ، برگه (پیش نمایش) Issues یا گزارش Lighthouse برای دریافت لیستی از همه مسائل استفاده کنید.
- مشکلات کنتراست را برطرف کنید . مشکلات را با یک راهنمای ابزار در حالت بازرس مشاهده کنید و رنگ هایی را انتخاب کنید که انتخابگر رنگ برای رفع نسبت کنتراست پیشنهاد می کند.
- تقلید از کمبودهای بینایی به سایت خود همانطور که کاربران آن را می بینند نگاه کنید.
متن با کنتراست کم را کشف کنید
برای کشف متن با کنتراست کم:
- DevTools را در صفحه خود باز کنید . در این آموزش می توانید از این صفحه نمایشی استفاده کنید.
با استفاده از یکی از سه پانل، فهرستی از تمام مشکلات کنتراست را دریافت کنید:
مشکلات کنتراست در پانل نمای کلی CSS
برای دریافت نمای کلی:
- CSS Overview را باز کنید.
- یک نمای کلی ثبت کنید .
- بخش Colors را باز کنید، به Contrast مسائل بروید و در صورت وجود روی یک مشکل کلیک کنید.
در جدول مسائل کنتراست ، نشانگر را روی یک عنصر نگه دارید و روی پیوند کنار آن کلیک کنید.
همانطور که در بخش رفع کنتراست کم متن توضیح داده شده است، مشکل را برطرف کنید.
(پیش نمایش) مشکلات کنتراست در برگه Issues
برای دریافت لیستی از مشکلات:
- گزارش مشکلات کنتراست را در برگه Issues فعال کنید:
- تنظیمات > آزمایشی را باز کنید.
- در نوار فیلتر،
contrast issueرا جستجو کنید. - فعال کردن گزارش مشکل کنتراست خودکار از طریق پانل Issues را علامت بزنید.
- روی Reload DevTools در اعلان بالا کلیک کنید.
- تب Issues را باز کنید .
مشکلات کنتراست یافت شده توسط DevTools را گسترش دهید، سپس جدول عناصر را گسترش دهید و روی پیوند کنار عنصر کلیک کنید.
همانطور که در بخش رفع کنتراست کم متن توضیح داده شده است، مشکل را برطرف کنید.
مسائل کنتراست در گزارش فانوس دریایی
برای اجرای گزارش:
- در DevTools ، را باز کنید
برگه های بیشتر > فانوس دریایی . - یک گزارش Lighthouse با تنظیمات زیر ایجاد کنید:
- حالت : ناوبری (پیش‌فرض)
- دسته بندی ها : دسترسی
- دستگاه : رومیزی
- روی Analyze page load کلیک کنید و منتظر باشید تا Lighthouse گزارش را ایجاد کند.
- به قسمت کنتراست بروید و در لیست عناصر، روی پیوندی به یک عنصر تأثیرگذار کلیک کنید.
- همانطور که در بخش رفع کنتراست کم متن توضیح داده شده است، مشکل را برطرف کنید.
تصحیح متن با کنتراست کم
برای رفع مشکل کنتراست کم:
- یک مشکل کنتراست را پیدا کنید و روی پیوندی به عنصر آسیب‌دیده در پانل CSS Overview ، برگه Issues یا گزارش Lighthouse کلیک کنید. DevTools شما را به پنل Elements می برد و عنصر مربوطه را انتخاب می کند.
به عنوان مثال، در این صفحه نمایشی ، اولین عنصر تحت تأثیر h1.line1است. کلیک
در گوشه سمت راست بالای DevTools بررسی کنید و ماوس را روی عنصر موجود در viewport نگه دارید. DevTools یک راهنمای ابزار برای این عنصر نشان می دهد. 
توجه کنید
علامت هشدار در کنار مقدار نسبت کنتراست در راهنمای ابزار. نسبت کنتراست تفاوت روشنایی بین رنگ های پیش زمینه (رنگ متن) و پس زمینه را اندازه گیری می کند.Color Picker را در کنار اعلان رنگ متن عنصر باز کنید و در Color Picker ، بخش Contrast ratio را گسترش دهید.
انتخابگر رنگ به شما می گوید که نسبت کنتراست با سطوح AA یا AAA دستورالعمل های WebAIM مطابقت ندارد.
کلیک کنید بر روی
از دکمه رنگ پیشنهادی در کنار سطح AAA استفاده کنید . Color Picker رنگ متنی را اعمال می کند که با دستورالعمل های نسبت کنتراست مطابقت دارد. 
از طرف دیگر، برای انتخاب یک رنگ به صورت دستی، می توانید دایره را در پیش نمایش سایه ها بکشید. برای ماندن در سطح AA یا AAA، به ترتیب رنگی را زیر خط بالا یا پایین انتخاب کنید.
به طور مشابه، تمام مشکلات کنتراست را که با پنل CSS Overview ، برگه Issues یا گزارش Lighthouse پیدا کردید، برطرف کنید.
تغییرات را ذخیره کنید
برای ذخیره تغییراتی که در DevTools ایجاد کرده اید:
- همه تغییرات CSS را به یکباره کپی کرده و در کد خود قرار دهید
- راه اندازی یک Workspace را در نظر بگیرید که به DevTools اجازه می دهد فایل ها را مستقیماً در منابع شما ذخیره کند.
بعدش چی؟
بیشتر بدانید:
- قابلیت دسترسی را به طور کلی بیاموزید
- به ویژه دسترسی به رنگ و کنتراست