این ابزار درست کار نمیکند؟
دربارهٔ ابزار «راهنمای CSS برای دید رنگی آنلاین»
این ابزار یک مرجع CSS برای طراحی پالتهای رنگی قابل دسترس تولید میکند که برای کاربران دارای کمبود بینایی رنگ کار میکنند. این نشان میدهد رنگها چگونه تحت انواع مختلف کوررنگی (پروتانوپی، دوترانوپی، تریتانوپی، مونوکروماسی) ظاهر میشوند و جایگزینهای امنتر را پیشنهاد میکند.
حدود ۸٪ از مردان و ۰.۵٪ از زنان نوعی از کمبود بینایی رنگ دارند. طراحی فقط برای دید کامل رنگی آنها را مستثنی میکند — استفاده از جفت رنگهای امن و عدم تکیه صرف بر رنگ (همچنین استفاده از شکل، متن، یا الگو) طرحهای شما را برای همه کار میکند.
از آن برای آزمایش پالتهای برند، حسابرسی طرحهای موجود برای مسائل دسترسیپذیری، یا یادگیری اینکه کدام جفتهای رنگی مشکلساز هستند تا در طراحیهای آینده از آنها اجتناب کنید استفاده کنید.
چطور از این ابزار استفاده کنم؟
چطور یک snippet CSS filter برای شبیهسازی color-blindness بگیرم؟
بدون ورودی اجرا کنید
این ابزار هیچ فیلد ورودی ندارد — فقط Run را بزنید. خروجی یک snippet CSS آمادهٔ paste است که میتوانید در یک stylesheet قرار دهید (بدون پیکربندی دیگر).
چه چیزی میگیرید
خروجی یک فیلد `css` با سه class filter است: `.cb-protanopia`، `.cb-deuteranopia`، `.cb-tritanopia`. هرکدام از یک ماتریس `feColorMatrix` SVG استفاده میکند که یک نوع نقص بینایی رنگی را تقریب میزند.
استفاده
class مربوطه را به `body` (یا یک wrapper) اضافه کنید تا طرح خود را همانطور که حدود ۸٪ مردان با کوررنگی قرمز-سبز، یا سهم بسیار کمتری با blue-yellow، میبینند preview کنید. class را از devtools toggle کنید — نیاز به rebuild نیست.
هشدارها
اینها تقریبهای خطی هستند؛ بینایی رنگ واقعی ظریفتر است. ابزارهایی مانند Sim Daltonism (macOS) یا Coblis از مدلهای بهتری استفاده میکنند. همیشه این preview را با چکهای contrast WCAG (از wcag-contrast-checker-online) جفت کنید — رنگ نباید بهتنهایی اطلاعات حمل کند.