What is color contrast ratio and why does it matter?

Color contrast ratio measures the luminance difference between foreground text and its background, on a scale from 1:1 (identical colors) to 21:1 (black on white). It matters for accessibility: users with low vision, color blindness, or viewing screens in bright environments need sufficient contrast to read text. WCAG 2.1 defines minimum contrast ratios for accessible web content — failing contrast standards creates legal risk and excludes a significant portion of users.

What are the WCAG contrast ratio requirements?

WCAG 2.1 defines two levels: AA (minimum, legally required in many jurisdictions) and AAA (enhanced). For normal text (under 18pt regular or 14pt bold): AA requires 4.5:1, AAA requires 7:1. For large text (18pt+ regular or 14pt+ bold): AA requires 3:1, AAA requires 4.5:1. UI components and graphical objects require 3:1 against adjacent colors (AA). Text over images must meet contrast requirements against the background portion directly behind the text.

How is the WCAG contrast ratio calculated?

WCAG contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 the darker's. Relative luminance (L) is computed from linearized RGB values: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where each channel is linearized (channel ≤ 0.04045 ? channel/12.92 : ((channel+0.055)/1.055)^2.4). This formula accounts for human perception, where green contributes more to perceived brightness than red or blue.

What tools can I use to check color contrast beyond a web tool?

Browser extensions: Axe DevTools, WAVE, Colour Contrast Analyser (free desktop app by TPGi). VS Code: axe Accessibility Linter, Webhint. Figma plugins: Contrast, A11y — Color Contrast Checker. Chrome DevTools: Accessibility panel highlights contrast issues. Command line: @adobe/leonardo for automated palette generation that meets contrast requirements. For automated testing: @axe-core/playwright, jest-axe run contrast checks as part of your CI pipeline.

रंग विरोधाभास गणक

नमुना संयोजना

अग्रभागाचा रंग (मजकूर)

पार्श्वभूमीचा रंग

तांत्रिक तपशील

रंग कॉन्ट्रास्ट कॅल्क्युलेटर कसा कार्य करतो

हे टूल काय करते

रंग कॉन्ट्रास्ट कॅल्क्युलेटर अग्रभूमी आणि पार्श्वभूमी रंगांमधील कॉन्ट्रास्ट गुणोत्तर मोजतो, जेणेकरून मजकूर Web Content Accessibility Guidelines (WCAG) मानकांना पूरक आहे की नाही हे ठरवता येते. हे प्रवेशयोग्यता चाचणी साधन WCAG कॉन्ट्रास्ट गुणोत्तर सूत्र वापरून दोन रंगांमधील प्रकाशमानतेचा (luminance) फरक मोजते, ज्यात फिकट रंगाची सापेक्ष प्रकाशमानता गडद रंगाशी तुलना केली जाते. तुमच्या मजकूर रंगांनी WCAG AA किंवा AAA मानके पूर्ण केली आहेत का हे तपासायचे असल्यास, हा कॅल्क्युलेटर तुमच्या रंग संयोजनांमुळे दृश्य अडचणी असलेल्या वापरकर्त्यांसाठी प्रवेशयोग्यता आहे की नाही याबद्दल त्वरित अभिप्राय देतो. हे साधन सामान्य मजकूर (AA साठी 4.5:1 आणि AAA साठी 7:1 आवश्यक) आणि मोठा मजकूर (AA साठी 3:1 आणि AAA साठी 4.5:1 आवश्यक) दोन्हीचे मूल्यांकन करते, ज्यामुळे तुमची डिझाइन्स प्रवेशयोग्यता नियमांचे पालन करतात आणि सर्व वापरकर्त्यांसाठी वाचनीय सामग्री देतात याची खात्री होते.

डेव्हलपरसाठी सामान्य वापर प्रकरणे

