WCAG 2.1 / 2.2 कॉन्ट्रास्ट मार्गदर्शक तत्त्वे समजून घेणे
वेब ॲक्सेसिबिलिटी सुनिश्चित करण्यासाठी मजकूर आणि त्याची पार्श्वभूमी यांच्यातील रंगाचा फरक स्पष्ट असणे आवश्यक आहे. हा डिजिटल सुलभतेचा एक मूलभूत पाया आहे. कॉन्ट्रास्ट चेकर हे साधन वापरकर्त्यांना मजकुराचा रंग आणि पार्श्वभूमीचा रंग प्रविष्ट करून त्यांचे अचूक कॉन्ट्रास्ट गुणोत्तर तपासण्याची सुविधा देते. हे गुणोत्तर WCAG 2.1 / 2.2 मानकांनुसार मोजले जाते. हे साधन प्रविष्ट केलेल्या रंगांच्या संयोजनावरून सामान्य मजकूर, मोठा मजकूर आणि UI घटकांसाठी AA आणि AAA या दोन्ही सुलभता पातळी तपासते आणि त्यांचे निकाल दर्शवते.
या साधनामध्ये सुरुवातीला मजकुराचा रंग म्हणून #4f46e5 आणि पार्श्वभूमीचा रंग म्हणून #ffffff सेट केलेला असतो, ज्याचे कॉन्ट्रास्ट गुणोत्तर 6.29:1 एवढे येते.
रंगांचे फॉरमॅट्स आणि इनपुट पर्याय
हे साधन डिझाइन आणि डेव्हलपमेंटमध्ये वापरल्या जाणाऱ्या विविध रंग फॉरमॅट्सना समर्थन देते. वापरकर्ते खालीलपैकी कोणत्याही फॉरमॅटमध्ये रंग प्रविष्ट करू शकतात:
- हेक्स मूल्ये (Hex values): जसे की
#1a1a1a. - RGB मूल्ये: जसे की
rgb(26, 26, 26). - HSL मूल्ये:
hsl()फॉरमॅटमधील रंग मूल्ये.
साधनामध्ये मजकूर आणि पार्श्वभूमीचे रंग जलद गतीने अदलाबदल करण्यासाठी एक स्वॅप बटण दिलेले आहे. जर वापरकर्त्याने चुकीचे किंवा अवैध रंग मूल्य प्रविष्ट केले, तर साधन खालीलप्रमाणे त्रुटी संदेश दर्शवते:
- अवैध मजकूर रंगासाठी: "#1a1a1a किंवा rgb(26, 26, 26) सारखा वैध मजकूर रंग प्रविष्ट करा."
- अवैध पार्श्वभूमी रंगासाठी: "#ffffff किंवा rgb(255, 255, 255) सारखा वैध पार्श्वभूमी रंग प्रविष्ट करा."
कॉन्ट्रास्ट गुणोत्तर आणि त्याचे मोजमाप
कॉन्ट्रास्ट गुणोत्तर हे १:१ ते २१:१ या मर्यादेत मोजले जाते. १:१ चा अर्थ दोन्ही रंगांमध्ये कोणताही फरक नाही (उदा. पांढऱ्यावर पांढरा रंग), तर २१:१ हे सर्वोच्च कॉन्ट्रास्ट दर्शवते (उदा. पांढऱ्या पार्श्वभूमीवर काळा मजकूर).
WCAG 2.1 / 2.2 मानकांनुसार वेगवेगळ्या मजकूर प्रकारांसाठी आणि सुलभता पातळीसाठी खालीलप्रमाणे किमान गुणोत्तर निश्चित केले गेले आहे:
| मजकुराचा प्रकार / घटक | AA पातळीसाठी आवश्यक गुणोत्तर | AAA पातळीसाठी आवश्यक गुणोत्तर |
|---|---|---|
| सामान्य मजकूर | किमान ४.५:१ | किमान ७:१ |
| मोठा मजकूर | किमान ३:१ | किमान ४.५:१ |
| UI आणि ग्राफिक्स | किमान ३:१ | लागू नाही (एकच मर्यादा) |
UI आणि ग्राफिक्स या Row साठी कोणतीही स्वतंत्र AA किंवा AAA पातळी नसते. यासाठी केवळ ३:१ ची एकच किमान मर्यादा निश्चित केलेली आहे.
सामान्य मजकूर विरुद्ध मोठा मजकूर
ॲक्सेसिबिलिटी मानकांमध्ये मजकुराच्या आकारानुसार कॉन्ट्रास्टचे नियम बदलतात. मोठा मजकूर कमी कॉन्ट्रास्टवरही सहज वाचता येत असल्यामुळे त्याच्या मर्यादा सामान्य मजकुरापेक्षा शिथिल असतात.
- सामान्य मजकूर: १८pt पेक्षा लहान असलेला सर्व मजकूर सामान्य मजकुराच्या श्रेणीत येतो. यासाठी AA साठी किमान ४.५:१ आणि AAA साठी किमान ७:१ गुणोत्तर आवश्यक असते.
- मोठा मजकूर: १८pt (सुमारे २४px) किंवा त्याहून अधिक आकाराचा मजकूर मोठा मजकूर मानला जातो. जर मजकूर बोल्ड (ठळक) असेल, तर १४pt (सुमारे १८.५px) किंवा त्याहून अधिक आकाराचा मजकूर मोठा मजकूर मानला जातो. यासाठी AA साठी किमान ३:१ आणि AAA साठी किमान ४.५:१ गुणोत्तर आवश्यक असते.
निकालांचे वर्गीकरण आणि अंतिम निर्णय (Verdict)
रंगांची तपासणी केल्यानंतर हे साधन प्रत्येक श्रेणीसाठी "पास (Pass)" किंवा "नापास (Fail)" असा स्पष्ट निकाल दर्शवते. या निकालांच्या आधारे साधन खालीलपैकी एक अंतिम निर्णय (Verdict) घोषित करते:
- सामान्य मजकुरासाठी AA आणि AAA पास होते. (जेव्हा रंगांचे गुणोत्तर ७:१ किंवा त्याहून अधिक असते).
- सामान्य मजकुरासाठी AA पास होते. (जेव्हा रंगांचे गुणोत्तर ४.५:१ ते ६.९९:१ च्या दरम्यान असते).
- केवळ मोठ्या मजकुरासाठी AA पास होते. (जेव्हा रंगांचे गुणोत्तर ३:१ ते ४.४९:१ च्या दरम्यान असते).
- AA किमान मर्यादेपेक्षा कमी — कॉन्ट्रास्ट वाढवा. (जेव्हा रंगांचे गुणोत्तर ३:१ पेक्षा कमी असते).
गोपनीयता आणि डेटा प्रक्रिया
या साधनाची रचना पूर्णपणे वापरकर्त्याच्या गोपनीयतेला प्राधान्य देऊन करण्यात आली आहे. प्रत्येक तपासणी थेट तुमच्या ब्राउझरमध्ये चालते. तुम्ही प्रविष्ट केलेले कोणतेही रंग किंवा डेटा BroBroGo वर अपलोड केला जात नाही.
वारंवार विचारले जाणारे प्रश्न (FAQ)
AA आणि AAA निकालांचा अर्थ काय आहे?
बहुतेक साइट्स AA पातळीचे ध्येय ठेवतात: यासाठी सामान्य मजकुरासाठी किमान ४.५:१ आणि मोठ्या मजकुरासाठी ३:१ गुणोत्तर आवश्यक आहे. AAA अधिक कडक आहे — सामान्य मजकुरासाठी ७:१ आणि मोठ्या मजकुरासाठी ४.५:१. हे गुणोत्तर १:१ (कॉन्ट्रास्ट नाही) ते २१:१ (पांढऱ्यावर काळा) पर्यंत चालते.
मोठा मजकूर (large text) कशाला मानले जाते?
१८pt (सुमारे २४px) पासूनचा मजकूर, किंवा बोल्ड असल्यास १४pt (सुमारे १८.५px) मजकूर. मोठा मजकूर कमी कॉन्ट्रास्टवरही वाचता येतो, त्यामुळे तो सामान्य मजकुराच्या कडक मर्यादेऐवेजी AA साठी ३:१ आणि AAA साठी ४.५:१ वर पास होतो.
मी कोणते रंग फॉरमॅट्स प्रविष्ट करू शकतो?
#1a1a1a सारखे हेक्स मूल्य, rgb(26, 26, 26) सारखे rgb() मूल्य किंवा hsl() मूल्य टाइप करा — किंवा रंग निवडण्यासाठी कोणत्याही स्वॅचवर क्लिक करा. मजकूर आणि पार्श्वभूमीचे रंग अदलाबदल करण्यासाठी स्वॅप बटण वापरा.
हे WCAG 2 आहे की नवीन APCA पद्धत?
हे WCAG 2.1 / 2.2 फॉर्म्युला वापरते, ज्याचा संदर्भ आज ॲक्सेसिबिलिटी नियम आणि ऑडिटमध्ये दिला जातो. APCA ही एक नवीन पद्धत आहे जी WCAG 3 साठी मसुदा स्वरूपात आहे — ही आशादायक आहे, परंतु अद्याप अधिकृत मानक नाही, म्हणून येथील निकालांमध्ये ती वापरली जात नाही.