fx Dashboard Design Principles
ENहिन्दी

Colour system: एक accent colour, semantic red/green, accessibility

⏱ 10 min

आप क्या सीखेंगे

  • पैलेट (5 रंग काफ़ी हैं)
  • एक accent रंग
  • Semantic रंगों का मतलब status — और कुछ नहीं

समझिए

1. पैलेट (5 रंग काफ़ी हैं)

भूमिका किसके लिए उदाहरण
Neutral dark टेक्स्ट, नंबर, टाइटल #1F2937 (charcoal)
Neutral light बिना हाइलाइट वाले बार, gridlines, बॉर्डर #D1D5DB (हल्का ग्रे)
Background शीट / कार्ड का बैकग्राउंड #FFFFFF या #F7F7F7
Accent वह एक चीज़ जिस पर ध्यान जाए #1F4E78 (ब्रांड नीला)
Semantic अच्छा / चेतावनी / बुरा — सिर्फ़ status #1B873F हरा · #D97706 amber · #C62828 लाल

Hex कोड अपनी Documentation शीट (मॉड्यूल 8) पर लिखें और हर जगह दोबारा इस्तेमाल करें।

2. एक accent रंग

सब कुछ ग्रे करें, फिर सिर्फ़ ज़रूरी चीज़ को रंगें: मौजूदा साल की लाइन (पिछला साल ग्रे में), चुने रीजन का बार, पटरी से उतरा KPI। जब सब रंगीन हो, तो कुछ नहीं उभरता।

3. Semantic रंगों का मतलब status — और कुछ नहीं

लाल और हरे का मतलब हमेशा सिर्फ़ बुरा और अच्छा हो। हरे को "Electronics" और लाल को "Furniture" न बनाएँ — दर्शक उन्हें अच्छा/बुरा पढ़ेंगे। और दिशा याद रखें: लागत के लिए कम हरा है (Analysis ट्रैक, मॉड्यूल 7)।

4. Excel में सेट करें

  • Theme colours: Page Layout → Colors → Customize Colors → Accent 1 = आपका accent, Accent 2–6 = ग्रे/semantic → "ExcelWalaa Dashboard" नाम से सेव करें। अब नए चार्ट और shapes अपने आप आपका पैलेट इस्तेमाल करते हैं।
  • Cell styles: Home → Cell Styles → "KPI Value", "KPI Label", "Section Title" के लिए New Cell Style — एक बार बदलें, हर जगह अपडेट।
  • Chart template: एक चार्ट फ़ॉर्मेट करें → राइट-क्लिक → Save as Template (.crtx); अगली बार Insert → Charts → Templates।

5. सबके लिए सुलभता

लगभग 12 में से 1 पुरुष में किसी तरह की रंग-दृष्टि की कमी है, ज़्यादातर लाल–हरे की।

  • सिर्फ़ रंग पर निर्भर न रहें: ▲▼, "+/−", या शब्द ("Target से पीछे") जोड़ें।
  • दो series की तुलना के लिए लाल/हरे की जगह नीला/नारंगी बेहतर।
  • पर्याप्त contrast: हल्के बैकग्राउंड पर गहरा टेक्स्ट (सामान्य टेक्स्ट के लिए contrast ratio 4.5:1 या ज़्यादा)। नंबरों के लिए सफ़ेद पर हल्का ग्रे टेक्स्ट न रखें।
  • जाँच: स्क्रीनशॉट लेकर grayscale में देखें — क्या series और status अब भी अलग पहचान पाते हैं?

6. बैकग्राउंड और dark mode

सफ़ेद या बहुत हल्का ग्रे बैकग्राउंड अच्छा प्रिंट होता है और ज़्यादातर रिपोर्ट से मेल खाता है। गहरे डैशबोर्ड TV पर नाटकीय लगते हैं पर बुरे प्रिंट होते हैं और छोटे टेक्स्ट का contrast घटाते हैं — सिर्फ़ दीवार वाली स्क्रीन के लिए।

आम गलतियाँ

हर बार का अलग रंग (Excel का "Vary colors by point")। Categories के लिए लाल/हरा। फीका टेक्स्ट जो contrast में फ़ेल हो। Gradients और 3-D shading।

अभ्यास

mediumअपने accent, दो ग्रे और तीन semantic रंगों के साथ custom theme colour सेट बनाकर सेव करें। एक मौजूदा चार्ट दोबारा रंगें: सब ग्रे, मौजूदा साल accent में, जहाँ target से पीछे हैं वहाँ एक data label लाल। grayscale में जाँचें।
Current period के लिए एक accent, comparison के लिए grey और status के लिए green/amber/red रखें। Status के साथ शब्द/symbol दें; background पर labels तथा grayscale export जाँचें। Red न दिखने पर भी cost overrun adverse समझ आए।

प्रश्नोत्तरी

हर डैशबोर्ड में कितने accent रंग?
एक
लाल और हरे का क्या मतलब होना चाहिए?
सिर्फ़ बुरा/अच्छा status
रंगीन नंबरों के बगल में ▲▼ क्यों?
रंग-अंधता वाले दर्शक और grayscale प्रिंटिंग
Colour system: एक accent colour, semantic red/green, accessibility · हिंदी | ExcelWalaa