रंग कॉन्ट्रास्ट तपासक: WCAG AA आणि AAA गुणोत्तर – मोफत
मोफत, साइन-अप नाही, तुमच्या ब्राउझरमध्ये चालते. मजकूर रंग आणि पार्श्वभूमी रंग टाका आणि WCAG कॉन्ट्रास्ट गुणोत्तर तसेच AA आणि AAA साठी पास किंवा नापास निकाल मिळवा. नापास झाल्यास जवळचा पास रंग दाबा.
मोठा मजकूर असा दिसतो
साधा मुख्य मजकूर असा दिसतो. पटकन उडी मारणारा तपकिरी कोल्हा आळशी कुत्र्यावरून उडी मारतो, आणि कॅप्शनसारखी छोटी अक्षरे खाली असतात.
छोटा मजकूर: 14px कॅप्शन.
बटण- साधा मजकूर, AA: उत्तीर्णमुख्य मजकूर, किमान 4.5:1
- साधा मजकूर, AAA: उत्तीर्णउच्च दर्जा, किमान 7:1
- मोठा मजकूर, AA: उत्तीर्ण18pt+, किंवा ठळक 14pt+, किमान 3:1
- मोठा मजकूर, AAA: उत्तीर्णउच्च दर्जा, किमान 4.5:1
- चिन्हे आणि नियंत्रणे, AA: उत्तीर्णबटणे, किनारी, चार्ट रेषा: 3:1
WCAG 2 कॉन्ट्रास्ट सूत्र वापरले जाते. गुणोत्तरे कधीही वरच्या दिशेने पूर्णांकात केली जात नाहीत, त्यामुळे 4.49:1 हे 4.5:1 मानले जात नाही. तपासणी तुमच्या डिव्हाइसवर होते.
रंग कॉन्ट्रास्ट तपासक का वापरावे
- 100% मोफत
- हवे तितक्या वेळा वापरा. साइन-अप नाही, वॉटरमार्क नाही, काहीही इन्स्टॉल करण्याची गरज नाही.
- डिझाइननुसार खाजगी
- तुम्ही टाइप केलेला मजकूर तुमच्या ब्राउझरमध्येच राहतो आणि तो आमच्यापर्यंत कधीही पाठवला जात नाही.
- कोणत्याही उपकरणावर चालते
- Windows, Mac, Linux, Android आणि iPhone वर तुमच्या ब्राउझरमध्ये चालते. कोणत्याही अ‍ॅपची गरज नाही.
रंग कॉन्ट्रास्ट तपासक कसे वापरावे
- मजकुराचा रंग आणि पार्श्वभूमी HEX, rgb(), hsl() किंवा नेव्ही सारख्या नावाने टाका, किंवा रंगपट्ट्यांमधून निवडा. उलट करण्यासाठी अदलाबदल करा वापरा.
- कॉन्ट्रास्ट गुणोत्तर आणि पाच निकाल वाचा: सामान्य मजकूर AA आणि AAA, मोठा मजकूर AA आणि AAA, आणि चिन्हे आणि नियंत्रणे.
- शीर्षके, मुख्य मजकूर, लहान छापील मजकूर आणि बटण तुमच्या रंगांत पाहण्यासाठी थेट पूर्वावलोकन तपासा.
- एखादी पातळी नापास झाल्यास, पास होणाऱ्या जवळच्या रंगांपैकी एकावर दाबा. ते तुमची छटा टिकवते आणि मजकूर किती फिकट किंवा गडद आहे तेवढेच बदलते.
वारंवार विचारले जाणारे प्रश्न
मला किती कॉन्ट्रास्ट गुणोत्तर हवे?
WCAG AA ला सामान्य मजकुरासाठी 4.5:1 आणि मोठ्या मजकुरासाठी तसेच बटणे, किनारी आणि चिन्हांसारख्या इंटरफेस भागांसाठी 3:1 लागते. AAA ला सामान्य मजकुरासाठी 7:1 आणि मोठ्या मजकुरासाठी 4.5:1 लागते.
मोठा मजकूर कशाला म्हणतात?
नियमित वजनाचा किमान 18 pt (24px), किंवा ठळक 14 pt (सुमारे 18.7px).
कॉन्ट्रास्ट गुणोत्तर कसे काढले जाते?
WCAG 2 सूत्राने: प्रत्येक रंगाची सापेक्ष चमक काढली जाते, मग उजळ रंगाच्या चमकेत 0.05 मिळवून ती गडद रंगाच्या चमकेत 0.05 मिळवून भागली जाते. निकाल 1:1 (कॉन्ट्रास्ट नाही) ते 21:1 (पांढऱ्यावर काळा) असा असतो.
4.49:1 नापास का?
WCAG म्हणते गुणोत्तर वर पूर्णांक करू नये, त्यामुळे 4.5:1 पेक्षा कमी काहीही सामान्य मजकुरासाठी AA पूर्ण करत नाही. हे साधन गुणोत्तर कधीच वर पूर्णांक करत नाही.
नापास रंग कसा दुरुस्त करू?
पास होणारे जवळचे रंग या विभागात, साधन AA साठी आणि AAA साठी एक मजकूर रंग सुचवते. प्रत्येक तुमची छटा आणि संपृक्तता टिकवतो आणि फक्त लाइटनेस बदलतो, त्यामुळे तुमचा ब्रँड रंग ओळखता येतो. वापरण्यासाठी एकावर दाबा.
पारदर्शक मजकूर रंग हाताळते का?
होय. rgba(26, 20, 70, 0.6) सारखा पारदर्शक मजकूर रंग, कॉन्ट्रास्ट मोजण्यापूर्वी पार्श्वभूमीत मिसळला जातो. पार्श्वभूमीची पारदर्शकता दुर्लक्षित केली जाते आणि ती घन मानली जाते.
बटणे आणि चिन्हांनाही कॉन्ट्रास्ट हवा का?
होय. WCAG 2.1 इंटरफेस भागांसाठी (बटण किनारी, फॉर्म फील्ड, चिन्हे, चार्ट रेषा) आणि शेजारील रंगांदरम्यान 3:1 मागते. चिन्हे आणि नियंत्रणे हा निकाल ते तपासतो.
पास म्हणजे माझी साइट सुलभ आहे का?
याचा अर्थ एवढाच की ही रंगजोडी WCAG कॉन्ट्रास्ट नियम पूर्ण करते. सुलभता त्याहून बरेच काही व्यापते, जसे मजकुराचा आकार, फोकस स्थिती, alt मजकूर आणि कीबोर्ड वापर, त्यामुळे याकडे अनेक तपासण्यांपैकी एक म्हणून पाहा.
रंग कॉन्ट्रास्ट तपासक मोफत आहे का?
हो. वापरणे मोफत आहे, साइन-अप नाही आणि काहीही इन्स्टॉल करावे लागत नाही.
मदत आणि कसे करायचे मार्गदर्शक (इंग्रजीत)
- The 60-30-10 Color Rule for Websites and Slides (Free)The 60-30-10 rule splits a design into a dominant colour, a secondary and an accent. Use it on web pages and slides with HEX codes and a free palette generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Color Theory Basics: The Wheel and Color Schemes (Free)The colour wheel, hue, saturation and lightness, and complementary, analogous, triadic and monochromatic schemes, with HEX examples from a free tool.
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
संबंधित साधने
- HEX ते RGB रंग रूपांतरककोणताही रंग कोड चिकटवा आणि HEX, RGB, HSL, HSV व CMYK एकाच वेळी मिळवा. पारदर्शकता आणि मजकुराची वाचनीयता तपासा.
- रंग पॅलेट जनरेटरस्पेस बार एकदा दाबून पाच रंगांचे पॅलेट तयार करा, तुम्हाला आवडणारे रंग लॉक करा, किंवा तुमच्या स्वतःच्या बेस रंगावरून रंगसंगती तयार करा: समीप, पूरक, त्रिकोणी आणि आणखी. प्रत्येक रंगाच्या 11 छटा पहा आणि CSS व्हेरिएबल्स, Tailwind, JSON किंवा HEX म्हणून निर्यात करा.
- रंग नाव शोधकHEX, RGB किंवा HSL कोड पेस्ट करा, किंवा रंग निवडा, आणि त्याची सर्वात जवळची CSS रंग नावे, सर्वात जवळचे आधी, सोप्या वर्णनासह पहा, जसे "गडद, तीव्र निळा". सर्व 148 नावाच्या रंगांमध्ये शोधा आणि फिल्टर करा, आणि कोणतेही नाव थेट तुमच्या CSS मध्ये कॉपी करा.