विकसक कमी दृष्टी किंवा रंगांधत्व असलेल्या वापरकर्त्यांसाठी पार्श्वभूमी रंगांवर मजकूर वाचनीय राहतो याची खात्री करण्यासाठी, प्रवेशयोग्य वेब अ‍ॅप्लिकेशन्स तयार करताना रंग कॉन्ट्रास्ट कॅल्क्युलेटर वापरतात. WCAG अनुपालन तपासक UI डिझाइन करताना, डिझाइन सिस्टीम्स तयार करताना, किंवा विद्यमान वेबसाइट्सचे प्रवेशयोग्यता मानकांसाठी ऑडिट करताना अत्यावश्यक असतो. अनेक डिझायनर रंगयोजना अंतिम करण्यापूर्वी कॉन्ट्रास्ट गुणोत्तरांची पडताळणी करतात, विशेषतः ब्रँड रंगांसोबत काम करताना जे नैसर्गिकरित्या पुरेसा कॉन्ट्रास्ट देत नाहीत. प्रवेशयोग्यता तपासक डार्क मोड थीम्स अंमलात आणताना मदत करतो, कारण हलक्या आणि गडद रंगयोजनांमध्ये स्विच करताना मजकूर वाचनीय राहतो याची खात्री होते. फ्रंटएंड विकसक हे साधन CSS रंग निवडींची पडताळणी करण्यासाठी, डिझाइन मॉकअप्समधील रंग संयोजनांची चाचणी करण्यासाठी, किंवा Section 508 आणि ADA आवश्यकतांचे पालन सुनिश्चित करण्यासाठी वापरतात. कॉन्ट्रास्ट गुणोत्तर कॅल्क्युलेटर प्रवेशयोग्य फॉर्म्स, नेव्हिगेशन मेन्यूज, किंवा जिथे मजकूर वाचनीयता अत्यंत महत्त्वाची आहे अशा कोणत्याही इंटरफेस घटकासाठी उपयुक्त ठरतो.

डेटा फॉरमॅट्स, प्रकार किंवा व्हेरिएंट्स

