પેલેટ કોન્ટ્રાસ્ટની માન્યતા તપાસવી

પેલેટ કોન્ટ્રાસ્ટની માન્યતા તપાસવી ક્ષમતા તમારા થીમમાં લાગુ કરતાં પહેલાં તમારા ડિઝાઇન પેલેટમાં WCAG (વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ) નું પાલન કરવા માટે રંગ જોડીઓ (colour pairs) તપાસે છે.

ઝાંખી (Overview)

આ ક્ષમતા ખાતરી કરે છે કે તમારી સાઇટની રંગ યોજના (color scheme) ટેક્સ્ટ અને બેકગ્રાઉન્ડ રંગો વચ્ચેના કોન્ટ્રાસ્ટ રેશિયોની માન્યતા કરીને એક્સેસિબિલિટી ધોરણોને પૂર્ણ કરે છે. તે એવા રંગ સંયોજનોને રોકવામાં મદદ કરે છે જે દૃષ્ટિની ખામીઓ ધરાવતા વપરાશકર્તાઓ માટે વાંચવામાં મુશ્કેલ હોઈ શકે છે.

ઇનપુટ ફોર્મેટ (Input Format)

આ ક્ષમતા ઇનપુટ તરીકે એક કલર પેલેટ સ્વીકારે છે:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

પેરામીટર્સ (Parameters)

પેરામીટર	પ્રકાર (Type)	જરૂરી (Required)	વર્ણન (Description)
colors	array	Yes	name અને hex પ્રોપર્ટી સાથેના કલર ઓબ્જેક્ટ્સની એરે
wcag_level	string	No	WCAG પાલન સ્તર: "A", "AA" (ડિફોલ્ટ), અથવા "AAA"
pairs_to_check	array	No	માન્ય કરવા માટે ચોક્કસ રંગ જોડીઓ (દા.ત., ["primary-text", "background-text"])

તપાસવામાં આવતા WCAG સ્તરો (WCAG Levels Checked)

આ ક્ષમતા WCAG ધોરણો અનુસાર કોન્ટ્રાસ્ટ રેશિયોની માન્યતા કરે છે:

સ્તર (Level)	સામાન્ય ટેક્સ્ટ (Normal Text)	મોટા ટેક્સ્ટ (Large Text)	ન્યૂનતમ રેશિયો (Minimum Ratio)
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

• સામાન્ય ટેક્સ્ટ — 18pt કરતાં નાનો ટેક્સ્ટ (અથવા 14pt બોલ્ડ)
• મોટા ટેક્સ્ટ — 18pt અથવા તેનાથી મોટો ટેક્સ્ટ (અથવા 14pt બોલ્ડ અથવા તેનાથી મોટો)

આઉટપુટ સ્કીમા (Output Schema)

આ ક્ષમતા એક વિગતવાર માન્યતા રિપોર્ટ પાછો આપે છે:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

આઉટપુટ ફીલ્ડ્સ (Output Fields)

ફીલ્ડ (Field)	પ્રકાર (Type)	વર્ણન (Description)
compliant	boolean	શું આખી પેલેટ નિર્ધારિત WCAG સ્તરને પૂર્ણ કરે છે
wcag_level	string	જે WCAG સ્તરની તપાસ કરવામાં આવી હતી
pairs	array	દરેક કલર જોડી માટે વિગતવાર પરિણામો
contrast_ratio	number	ગણતરી કરેલ કોન્ટ્રાસ્ટ રેશિયો (1:1 થી 21:1)
status	string	દરેક જોડી માટે "pass" અથવા "fail"
recommendations	array	નિષ્ફળ ગયેલી જોડીઓને સુધારવા માટેના સૂચનો

ઉપયોગનું ઉદાહરણ (Usage Example)

પ્રોમ્પ્ટ (Prompt):

Check if my color palette meets WCAG AA standards. I have primary color #678233, text color #ffffff, and background #f5f5f5.

પરિણામ (Result): આ ક્ષમતા તમામ રંગ સંયોજનોની માન્યતા કરે છે અને નીચે મુજબ પાછું આપે છે:

• ✅ પ્રાથમિક + ટેક્સ્ટ: 5.2:1 રેશિયો (WCAG AA માં પાસ)
• ✅ બેકગ્રાઉન્ડ + ટેક્સ્ટ: 12.1:1 રેશિયો (WCAG AAA માં પાસ)
• એકંદરે: WCAG AA સાથે પાલનકારી (Compliant)

થીમ બિલ્ડર સાથે સંકલન (Integration with Theme Builder)

જ્યારે તમે થીમ બિલ્ડરના ડિઝાઇન-ડાયરેક્શન સિલેક્શનનો ઉપયોગ કરો છો, ત્યારે પેલેટ કોન્ટ્રાસ્ટની માન્યતા તપાસતી ક્ષમતા:

1. તમારી પસંદ કરેલી કલર પેલેટનું વિશ્લેષણ કરે છે
2. તમામ ટેક્સ્ટ-બેકગ્રાઉન્ડ સંયોજનોની તપાસ કરે છે
3. તમારા પસંદ કરેલા WCAG સ્તર સામે માન્યતા કરે છે
4. બિન-પાલનકારી જોડીઓ માટે ભલામણો પૂરી પાડે છે
5. એક્સેસિબલ ન હોય તેવા રંગ યોજનાઓ લાગુ થતી અટકાવે છે

શ્રેષ્ઠ પદ્ધતિઓ (Best Practices)

• AA સ્તરથી શરૂઆત કરો — મોટાભાગની વેબસાઇટ્સ માટે WCAG AA એ ધોરણ છે
• લાગુ કરતાં પહેલાં પરીક્ષણ કરો — ડિઝાઇનને કાયમ આપતા પહેલા તમારી પેલેટની માન્યતા તપાસો
• તમામ સંયોજનો તપાસો — ખાતરી કરો કે ટેક્સ્ટ, લિંક્સ અને UI તત્વો બધા ધોરણોને પૂર્ણ કરે છે
• વપરાશકર્તાની પસંદગીઓ ધ્યાનમાં લો — કેટલાક વપરાશકર્તાઓમાં વધારાની રંગ સંવેદનશીલતા હોઈ શકે છે
• કોન્ટ્રાસ્ટ ચેકર્સનો ઉપયોગ કરો — ચકાસણી માટે આ ક્ષમતાને બ્રાઉઝર ટૂલ્સ સાથે જોડો

નિષ્ફળ જોડીઓ અને ભલામણો (Failing Pairs and Recommendations)

જો કોઈ કલર જોડી માન્યતામાં નિષ્ફળ જાય, તો આ ક્ષમતા ભલામણો પૂરી પાડે છે:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "ટેક્સ્ટ રંગને #ffffff સુધી હળવો કરો (રેશિયો 5.2:1 થશે)",
    "બેકગ્રાઉન્ડ રંગને #556b2f સુધી ઘેરો કરો (રેશિયો 4.8:1 થશે)",
    "#4a6b1f જેવો અલગ પ્રાથમિક રંગ વાપરો (રેશિયો 6.1:1 થશે)"
  ]
}

સંબંધિત ક્ષમતાઓ (Related Abilities)

• Generate Logo SVG — તમારી માન્ય કરેલી કલર પેલેટ સાથે લોગો બનાવો
• Create Menu — એક્સેસિબલ રંગો સાથે નેવિગેશન બનાવો