لوحة Gray Color Palette

Gray Color Palette built around #808080, a dark neutral neutral anchor (WCAG contrast 5.32:1 against black). The set combines a light tint + a deep shade + a softened complement + a neutral ground. Its strongest pairing is #424242 on #E4E4E4 at 7.9:1, which meets WCAG AA for body text.

محايدمحايدهادئمتوازن
#808080
#CFCFCF
#424242
#8C8C8C
#E4E4E4
#808080 #cfcfcf #424242 #8c8c8c #e4e4e4
#808080 #CFCFCF #424242 #8C8C8C #E4E4E4

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

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

background#E4E4E4
surface#CFCFCF
text#424242
text-muted#808080
primary#808080
secondary#CFCFCF
accent#8C8C8C

متغيّرات CSS

:root {
  --background: #e4e4e4;
  --surface: #cfcfcf;
  --text: #424242;
  --text-muted: #808080;
  --primary: #808080;
  --secondary: #cfcfcf;
  --accent: #8c8c8c;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#808080#CFCFCF#424242#8C8C8C#E4E4E4
#808080
1.0
2.5
2.5
1.2
3.1
#CFCFCF
2.5
1.0
6.5
2.2
1.2
#424242
2.5
6.5
1.0
3.0
7.9
#8C8C8C
1.2
2.2
3.0
1.0
2.6
#E4E4E4
3.1
1.2
7.9
2.6
1.0

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

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

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

لوحات مشابهة

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #808080, #CFCFCF, #424242, #8C8C8C, #E4E4E4.

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

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

Gray Color Palette — #808080 #CFCFCF #424242 #8C8C8C #E4E4E4 — Tintiva