अवधारणा और ज्ञान केंद्र
रंग कंट्रास्ट अनुपात कैलकुलेटर और WCAG 2.1 पहुंच योग्यता
रंग कंट्रास्ट अनुपात कैलकुलेटर और WCAG 2.1 पहुंच योग्यता
यह टूल 100% आपके ब्राउज़र में सुरक्षित रूप से चलता है। आपका कोड, टोकन और संवेदनशील डेटा कभी भी बाहरी सर्वर पर अपलोड नहीं होता।
मूल वास्तुकला और गणितीय सूत्र
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. The resulting ratio ranges from 1:1 (no contrast, white on white) to 21:1 (maximum contrast, black on white).
सर्वोत्तम अभ्यास और आवश्यक दिशानिर्देश
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
अक्सर पूछे जाने वाले प्रश्न (FAQ)
What is WCAG Level AAA?
Level AAA is the strictest accessibility standard, requiring a contrast ratio of 7:1 for normal text. It is typically only mandated for highly specialized government or medical software.
Does contrast apply to non text UI elements?
Yes. WCAG 2.1 introduced a 3:1 minimum contrast ratio requirement for 'UI Components and Graphical Objects', meaning your input borders and button backgrounds must also contrast against the page.
Why do my pure gray colors fail contrast?
Pure mid grays (like #808080) sitting on a pure white background usually hover around a 3.9:1 ratio, which strictly fails the 4.5:1 requirement for body text. You must darken them.