मुख्य सामग्रीमा जानुहोस्
LibraTool logoLibraTool

निःशुल्क WCAG रङ कन्ट्रास्ट जाँचकर्ता

दुईवटा रङहरूले पहुँचका लागि WCAG AA र AAA contrast मानकहरू पूरा गर्छन् कि गर्दैनन् जाँच गर्नुहोस्। contrast कम भएमा स्वचालित सुझावहरूका साथ एकाधिक पाठ साइजमा लाइभ प्रिभ्यू।

लोड भएपछि अफलाइन काम गर्छ

ठूलो शीर्षक पाठ

मध्यम मुख्य पाठ (18px) पठन र सामग्रीका लागि।

सामान्य मुख्य पाठ (16px) अनुच्छेदका लागि।

साना मुख्य पाठ (14px) क्याप्सन र मेटाडेटाका लागि।

१४.६३:1

कन्ट्रास्ट अनुपात

✓WCAG AA — सामान्य पाठ

4.5:1 आवश्यक · तपाईंसँग १४.६३:1 छ

✓WCAG AA — ठूलो पाठ

3.0:1 आवश्यक · तपाईंसँग १४.६३:1 छ

✓WCAG AAA — सामान्य पाठ

7.0:1 आवश्यक · तपाईंसँग १४.६३:1 छ

✓WCAG AAA — ठूलो पाठ

4.5:1 आवश्यक · तपाईंसँग १४.६३:1 छ

✓UI कम्पोनेन्ट / ग्राफिकल वस्तुहरू

3.0:1 आवश्यक · तपाईंसँग १४.६३:1 छ

द्रुत पूर्वनिर्धारित

WCAG 2.1 कन्ट्रास्ट दिशानिर्देशमा आधारित। ठूलो पाठ = 18pt (24px) सामान्य वा 14pt (18.66px) बोल्ड। Hex कोडहरू दुवै दिशामा अपडेट हुन्छन्: hex टाइप गर्नुहोस् वा रङ छान्नुहोस्, दुवै इनपुट सिंक रहन्छन्।

सामान्य प्रयोगहरू

  • WCAG अनुपालनको लागि वेब पृष्ठ लेखापरीक्षा गर्नुहोस्आपनो साइटको पाठ रङहरु WCAG AA वा AAA contrast मानहरुको पूरा गरेको सत्यापन गर्नुहोस्।
  • ब्राण्ड रङ संयोजन सत्यापन गर्नुहोस्आपनो ब्राण्ड रङ प्यालेट जोडी पहुँचयोग्य UI डिजाइनको लागि काम गर्दछ भनेर सुनिश्चित गर्न परीक्षा गर्नुहोस्।
  • गहिरो मोड रङ प्यालेट परीक्षा गर्नुहोस्गहिरो पृष्ठभूमिमा हल्का पाठ अझै पनी विफल contrast गर्न सक्छ — आपनो गहिरो मोड प्यालेट जोडीहरु सत्यापन गर्नुहोस्।
  • मुद्रित सामग्रीको लागि रङ संयोजनपोस्टर, संकेत, र मुद्रित सामग्रीहरुलाई पनि पढ्न योग्य contrast आवश्यकता छ — विशेष गरी पुरानो दर्शकहरूको लागि।
  • पहुँचयोग्य बटन रंग डिजाइन गर्नुहोस्CTA, कार्य बटन र लिङ्क तिनीहरूको पृष्ठभूमिको विरुद्ध WCAG पास गर्छन् भनी सुनिश्चित गर्नुहोस्।

यो कसरी काम गर्छ

