لوحة High Contrast Color Palette

أزواج مختارة بحيث يجتاز كل اقتران نص/خلفية WCAG AAA — إمكانية الوصول كقيد تصميمي. المراسي: #000000، #FFFFFF، #FFFF00.

قابل للوصولتباين
#000000
#FFFFFF
#FFFF00
#0000FF
#FF0000
#000000 #ffffff #ffff00 #0000ff #ff0000
#000000 #FFFFFF #FFFF00 #0000FF #FF0000

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

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

background#FFFFFF
surface#FFFF00
text#000000
text-muted#0000FF
primary#FFFF00
secondary#0000FF
accent#FF0000

متغيّرات CSS 

:root {
  --background: #ffffff;
  --surface: #ffff00;
  --text: #000000;
  --text-muted: #0000ff;
  --primary: #ffff00;
  --secondary: #0000ff;
  --accent: #ff0000;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#000000#FFFFFF#FFFF00#0000FF#FF0000
#000000
1.0
21.0
19.6
2.4
5.3
#FFFFFF
21.0
1.0
1.1
8.6
4.0
#FFFF00
19.6
1.1
1.0
8.0
3.7
#0000FF
2.4
8.6
8.0
1.0
2.1
#FF0000
5.3
4.0
3.7
2.1
1.0

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

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

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

#000000
Black
#FFFFFF
White
#FFFF00
Yellow
#0000FF
Blue
#FF0000
Red

لوحات مشابهة

Minimal Color Palette
White Color Palette
Black Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #000000, #FFFFFF, #FFFF00, #0000FF, #FF0000.

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

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

High Contrast Color Palette — #000000 #FFFFFF #FFFF00 #0000FF #FF0000 — Tintiva