هل هناك مشكلة في هذه الأداة؟
عن «Color Blindness CSS Reference Online»
تولّد هذه الأداة مرجع CSS لتصميم لوحات ألوان يمكن الوصول إليها تعمل للمستخدمين الذين يعانون من نقص في الرؤية اللونية. تُظهر كيف تظهر الألوان تحت أنواع مختلفة من عمى الألوان (protanopia، deuteranopia، tritanopia، monochromacy) وتقترح بدائل أكثر أمانًا.
حوالي ٨٪ من الرجال و٠.٥٪ من النساء يعانون من شكل ما من نقص الرؤية اللونية. التصميم فقط للرؤية الكاملة بالألوان يستبعدهم — استخدام أزواج ألوان آمنة وعدم الاعتماد فقط على اللون (استخدام الشكل أو النص أو النمط أيضًا) يجعل تصاميمك تعمل للجميع.
استخدمها لاختبار لوحات العلامة التجارية، أو تدقيق التصاميم الموجودة لمشاكل إمكانية الوصول، أو تعلم أزواج الألوان المشكلة لتجنبها في التصاميم المستقبلية.
كيف تستخدم هذه الأداة
كيف أحصل على مقتطف CSS filter لمحاكاة عمى الألوان؟
شغّل بلا مدخلات
لا تأخذ الأداة حقول إدخال — اضغط Run فقط. تعيد مقتطف CSS جاهز للصق في ورقة الأنماط (بلا إعدادات أخرى).
ما تحصل عليه
الناتج حقل واحد `css` يحوي ثلاث فئات فلتر: `.cb-protanopia` و `.cb-deuteranopia` و `.cb-tritanopia`. تستخدم كلٌّ مصفوفة `feColorMatrix` في SVG لتقريب نوع من قصور إدراك الألوان.
الاستخدام
أضف الفئة المناسبة إلى `body` (أو غلاف) لمعاينة التصميم كما يراه ~8% من الرجال أصحاب عمى الأحمر-الأخضر، أو شريحة أصغر بكثير لـ blue-yellow. بدّل الفئة من devtools — لا تحتاج إعادة بناء.
تحفظات
هذه تقريبات خطية؛ الإدراك الحقيقي للألوان أكثر دقة. أدوات مثل Sim Daltonism (macOS) أو Coblis تستخدم نماذج أفضل. اقرن هذه المعاينة دومًا بفحوصات تباين WCAG (استخدم wcag-contrast-checker-online) — لا ينبغي للون أن يحمل المعلومات وحده.