لوحة Presentation Color Palette

أزرق أساسي واحد، ومساحة بيضاء، وبرتقالي بيانات واحد، وأخضر مساند واحد — مناسبة للرسوم البيانية وآمنة على أجهزة العرض وتحقّق WCAG AA. المراسي: #1E5F9E، #FFFFFF، #F07B3F، #2D5A27.

عروضشرائحصافٍ
#1E5F9E
#FFFFFF
#F07B3F
#2D5A27
#A3B3D3
#1e5f9e #ffffff #f07b3f #2d5a27 #a3b3d3
#1E5F9E #FFFFFF #F07B3F #2D5A27 #A3B3D3

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

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

background#FFFFFF
surface#A3B3D3
text#2D5A27
text-muted#1E5F9E
primary#1E5F9E
secondary#F07B3F
accent#A3B3D3

متغيّرات CSS 

:root {
  --background: #ffffff;
  --surface: #a3b3d3;
  --text: #2d5a27;
  --text-muted: #1e5f9e;
  --primary: #1e5f9e;
  --secondary: #f07b3f;
  --accent: #a3b3d3;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#1E5F9E#FFFFFF#F07B3F#2D5A27#A3B3D3
#1E5F9E
1.0
6.6
2.4
1.2
3.1
#FFFFFF
6.6
1.0
2.8
8.1
2.1
#F07B3F
2.4
2.8
1.0
2.9
1.3
#2D5A27
1.2
8.1
2.9
1.0
3.8
#A3B3D3
3.1
2.1
1.3
3.8
1.0

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

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

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

#1E5F9E
rgb(30, 95, 158)
#FFFFFF
White
#F07B3F
rgb(240, 123, 63)
#2D5A27
Forest Green
#A3B3D3
rgb(163, 179, 211)

لوحات مشابهة

Minimal Color Palette
White Color Palette
Forest Green Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #1E5F9E, #FFFFFF, #F07B3F, #2D5A27, #A3B3D3.

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

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

Presentation Color Palette — #1E5F9E #FFFFFF #F07B3F #2D5A27 #A3B3D3 — Tintiva