कन्ट्रास्ट जाँच WCAG 2.1 सापेक्षिक प्रकाशमानता एल्गोरिदम प्रयोग गरी पूर्ण रूपमा तपाईंको ब्राउजरमा चल्छ — कुनै लाइब्रेरी छैन, कुनै सर्भर छैन, स्पेकलाई ठ्याक्कै पछ्याउने हातले लेखिएको गणित मात्र। तपाईंले टाइप गर्दा वा रङ छान्दा हरेक नतिजा वास्तविक समयमा अद्यावधिक हुन्छ।

  1. 1
    Hex इनपुट र सामान्यीकरण
    3-अंक (#abc) र 6-अंक (#aabbcc) दुवै hex मान स्वीकार गरिन्छ र पूर्ण RGB ट्रिपलहरूमा सामान्यीकृत गरिन्छ। अवैध इनपुट तुरुन्तै अस्वीकार गरिन्छ चुपचाप कालोमा डिफल्ट हुनुको सट्टा, त्यसैले भ्रामक पास नतिजाको सट्टा रातो सीमा देखिन्छ।
  2. 2
    WCAG प्रकाशमानता गणना
    हरेक रङलाई WCAG 2.1 सूत्र प्रयोग गरी सापेक्षिक प्रकाशमानतामा रूपान्तरण गरिन्छ: sRGB च्यानल मानहरू पिसवाइज ग्यामा सुधारले लिनियराइज गरिन्छ (0.03928 भन्दा तल 12.92 ले भाग गरेर, त्यसभन्दा माथि 2.4 को घातमा उठाएर), त्यसपछि 0.2126R + 0.7152G + 0.0722B को रूपमा तौल गरिन्छ।
  3. 3
    कन्ट्रास्ट अनुपात र अनुपालन जाँच
    कन्ट्रास्ट अनुपात (lighter + 0.05) / (darker + 0.05) को रूपमा गणना गरिन्छ र सबै पाँच WCAG थ्रेसहोल्डविरुद्ध जाँच गरिन्छ: AA सामान्य पाठ (4.5:1), AA ठूलो पाठ (3:1), AAA सामान्य पाठ (7:1), AAA ठूलो पाठ (4.5:1), र UI कम्पोनेन्ट (3:1)। नतिजाहरू हरेक किस्ट्रोकमा अद्यावधिक हुन्छन्।
  4. 4
    ह्यू-संरक्षण गर्ने सुधार सुझावहरू
    जोडी WCAG AA मा असफल हुँदा, उपकरणले HSL लाइटनेस स्पेसमा खोज्छ — मूल लाइटनेसबाट दुवैतिर बाहिरतिर कदम चाल्दै — हरेक रङको नजिकको भेरियन्ट भेट्टाउन जसले उही ह्यू र स्याचुरेसन राख्दै 4.5:1 पास गर्छ। तपाईंको स्क्रिनबाट सीधै कुनै पनि रङ नमूना लिन EyeDropper API (Chromium) पनि उपलब्ध छ।

सम्बन्धित उपकरणहरू

👁️

वर्णान्धता सिमुलेटर

रङ दृष्टि कमजोरी भएका व्यक्तिहरूलाई तपाईंको डिजाइन कस्तो देखिन्छ हेर्नुहोस्। protanopia, deuteranopia, tritanopia, achromatopsia, र हल्का anomalies सिमुलेट गर्छ।

प्रयास गर्नुहोस्फाइलहरू स्थानीय रहन्छन्
📐

मेरो स्क्रिन रिजोल्युसन के हो

CSS र वास्तविक पिक्सेलहरूमा तपाईंको स्क्रिन रिजोल्युसन, सञ्झ्याल आकार, पिक्सेल अनुपात, रङ गहिराइ, HDR, टच समर्थन र रिफ्रेस दर हेर्नुहोस्, र यो सबै प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
🖥️

डेड पिक्सेल परीक्षण

पूर्ण-स्क्रिन कालो, सेतो, रातो, हरियो, नीलो र खैरो, साथै वैकल्पिक अड्किएको पिक्सेल समाधानकर्ताको साथ डेड वा अड्किएका पिक्सेलहरूको लागि आफ्नो स्क्रिन जाँच्नुहोस्।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू