Freecodecamp: يصعب قراءة رسالة التحذير في وضع عدم الاتصال في الوضع المظلم

تقول WCAG أن التباين هو 1.41 فقط: https://contrastchecker.com/؟c=f5f6f7&b=add8e6

تكون خلفية الإشعارات مشفرة ويتم التعامل مع لون الخط بناءً على السمة.

لقد سمحنا لـ bootstrap بالتعامل مع تصميم الإشعارات نظرًا لأنها تتعامل مع لون الخط والخلفية وتبدو جيدة في كلا الموضوعين.

لذا فإن القيام بما يلي يجب أن يفي بالغرض.

أضف alert-info كصف دراسي هنا:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

وإزالة background من هنا:
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

أعتقد أن أفضل طريقة هي تنفيذ العمليات الحسابية المصححة بوحدة الإضاءة.
أول تأثير واضح لاستخدام نهج مصحح luma هو أن لون خلفية الإشعار يحتاج إلى التبديل إلى إعلان RBG للخلفيات ، وحساب الإضاءة من أي طريقة نختارها ، واستخدامها في إعلان اللون الأمامي ، والذي يمكنه ( وسوف) لا يزال لون HSL.

أقول هذا لأن هذا سيسمح للون الخط بالتبديل بناءً على تباين تباين خلفية الإشعار من white إلى black والعكس صحيح.

المصدر: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

ahmadabdolsaheb هل يمكنني العمل على هذا؟ قد أحتاج إلى مساعدة. فأرشدوني.

@ rammazzoti2000 ، هذه خدعة رائعة. شكرا لتقاسم الرابط.

نظرًا لأننا نخطط للخروج من bootstrap ، يجب أن نفكر في الحسابات المصححة luma في كيفية تنفيذنا للسمات الداكنة / الفاتحة أثناء عملية إعادة الكتابة.

في غضون ذلك ، أعتقد أنه يمكننا المضي قدمًا في إجراء التغيير البسيط الذي يحل هذه المشكلة.

@ redshark25 ، بالتأكيد. تأكد من قراءة هذا: https://contribute.freecodecamp.org/#/index ؟ id = our-open-source-codebase