وب سایت خود را خواناتر کنید

Sofia Emelianova

متن‌های با کنتراست پایین، خوانایی وب‌سایت شما را برای همه کاربران، به ویژه کاربرانی که مشکل بینایی دارند، کاهش می‌دهد. ابزارهای توسعه (DevTools) می‌توانند به طور خودکار مشکلات کنتراست پایین را پیدا کرده و رنگ‌های بهتری را برای کمک به شما در رفع آنها پیشنهاد دهند.

از DevTools برای موارد زیر استفاده کنید:

• مشکلات کنتراست را کشف کنید . از پنل CSS Overview ، تب Issues (پیش‌نمایش) یا گزارش Lighthouse برای دریافت لیستی از تمام مشکلات استفاده کنید.
• مشکلات کنتراست را برطرف کنید . مشکلات را با یک راهنما در حالت بازرس مشاهده کنید و رنگ‌هایی را که انتخابگر رنگ برای رفع نسبت کنتراست پیشنهاد می‌دهد، انتخاب کنید.
• نقص‌های بینایی را تقلید کنید . به سایت خود همانطور که کاربرانتان آن را می‌بینند، نگاه کنید.

متن با کنتراست پایین را کشف کنید

برای کشف متن با کنتراست پایین:

1. DevTools را در صفحه خود باز کنید .

2. تمام مشکلات مربوط به کنتراست را با استفاده از یکی از سه پنل زیر فهرست کنید:

   • مرور کلی CSS
   • (پیش‌نمایش) مشکلات
   • فانوس دریایی

شما می‌توانید با باز کردن CodePen ما، آن را آزمایش کنید.

مشکلات کنتراست در پنل CSS Overview

برای دریافت یک مرور کلی:

1. مرور کلی CSS را باز کنید.
2. یک نمای کلی ثبت کنید .
3. بخش رنگ‌ها را باز کنید، به بخش مشکلات کنتراست بروید و در صورت وجود، روی یک مشکل کلیک کنید.

4. در جدول مشکلات کنتراست ، نشانگر ماوس را روی یک عنصر نگه دارید و روی پیوند کنار آن کلیک کنید.

   

5. مشکل را همانطور که در بخش متن «رفع کنتراست پایین» توضیح داده شده است، برطرف کنید.

(پیش‌نمایش) مشکلات کنتراست در برگه مشکلات

برای دریافت لیست مشکلات:

1. گزارش مشکلات کنتراست را در برگه مشکلات فعال کنید:
   1. تنظیمات > تجربی را باز کنید.
   2. در نوار فیلتر، contrast issue جستجو کنید.
   3. از طریق پنل مشکلات، گزینه فعال کردن گزارش خودکار مشکل کنتراست را انتخاب کنید.
   4. در اعلان بالا، روی Reload DevTools کلیک کنید.
2. برگه «مسائل» را باز کنید .

3. مشکلات کنتراستی که DevTools پیدا کرده را باز کنید، سپس جدول عناصر را باز کنید و روی پیوندی در کنار عنصر کلیک کنید.

   

4. مشکل را همانطور که در بخش متن «رفع کنتراست پایین» توضیح داده شده است، برطرف کنید.

مشکلات کنتراست در گزارش لایت‌هاوس

برای اجرای گزارش:

1. در DevTools ، باز کنید تب‌های بیشتر > فانوس دریایی .

2. یک گزارش Lighthouse با تنظیمات زیر ایجاد کنید:

   • حالت : ناوبری (پیش‌فرض)
   • دسته بندی ها : دسترسی
   • دستگاه : دسکتاپ

   

3. روی «تحلیل بارگذاری صفحه» کلیک کنید و منتظر بمانید تا Lighthouse گزارش را تولید کند.

4. به بخش کنتراست بروید. از فهرست عناصر، روی پیوندی به عنصر آسیب‌دیده کلیک کنید.

   

5. مشکل را همانطور که در بخش متن «رفع کنتراست پایین» توضیح داده شده است، برطرف کنید.

رفع مشکل کنتراست پایین متن

برای رفع مشکل کنتراست پایین:

1. یک مشکل کنتراست پیدا کنید و روی پیوندی به عنصر آسیب‌دیده در پنل CSS Overview ، تب Issues یا گزارش Lighthouse کلیک کنید. DevTools شما را به پنل Elements می‌برد و عنصر مربوطه را انتخاب می‌کند.

   

   برای مثال، در نسخه آزمایشی غیرقابل دسترس ما CodePen ، اولین عنصر آسیب‌دیده h1.line1 است.

2. کلیک در گوشه سمت راست بالای DevTools، ماوس را روی عنصر در پنجره نمایش نگه دارید . DevTools یک راهنمای ابزار برای این عنصر نشان می‌دهد.

   

   توجه کنید علامت هشدار در کنار مقدار نسبت کنتراست در راهنمای ابزار. نسبت کنتراست تفاوت روشنایی بین رنگ‌های پیش‌زمینه (رنگ متن) و پس‌زمینه را اندازه‌گیری می‌کند.

3. پنجره انتخاب رنگ (Color Picker) را که در کنار اعلان رنگ متن عنصر قرار دارد، باز کنید و در پنجره انتخاب رنگ ، بخش نسبت کنتراست (Contrast ratio) را باز کنید.

   

   انتخابگر رنگ به شما می‌گوید که نسبت کنتراست با سطوح AA یا AAA دستورالعمل‌های WebAIM مطابقت ندارد.

4. کلیک کنید از دکمه رنگ پیشنهادی کنار سطح AAA استفاده کنید . انتخابگر رنگ ، رنگ متنی را که با دستورالعمل‌های نسبت کنتراست مطابقت دارد، اعمال می‌کند.

   

5. روش دیگر، برای انتخاب دستی رنگ، می‌توانید دایره را در پیش‌نمایش سایه‌ها بکشید. برای ماندن در سطح AA یا AAA، به ترتیب رنگی را در زیر خط بالا یا پایین انتخاب کنید.

   

6. به طور مشابه، تمام مشکلات کنتراست را که با پنل CSS Overview ، تب Issues یا گزارش Lighthouse پیدا کردید، برطرف کنید.

تغییرات را ذخیره کنید

برای ذخیره تغییراتی که در DevTools ایجاد کرده‌اید:

• تمام تغییرات CSS را به طور همزمان کپی کرده و در کد خود جایگذاری کنید
• یک فضای کاری (Workspace) تنظیم کنید تا DevTools بتواند فایل‌ها را مستقیماً در منابع شما ذخیره کند.

بعدش چی؟

بیشتر بدانید:

• یادگیری دسترسی‌پذیری به طور کلی
• به ویژه دسترسی به رنگ و کنتراست