रंग कॉन्ट्रास्ट कॅल्क्युलेटर विविध रंग इनपुट फॉरमॅट्स स्वीकारतात, ज्यात हेक्साडेसिमल कोड्स (#RRGGBB), RGB मूल्ये (rgb(r, g, b)), HSL मूल्ये (hsl(h, s%, l%)) आणि CSS रंग नावे यांचा समावेश होतो. हे साधन WCAG 2.1 सूत्र वापरून कॉन्ट्रास्ट गुणोत्तर मोजते, जे रंगांना सापेक्ष प्रकाशमानता मूल्यांमध्ये रूपांतरित करून गणिती तुलना करते. WCAG मानके दोन अनुपालन स्तर परिभाषित करतात: Level AA ला सामान्य मजकूरासाठी 4.5:1 आणि मोठ्या मजकूरासाठी 3:1 आवश्यक असते, तर Level AAA ला सामान्य मजकूरासाठी 7:1 आणि मोठ्या मजकूरासाठी 4.5:1 आवश्यक असते. मोठा मजकूर म्हणजे 18pt (24px) नियमित वजन किंवा 14pt (18.5px) ठळक वजन असा परिभाषित केला आहे. कॅल्क्युलेटर सामान्यतः प्रत्येक WCAG स्तरासाठी पास/फेल निर्देशक देतो, अचूक कॉन्ट्रास्ट गुणोत्तर दाखवतो, आणि प्रवेशयोग्यता मानके पूर्ण करणारे पर्यायी रंग सुचवू शकतो. काही साधने UI घटक, ग्राफिक्स आणि मजकूर नसलेली सामग्री यांसाठीही कॉन्ट्रास्ट मोजतात, ज्यासाठी 3:1 कॉन्ट्रास्ट गुणोत्तर आवश्यक असते.

सामान्य चुका आणि एज केसेस

रंग कॉन्ट्रास्ट कॅल्क्युलेटर वापरताना, लक्षात ठेवा की कॉन्ट्रास्ट गुणोत्तर प्रकाशमानता मूल्यांवर आधारित मोजले जाते, जाणवलेल्या उजेडावर नाही; त्यामुळे दिसायला सारखे वाटणारे रंगही स्वीकार्य कॉन्ट्रास्ट गुणोत्तर देऊ शकतात. हे साधन कॉन्ट्रास्ट गणिती पद्धतीने मोजते, पण प्रत्यक्ष वाचनीयतेवर फॉन्ट वजन, फॉन्ट आकार, ओळीतील अंतर, आणि पार्श्वभूमीवरील पॅटर्न्स किंवा प्रतिमा यांचा परिणाम होऊ शकतो. WCAG AA पास झाले म्हणजे तुमचा मजकूर सर्वांसाठी वाचनीय आहे असे गृहित धरू नका; काही वापरकर्त्यांना किमान मानकांपेक्षा जास्त कॉन्ट्रास्ट गुणोत्तरांची गरज असू शकते. सजावटीचा मजकूर, लोगो आणि निष्क्रिय UI घटक यांसाठी कॉन्ट्रास्ट आवश्यकता वेगळ्या असतात, आणि त्यांना कमी कॉन्ट्रास्ट आवश्यकता लागू होऊ शकतात याची जाणीव ठेवा. कॅल्क्युलेटर मजकूर सावल्या, आउटलाईन्स किंवा वाचनीयता सुधारू शकणारे इतर दृश्य परिणाम विचारात घेत नाही. मॉनिटर कॅलिब्रेशन, सभोवतालचे प्रकाशमान आणि वैयक्तिक दृष्टी क्षमता जाणवलेल्या कॉन्ट्रास्टवर परिणाम करू शकतात, म्हणून तुमच्या प्रत्यक्ष डिझाइन्सची वास्तविक परिस्थितीत नेहमी चाचणी करा. कॉन्ट्रास्ट हा प्रवेशयोग्यतेचा फक्त एक भाग आहे; फॉन्ट निवड, अंतर आणि सामग्रीची रचना देखील वाचनीयतेवर परिणाम करतात.

कोडच्या तुलनेत हे टूल कधी वापरावे

जलद डिझाइन पडताळणी, स्वतंत्र रंग संयोजनांची चाचणी, किंवा डिझाइन प्रक्रियेदरम्यान त्वरित अभिप्राय हवा असताना ब्राउझर-आधारित रंग कॉन्ट्रास्ट कॅल्क्युलेटर वापरा. ही साधने प्रवेशयोग्यता ऑडिटिंग, हितधारकांना डेमो दाखवणे, किंवा अंगभूत कॉन्ट्रास्ट तपासणी नसलेल्या डिझाइन साधनांसोबत काम करताना आदर्श आहेत. प्रॉडक्शन अ‍ॅप्लिकेशन्स आणि स्वयंचलित प्रवेशयोग्यता चाचणीसाठी, axe-core, Pa11y किंवा Lighthouse यांसारख्या साधनांचा वापर करून तुमच्या विकास वर्कफ्लोमध्ये कॉन्ट्रास्ट तपासणी एकत्रित करा, जी संपूर्ण पृष्ठांची प्रोग्रामॅटिक चाचणी करू शकतात. कोड-आधारित उपाय रंग संयोजनांचे बॅच प्रोसेसिंग, डिझाइन सिस्टीम्सची स्वयंचलित चाचणी, आणि सतत प्रवेशयोग्यता निरीक्षणासाठी CI/CD पाइपलाइन्समध्ये एकत्रीकरण सक्षम करतात. ब्राउझर साधने परस्परसंवादी चाचणी आणि शिक्षणात उत्कृष्ट असतात, तर प्रोग्रामॅटिक उपाय प्रणालीबद्ध, पुनरावृत्तीयोग्य प्रवेशयोग्यता पडताळणी देतात. दोन्ही पद्धती वापरण्याचा विचार करा: डिझाइन एक्सप्लोरेशनसाठी ब्राउझर साधने आणि सर्वसमावेशक प्रवेशयोग्यता ऑडिटिंगसाठी कोड-आधारित साधने.