यह नियम क्या जाँचता है
सुनिश्चित करता है कि फ़ोरग्राउंड और बैकग्राउंड रंगों का कंट्रास्ट WCAG 2 AA के न्यूनतम कंट्रास्ट अनुपात की सीमा पूरी करे.
यह क्यों ज़रूरी है
WCAG 1.4.3 सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 का कंट्रास्ट अनुपात मांगता है। हल्के रंग की कीमतें, बैज और बैनर कम दृष्टि वाले लोगों के लिए, और तेज़ रोशनी में सभी के लिए, पढ़ने में मुश्किल होते हैं।
इसे कैसे ठीक करें
किसी भी वेबसाइट पर
- कम कंट्रास्ट वाला टेक्स्ट ढूँढें और उसके टेक्स्ट और बैकग्राउंड के रंग नोट करें: कोई कंट्रास्ट चेकर या आपके ब्राउज़र के डेवलपर टूल, दोनों रंग दिखाते हैं।
- अपनी थीम की CSS में टेक्स्ट या बैकग्राउंड का रंग तब तक बदलें जब तक अनुपात कम से कम 4.5:1 न हो जाए (24px और उससे बड़े टेक्स्ट, या 18.66px बोल्ड टेक्स्ट के लिए 3:1)।
- सेल बैज, प्लेसहोल्डर टेक्स्ट, फ़ुटर लिंक और इमेज पर रखे बटन पर ख़ास ध्यान दें।
Shopify पर
- कम कंट्रास्ट वाला टेक्स्ट ढूँढें और उसके टेक्स्ट और बैकग्राउंड के रंग नोट करें: कोई कंट्रास्ट चेकर या आपके ब्राउज़र के डेवलपर टूल, दोनों रंग दिखाते हैं।
- Online Store > Themes > Customize > Theme settings > Colors में, प्रभावित कलर स्कीम के लिए टेक्स्ट का रंग गहरा करें या बैकग्राउंड हल्का करें, जब तक अनुपात कम से कम 4.5:1 न हो जाए।
- सेल बैज, प्लेसहोल्डर टेक्स्ट, फ़ुटर लिंक और इमेज पर रखे बटन पर ख़ास ध्यान दें।
सुधार की जांच कैसे करें
- स्कैन दोबारा चलाएं और पुष्टि करें कि color-contrast अब नहीं दिखता।
- सटीक रंगों को किसी कंट्रास्ट चेकर से जांचकर देखें।
FixReports इसे कैसे ढूँढता है
हमारा स्कैन जिस भी पेज को टेस्ट करता है, उस पर एक असली Chrome ब्राउज़र में axe-core का color-contrast नियम चलाता है, और फ़ेल होने वाले हर एलिमेंट को उसके पेज, उसके मार्कअप और, जहाँ लागू हो, एक स्क्रीनशॉट के साथ दिखाता है।
ऑटोमेटेड टेस्ट पुष्टि करता है कि यह ख़ास समस्या मौजूद है। वह यह नहीं बता सकता कि पेज का बाकी हिस्सा एक्सेसिबल है या नहीं: कुछ बाधाएँ तभी सामने आती हैं जब कोई व्यक्ति पेज की जाँच करता है।