सुलभ सीएसएस ग्रेडिएंट और कंट्रास्ट जेनरेटर

लाइव WCAG 2.1 कंट्रास्ट जांच के साथ सुलभ ग्रेडिएंट और बॉक्स शैडो बनाएं

ग्रेडिएंट
135°
प्रभाव
बॉक्स शैडो
0px
12px
30px
-8px
30%
कार्ड सामग्री

आपका सुलभ डिज़ाइन

ग्रेडिएंट पर पाठ तभी पढ़ने योग्य है जब कंट्रास्ट पर्याप्त हो – यह टूल आपके लिए वास्तविक समय में जाँच करता है।

WCAG कंट्रास्ट जांच
ग्रेडिएंट पर सबसे खराब स्थिति – AA बड़ा 3:1, AA 4.5:1, AAA 7:1।
CSS आउटपुट

                
            

        


        
        

            

            
कंट्रास्ट जांच ग्रेडिएंट पर सबसे खराब स्थिति का उपयोग करती है: सभी नमूना बिंदुओं का न्यूनतम। सुनिश्चित करें कि शीर्षक (बड़ा पाठ, 3:1), मुख्य पाठ (4.5:1) और बटन पाठ कम से कम AA पास करें।

        


        
        

            

            
केवल एक रंग या HEX/RGB/HSL रूपांतरण चाहिए? हमारे कलर पिकर और कनवर्टर का उपयोग करें।

        


        
        

            
 WCAG कंट्रास्ट चेकर के साथ सुलभ CSS ग्रेडिएंट जेनरेटर

            
सुंदर CSS ग्रेडिएंट बनाएं जो वास्तव में पढ़ने योग्य हों। सुलभ ग्रेडिएंट जेनरेटर एक रेखीय ग्रेडिएंट (दो रंग और कोण), बॉक्स शैडो और लाइव WCAG 2.1 कंट्रास्ट जांच को जोड़ता है – ताकि आपका डिज़ाइन AA और AAA कंट्रास्ट मानकों को पूरा करे।


            
ग्रेडिएंट पर WCAG कंट्रास्ट कैसे काम करता है?

            
WCAG 2.1 कंट्रास्ट को पाठ रंग और पृष्ठभूमि रंग के अनुपात के रूप में मापता है। ग्रेडिएंट पर पृष्ठभूमि बदलती है, इसलिए यह टूल पाठ रंग को पूरे ग्रेडिएंट की सबसे खराब स्थिति से जांचता है और तुरंत चेतावनी देता है यदि AA या AAA नहीं पहुंचा जाता है।


            
CSS टेक्स्ट ग्रेडिएंट और मेश ग्रेडिएंट

            
क्लासिक रेखीय ग्रेडिएंट के अलावा आप CSS टेक्स्ट ग्रेडिएंट (background-clip: text द्वारा शीर्षक में काटा गया) और परतदार रेडियल ग्रेडिएंट वाला मेश ग्रेडिएंट बना सकते हैं – सीधे CSS या टेलविंड क्लास के रूप में कॉपी करने योग्य।


            
टेलविंड ग्रेडिएंट जेनरेटर आउटपुट

            
आउटपुट को टेलविंड पर स्विच करें और bg-gradient-to-br from-[#2563eb] to-[#7c3aed] जैसी तैयार क्लास और मनमाने छाया मान सीधे अपने मार्कअप में कॉपी करें।

        


        

            
 अक्सर पूछे जाने वाले प्रश्न

            

                

                    
WCAG AA और AAA का क्या अर्थ है?

                    
AA के लिए सामान्य पाठ का न्यूनतम 4.5:1 (बड़े पाठ के लिए 3:1) कंट्रास्ट अनुपात आवश्यक है, AAA के लिए 7:1 (बड़े पाठ के लिए 4.5:1)। यह टूल सभी पूर्वावलोकन पाठों को वास्तविक समय में इन सीमाओं के विरुद्ध जांचता है।

                

                

                    
ग्रेडिएंट पर कंट्रास्ट की गणना कैसे होती है?

                    
पृष्ठभूमि ग्रेडिएंट के साथ बदलती है, इसलिए टूल दो रंगों के बीच कई बिंदुओं का नमूना लेता है और सबसे खराब स्थिति की रिपोर्ट करता है – सबसे कम कंट्रास्ट जो ग्रेडिएंट पर कहीं भी हो सकता है। यदि वह बिंदु पास होता है, तो पूरा ग्रेडिएंट सुरक्षित है।

                

                

                    
क्या यह टूल वास्तव में मुफ्त है?

                    
हाँ। CSS ग्रेडिएंट जेनरेटर 100% मुफ्त है, पूरी तरह आपके ब्राउज़र में चलता है और किसी सर्वर पर कोई डेटा अपलोड नहीं करता।

                

                

                    
क्या मैं जेनरेट किए गए CSS का उपयोग टेलविंड परियोजनाओं में कर सकता हूँ?

                    
हाँ। कस्टम कोण, रंग और छाया के लिए मनमाने मान सहित तैयार ग्रेडिएंट, छाया और पाठ रंग क्लास कॉपी करने के लिए आउटपुट प्रारूप को टेलविंड पर स्विच करें।

                

                

                    
क्या मैं इस टूल को अपनी वेबसाइट पर एम्बेड कर सकता हूँ?

                    
हाँ, बिल्कुल! आप CSS ग्रेडिएंट जेनरेटर को अपनी वेबसाइट पर मुफ्त में एम्बेड कर सकते हैं – बस iframe के माध्यम से। एम्बेड विजेट पृष्ठ पर आपको तैयार एम्बेड कोड मिलेगा और आप रंग व शैली अनुकूलित कर सकते हैं।