لوحة Healthcare Color Palette

أزرق طبي هادئ على أرضية باهتة — مقروء ومطمئن وقابل للوصول في كل أحجام النص. المراسي: #E8F4F8، #2A6F97، #61A5C2.

رعاية صحيةطبيهادئ
#E8F4F8
#2A6F97
#61A5C2
#F5FAFC
#284E69
#e8f4f8 #2a6f97 #61a5c2 #f5fafc #284e69
#E8F4F8 #2A6F97 #61A5C2 #F5FAFC #284E69

الأدوار الدلالية

تُسنَد تلقائياً: الأفتح = الخلفية، الأغمق = النص، الأكثر تشبّعاً = اللون الأساسي.

background#F5FAFC
surface#E8F4F8
text#284E69
text-muted#2A6F97
primary#2A6F97
secondary#E8F4F8
accent#61A5C2

متغيّرات CSS

:root {
  --background: #f5fafc;
  --surface: #e8f4f8;
  --text: #284e69;
  --text-muted: #2a6f97;
  --primary: #2a6f97;
  --secondary: #e8f4f8;
  --accent: #61a5c2;
}
معاينة في الواجهات →

مصفوفة إمكانية الوصول

لون النص (الصفوف) على الخلفية (الأعمدة). الأخضر = اجتياز WCAG AA للنص العادي (≥4.5:1).

النص \ الخلفية#E8F4F8#2A6F97#61A5C2#F5FAFC#284E69
#E8F4F8
1.0
4.9
2.4
1.1
7.9
#2A6F97
4.9
1.0
2.0
5.2
1.6
#61A5C2
2.4
2.0
1.0
2.6
3.2
#F5FAFC
1.1
5.2
2.6
1.0
8.4
#284E69
7.9
1.6
3.2
8.4
1.0

تحت عمى اللون الأخضر-الأحمر

محاكاة Machado وزملائه (2009)، شدة 1.0 — تقدير تقريبي وليست أداة طبية.

ألوان هذه اللوحة

لوحات مشابهة

أسئلة شائعة

كيف أستخدم Healthcare Color Palette في CSS؟

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #E8F4F8, #2A6F97, #61A5C2, #F5FAFC, #284E69.

هل تجتاز هذه الألوان فحوصات إمكانية الوصول؟

راجع مصفوفة WCAG في هذه الصفحة: كل اقتران نص-على-خلفية بنسبة ≥ 4.5 يجتاز AA للنص العادي؛ و≥ 3 يجتاز AA للنص الكبير ومكوّنات الواجهة.

Healthcare Color Palette — #E8F4F8 #2A6F97 #61A5C2 #F5FAFC #284E69 — Tintiva