WCAG कॉन्ट्रास्ट तपासक — AA/AAA ऑनलाइन _

WCAG कॉन्ट्रास्ट तपासणी काही सरळ पायऱ्यांमधून चालते. काहीही तुमचा ब्राउझर सोडत नाही.

1. तुम्ही एक अग्रभाग आणि एक पार्श्वभूमी रंग प्रविष्ट करता. साधन hex, rgb(), hsl() किंवा नामांकित CSS रंगांचे त्यांच्या लाल, हिरव्या आणि निळ्या चॅनेल मूल्यांमध्ये रूपांतर करते.
2. प्रत्येक RGB चॅनेल sRGB ट्रान्सफर फंक्शन वापरून रेषीय केला जातो. हे गामा-एन्कोडेड डिस्प्ले मूल्यांचे रेषीय प्रकाश तीव्रतेत रूपांतर करते.
3. रेषीय मूल्ये प्रत्येक चॅनेलसाठी मानवी डोळ्याच्या संवेदनशीलतेनुसार वजन केली जातात — लालसाठी 0.2126, हिरव्यासाठी 0.7152, निळ्यासाठी 0.0722. बेरीज म्हणजे रंगाची सापेक्ष ल्युमिनन्स.
4. कॉन्ट्रास्ट गुणोत्तर आहे (L1 + 0.05) ÷ (L2 + 0.05), जेथे L1 ही हलक्या रंगाची ल्युमिनन्स आणि L2 ही गडद रंगाची आहे. अतिरिक्त 0.05 सूत्र शुद्ध काळ्यासाठी वैध ठेवते.
5. गुणोत्तराची तुलना WCAG थ्रेशोल्ड्सशी केली जाते: AA सामान्य मजकुरासाठी किमान 4.5:1, AA मोठ्या मजकुरासाठी 3:1, AAA सामान्य मजकुरासाठी 7:1 आणि AAA मोठ्या मजकुरासाठी 4.5:1 आवश्यक आहे. मोठा मजकूर म्हणजे किमान 18pt किंवा 14pt बोल्ड.

FAQ

WCAG कॉन्ट्रास्ट तपासणीबद्दल सामान्य प्रश्न.

AA आणि AAA मध्ये काय फरक आहे?

AA ही बहुतेक वेब सामग्रीसाठी किमान अनुरूपता पातळी आहे. यासाठी सामान्य मजकुरासाठी किमान 4.5:1 आणि मोठ्या मजकुरासाठी 3:1 कॉन्ट्रास्ट गुणोत्तर आवश्यक आहे. AAA ही एक उच्च मानक आहे जी सामान्य मजकुरासाठी 7:1 आणि मोठ्या मजकुरासाठी 4.5:1 आवश्यक असते. तुम्ही बातमी साइटवरील मुख्य सामग्रीसारख्या महत्त्वाच्या मजकुरासाठी AAA लक्ष्य करू शकता, तर व्यापक डिझाइनसाठी AA वापरू शकता. ब्रँड रंगांसह सर्वत्र AAA पूर्ण करणे कठीण असू शकते, म्हणून अनेक संघ सर्वत्र AA साठी प्रयत्न करतात आणि शक्य असेल तेथे मुख्य मजकूर AAA पर्यंत वाढवतात.

WCAG अंतर्गत "मोठा मजकूर" म्हणून काय गणले जाते?

WCAG 2.x मोठा मजकूर सामान्य वजनासाठी किमान 18 पॉइंट (24px) किंवा बोल्ड वजनासाठी 14 पॉइंट (सुमारे 19px) म्हणून परिभाषित करते. फॉन्ट फेसचा भाग असलेली चिन्हे आणि आयकॉन्स समान थ्रेशोल्ड्सचे अनुसरण करतात. तुमच्या UI ला कोणता थ्रेशोल्ड लागू होतो याची खात्री नसल्यास, दोन्ही तपासा — AA Large चा बार कमी आहे (3:1), त्यामुळे बहुतेक रंग जोड्या ज्या AA Normal मध्ये फेल होतात त्या AA Large मध्ये पास होतात जेव्हा मजकूर पुरेसा मोठा असतो.

माझी रंग जोडी AA Large का पास करते पण AA Normal मध्ये फेल होते?

कारण AA Large साठी फक्त 3:1 गुणोत्तर आवश्यक आहे तर AA Normal साठी 4.5:1 आवश्यक आहे. WCAG मोठ्या मजकुरासाठी कमी थ्रेशोल्ड सेट करते कारण मोठी अक्षरे कमी कॉन्ट्रास्टवरही वाचणे सोपे असतात. एक रंग जोडी जी, समजा, 4.0:1 स्कोअर करते ती AA Large (3:1 थ्रेशोल्ड) पास करते पण AA Normal (4.5:1 थ्रेशोल्ड) फेल करते. पांढऱ्या पार्श्वभूमीवर हलक्या ब्रँड रंगांसह हे अत्यंत सामान्य आहे.

मी अॅक्सेसिबिलिटी ऑडिटिंगसाठी फक्त या साधनावर अवलंबून राहू शकतो का?

हे साधन एक गोष्ट तपासते — दोन घन रंगांमधील WCAG 2.x कॉन्ट्रास्ट गुणोत्तर. वास्तविक अॅक्सेसिबिलिटीमध्ये अधिक समाविष्ट आहे: फोकस इंडिकेटर, फॉन्ट आकार आणि वजन, माहिती देण्याचा एकमेव मार्ग म्हणून रंग आणि स्क्रीन रीडर व झूम साधनांसह सुसंगतता. तुमच्या अॅप्लिकेशनच्या अॅक्सेसिबिलिटीचे संपूर्ण चित्र मिळविण्यासाठी ही कॉन्ट्रास्ट तपासणी इतर ऑडिट पद्धतींसह वापरा.

इनपुट कोणते रंग फॉरमॅट स्वीकारते?

तुम्ही 3, 4, 6 किंवा 8-अंकी हेक्स कोड (# सह किंवा शिवाय), लिगसी स्वल्पविराम सिंटॅक्स किंवा आधुनिक स्पेस-विभक्त सिंटॅक्समध्ये rgb() आणि rgba() मूल्ये, कोणत्याही मानक ह्यू युनिटसह (deg, rad, grad, turn) hsl() आणि hsla(), hsv(), hwb() आणि CSS कलर मॉड्यूल लेव्हल 4 स्पेकमधील कोणतेही 150 नामांकित CSS रंग पेस्ट करू शकता. रंग पूर्णपणे तुमच्या उपकरणावर रूपांतरित केला जातो.