بررسی کنتراست – Contrast Checker

این بررسی کنتراست، کنتراست رنگ WCAG و APCA را برای رعایت ADA بررسی می‌کند — یک آزمون دسترسی رنگ برای هر وب‌سایت.

✅ آنچه از بررسی کنتراست دریافت خواهید کرد: - نسبت کنتراست WCAG 2.2 و APCA Lc، - عناصر دارای مشکل که در صفحه هایلایت شده‌اند، - قوانین CSS که رنگ‌ها را تولید کرده‌اند، با ردیابی از طریق نقشه‌های منبع (در صورت موجود بودن)، - ابزار انتخاب رنگ داخلی با آنالیزور کنتراست و پیشنهادات جایگزین، - پیش‌نمایش زنده اصلاحات، - صادرات اصلاحات به CSS (با نظرات مکان‌یابی منبع). 🔍 ساخته شده به عنوان یک بررسی کنتراست رنگ وب‌سایت که حالت‌های شبه، Shadow DOM، iframe های هم‌منشأ و متن روی تصاویر و گرادیان‌ها را بررسی می‌کند — نه فقط پس‌زمینه‌های صاف. ⚠️ مجوز دیباگر مورد نیاز است. پوشش این بررسی کنتراست تنها از طریق پروتکل Chrome DevTools ممکن است که به مجوز 'debugger' نیاز دارد. پس از اتصال، کروم نوار اطلاعاتی را در تمام تب‌ها نشان می‌دهد و آن را در زمان جداسازی پنهان نمی‌کند. ⚡ جریان کار به شدت بهینه شده: • همه عناصر با مشکلات دسترسی رنگ در یک نگاه هایلایت شده‌اند. • تغییرات بلافاصله پیش‌نمایش می‌شوند، با نسبت‌های کنتراست و احکام دوباره محاسبه شده. • CSS سفارشی را در تب Stylesheet اعمال کنید؛ مشکلات تحت تأثیر در لیست علامت‌گذاری می‌شوند. • برای بررسی کنتراست رنگ به صورت دستی، از ابزار انتخاب رنگ داخلی استفاده کنید: کلیک چپ برای تنظیم رنگ پیش‌زمینه، کلیک راست برای پس‌زمینه، و نسبت به‌طور آنی به‌روزرسانی می‌شود. • از تب Exclusions برای پنهان کردن همه چیز به جز عناصری که در حال اصلاح آن‌ها هستید استفاده کنید. 📐 معیارهای پشت احکام. این بررسی نسبت کنتراست دسترسی رنگ را در برابر الزامات WCAG و APCA آزمایش می‌کند. APCA Lc در برابر آستانه‌های Bridge-PCA درجه‌بندی می‌شود که از نسبت‌های WCAG سخت‌گیرانه‌تر است — بنابراین یک پاس Bridge-PCA همیشه به معنای پاس WCAG است. 🔬 APCA چیست؟ APCA (الگوریتم کنتراست ادراکی قابل دسترسی) مدلی است که نحوه خواندن متن روی صفحه نمایش را پیگیری می‌کند. دو جفت رنگ با نسبت WCAG یکسان می‌توانند به وضوح متفاوت به نظر برسند و APCA Lc آن‌ها (کنتراست روشنایی) این را منعکس می‌کند: یک جفت می‌تواند پاس WCAG را بگیرد اما احساس سختی در خواندن داشته باشد. این بررسی دسترسی رنگ وب‌سایت هر دو عدد را محاسبه می‌کند. 🚧 محدودیت‌ها: 1. مانند هر بررسی دسترسی وب‌سایت دیگر، این یکی تخمین‌های بهترین تلاش را ارائه می‌دهد، نه گواهی انطباق. 2. پوشش فقط متنی است؛ بررسی عناصر غیرمتنی (WCAG 1.4.11) در نقشه راه است. 3. iframe های هم‌منشأ به داخل نمی‌روند. 4. پس‌زمینه‌ها و انیمیشن‌های پیچیده در تعداد محدودی از نقاط فضایی و زمانی نمونه‌برداری می‌شوند؛ نسبت بدترین نمونه گزارش می‌شود اما ممکن است هنوز خوشبینانه باشد؛ نمونه‌بردار همچنین می‌تواند توسط آثار رندرینگ گمراه شود. 5. سایت‌های بسیار پویا ممکن است مشکلات کاذب تولید کنند. 6. این بررسی کنتراست رنگ به طور خودکار OCR را روی تصاویر اجرا نمی‌کند؛ تصاویر را با متن معنادار از طریق ابزار انتخاب رنگ موجود آزمایش کنید. 🔒 حریم خصوصی و مجوزها. ▸ به صورت محلی اجرا می‌شود؛ هیچ داده‌ای از وب‌سایت هرگز از دستگاه شما خارج نمی‌شود. ▸ فقط 'activeTab': اسکریپت تحلیل زمانی که روی آیکون نوار ابزار کلیک می‌کنید، تزریق می‌شود. ▸ مجوز 'debugger' برای ورود به Shadow DOM و iframe ها، ردیابی منابع CSS و نمونه‌برداری از پس‌زمینه‌های پیچیده مورد نیاز است. 🧮 جزئیات دقت. متن نیمه شفاف و شفافیت اجداد به درستی مدیریت می‌شوند: پیش‌زمینه بر روی پس‌زمینه واقعی خود ترکیب می‌شود قبل از اینکه روشنایی اندازه‌گیری شود، بنابراین نسبت گزارش شده با آنچه کاربران واقعاً می‌بینند مطابقت دارد. توابع رنگ با دامنه وسیع — oklch، lab، lch، color(display-p3) — نیز پشتیبانی می‌شوند و در صورت خارج از دامنه به sRGB محدود می‌شوند. 🎨 متن روی تصاویر و گرادیان‌ها. برخلاف بیشتر ابزارهای مشابه، این ابزار از پس‌زمینه‌های غیرصاف دست نمی‌کشد و به آنچه 'getComputedStyle' / 'CSS.getBackgroundColors' گزارش می‌دهد اعتماد نمی‌کند. این ابزار ترتیب رنگ را در مرورگر بررسی می‌کند تا پس‌زمینه واقعی را ترکیب کند — شفافیت، حالت‌های ترکیب، گرادیان‌های خطی، فیلتر پس‌زمینه — و زمانی که این کافی نیست، این ابزار کنتراست رنگ پیکسل‌های رندر شده را در محل متن نمونه‌برداری می‌کند. ❓ سوالات متداول 📌 چرا یک جفت رنگ یکسان گاهی اوقات تحت WCAG و APCA احکام متفاوتی دریافت می‌کند؟ ↳ WCAG روشنایی را اندازه‌گیری می‌کند؛ APCA کنتراست ادراکی را اندازه‌گیری می‌کند. یک جفت که 4.5:1 را پاک می‌کند ممکن است هنوز از آستانه Bridge-PCA Lc کوتاه بیفتد — مدلی سخت‌گیرانه‌تر. 📌 آیا APCA جایگزین WCAG است؟ ↳ نه — APCA جایگزینی نیست، بلکه یک نظر دوم مفید است. این بررسی کنتراست هر دو را گزارش می‌دهد. 📌 آیا می‌توانم یک فایل محلی یا سرور توسعه خود را با این بررسی دسترسی اسکن کنم؟ ↳ بله. "اجازه دسترسی به URL های فایل" را در تنظیمات افزونه فعال کنید. URL فایل:// یا localhost را باز کنید و روی آیکون نوار ابزار کلیک کنید. فقط chrome://، فروشگاه وب کروم و سایر طرح‌های محدود شده نادیده گرفته می‌شوند. 📌 آیا این ابزار گواهی انطباق ADA را صادر می‌کند؟ ↳ نه. این فقط کنتراست رنگ را بررسی می‌کند — یک جنبه از دسترسی. انطباق ADA یک تعیین قانونی است که شامل بسیاری از استانداردها و معیارها (معناشناسی، دسترسی به صفحه‌کلید، متن جایگزین، زیرنویس و غیره) می‌شود و باید توسط یک حرفه‌ای واجد شرایط ارزیابی شود.