કોન્ટ્રાસ્ટ ચેકર – Contrast Checker

આ કોન્ટ્રાસ્ટ ચેકર ADA અનુપાલન માટે WCAG અને APCA કલર કોન્ટ્રાસ્ટનું ઓડિટ કરે છે - જે કોઈપણ વેબસાઇટ માટે કલર એક્સેસિબિલિટી ટેસ્ટ છે.

✅ આ કોન્ટ્રાસ્ટ ચેકરમાંથી તમને શું મળશે: - WCAG 2.2 કોન્ટ્રાસ્ટ રેશિયો અને APCA Lc, - પૃષ્ઠ પર પ્રકાશિત મુદ્દાઓ સાથેના તત્વો, - CSS નિયમો જે રંગો ઉત્પન્ન કરે છે, સ્રોત નકશા દ્વારા શોધી કાઢવામાં આવે છે (જો ઉપલબ્ધ હોય તો), - કોન્ટ્રાસ્ટ વિશ્લેષક અને સૂચવેલ વિકલ્પો સાથે બિલ્ટ-ઇન કલર પીકર ટૂલ, - સુધારાઓનું લાઇવ પૂર્વાવલોકન, - CSS માં સુધારાઓની નિકાસ (સ્ત્રોત-સ્થાપિત ટિપ્પણીઓ સાથે). 🔍 એક વેબસાઇટ કલર કોન્ટ્રાસ્ટ ચેકર તરીકે બનાવવામાં આવ્યું છે જે ફક્ત ફ્લેટ બેકગ્રાઉન્ડ જ નહીં - છબીઓ અને ગ્રેડિયન્ટ્સ પર સ્યુડો-સ્ટેટ્સ, શેડો DOM, સમાન-મૂળ iframes અને ટેક્સ્ટ પર ચાલે છે. ⚠️ ડીબગર પરવાનગી જરૂરી છે. આ કોન્ટ્રાસ્ટ ચેકરનું કવરેજ ફક્ત Chrome DevTools પ્રોટોકોલ દ્વારા જ શક્ય છે, જેને 'ડીબગર' પરવાનગીની જરૂર છે. એકવાર જોડાયા પછી, Chrome બધા ટેબ પર એક માહિતી બાર બતાવે છે અને ડિટેચમેન્ટ પર તેને છુપાવતું નથી. ⚡ ખૂબ જ ઑપ્ટિમાઇઝ કરેલ વર્કફ્લો: • રંગ સુલભતા સમસ્યાઓવાળા બધા ઘટકોને એક નજરમાં જુઓ. • કોન્ટ્રાસ્ટ રેશિયો અને ચુકાદાઓની પુનઃગણતરી સાથે, ફેરફારોનું તાત્કાલિક પૂર્વાવલોકન કરો. • સ્ટાઇલશીટ ટેબ પર કસ્ટમ CSS લાગુ કરો; અસરગ્રસ્ત સમસ્યાઓ સૂચિમાં ચિહ્નિત થયેલ છે. • રંગ કોન્ટ્રાસ્ટ મેન્યુઅલી તપાસવા માટે, બિલ્ટ-ઇન કલર પીકર ટૂલનો ઉપયોગ કરો: ફોરગ્રાઉન્ડ સેટ કરવા માટે ડાબું-ક્લિક કરો, બેકગ્રાઉન્ડ માટે જમણું-ક્લિક કરો, અને ગુણોત્તર તરત જ અપડેટ થાય છે. • તમે જે તત્વોને ઠીક કરી રહ્યા છો તે સિવાય બધું છુપાવવા માટે બાકાત ટેબનો ઉપયોગ કરો. 📐 ચુકાદા પાછળના માપદંડ. આ કોન્ટ્રાસ્ટ રેશિયો ચેકર WCAG અને APCA જરૂરિયાતો સામે રંગ સુલભતાનું પરીક્ષણ કરે છે. APCA Lc ને બ્રિજ-PCA થ્રેશોલ્ડ સામે ગ્રેડ કરવામાં આવે છે, જે મેચિંગ WCAG રેશિયો કરતા કડક હોય છે — તેથી બ્રિજ-PCA પાસ હંમેશા WCAG પાસ સૂચવે છે. 🔬 APCA શું છે? APCA (એક્સેસિબલ પર્સેપ્ચ્યુઅલ કોન્ટ્રાસ્ટ અલ્ગોરિધમ) એ એક મોડેલ છે જે લોકો સ્ક્રીન પર ટેક્સ્ટ કેવી રીતે વાંચે છે તે ટ્રેક કરે છે. સમાન wcag રેશિયો સાથે બે રંગ જોડીઓ નોંધપાત્ર રીતે અલગ દેખાઈ શકે છે, અને તેમનો apca Lc (લ્યુમિનન્સ કોન્ટ્રાસ્ટ) પ્રતિબિંબિત કરે છે કે: એક જોડી wcag પાસ કરી શકે છે છતાં વાંચવામાં મુશ્કેલ લાગે છે. આ વેબસાઇટ રંગ ઍક્સેસિબિલિટી ચેકર બંને સંખ્યાઓની ગણતરી કરે છે. 🚧 મર્યાદાઓ: 1. દરેક અન્ય વેબસાઇટ ઍક્સેસિબિલિટી ચેકરની જેમ, આ એક શ્રેષ્ઠ પ્રયાસનો અંદાજ આપે છે, અનુપાલન પ્રમાણપત્ર નહીં. 2. કવરેજ ફક્ત ટેક્સ્ટ-માત્ર છે; નોન-ટેક્સ્ટ્યુઅલ તત્વોની તપાસ (wcag 1.4.11) રોડમેપ પર છે. 3. ક્રોસ-ઓરિજિન આઇફ્રેમ્સ સ્ટેપ ઇન કરવામાં આવતા નથી. ૪. જટિલ પૃષ્ઠભૂમિ અને એનિમેશન મર્યાદિત સંખ્યામાં અવકાશી અને સમયગત બિંદુઓ પર નમૂના લેવામાં આવે છે; સૌથી ખરાબ નમૂનાનો ગુણોત્તર નોંધાયેલ છે પરંતુ હજુ પણ આશાવાદી હોઈ શકે છે; નમૂના લેનારને કલાકૃતિઓ રજૂ કરીને પણ ગેરમાર્ગે દોરી શકાય છે. ૫. ખૂબ જ ગતિશીલ સાઇટ્સ બનાવટી મુદ્દાઓ પેદા કરી શકે છે. 6. આ કલર કોન્ટ્રાસ્ટ ચેકર ઈમેજીસ પર આપમેળે OCR ચલાવતું નથી; તેમાં આપેલા કલર પીકર ટૂલનો ઉપયોગ કરીને અર્થપૂર્ણ ટેક્સ્ટ સાથે ઈમેજીસનું પરીક્ષણ કરો. 🔒 ગોપનીયતા અને પરવાનગીઓ. ▸ સ્થાનિક રીતે ચાલે છે; કોઈ પણ વેબપેજ ડેટા તમારા મશીનમાંથી ક્યારેય બહાર નીકળતો નથી. ▸ 'એક્ટિવટેબ' ફક્ત: જ્યારે તમે ટૂલબાર આઇકોન પર ક્લિક કરો છો ત્યારે વિશ્લેષણ સ્ક્રિપ્ટ દાખલ થાય છે. ▸ શેડો DOM અને iframes માં પ્રવેશવા, CSS સ્ત્રોતો ટ્રેસ કરવા અને જટિલ પૃષ્ઠભૂમિના નમૂના લેવા માટે 'ડિબગર' પરવાનગી જરૂરી છે. 🧮 ચોકસાઈ વિગતો. અર્ધ-પારદર્શક ટેક્સ્ટ અને પૂર્વજ અસ્પષ્ટતાને યોગ્ય રીતે હેન્ડલ કરવામાં આવે છે: લ્યુમિનન્સ માપવામાં આવે તે પહેલાં ફોરગ્રાઉન્ડને તેની વાસ્તવિક પૃષ્ઠભૂમિ પર કમ્પોઝ કરવામાં આવે છે, તેથી રિપોર્ટ કરેલ ગુણોત્તર વપરાશકર્તાઓ ખરેખર જે જુએ છે તે સાથે મેળ ખાય છે. વાઇડ-ગેમટ કલર ફંક્શન્સ - oklch, lab, lch, color(display-p3) - પણ સપોર્ટેડ છે, જ્યારે ગેમટની બહાર હોય ત્યારે sRGB સાથે ક્લેમ્પ્ડ થાય છે. 🎨 છબીઓ અને ગ્રેડિયન્ટ્સ પર ટેક્સ્ટ. મોટાભાગના સમાન ટૂલ્સથી વિપરીત, આ ટૂલ નોન-ફ્લેટ બેકગ્રાઉન્ડ્સ પર હાર માનતું નથી અથવા 'getComputedStyle' / 'CSS.getBackgroundColors' રિપોર્ટ પર વિશ્વાસ કરતું નથી. તે વાસ્તવિક બેકગ્રાઉન્ડ - ઓપેસીટી, બ્લેન્ડ મોડ્સ, રેખીય ગ્રેડિયન્ટ્સ, બેકડ્રોપ-ફિલ્ટર - ને કમ્પોઝ કરવા માટે બ્રાઉઝરના પેઇન્ટ ઓર્ડર પર ચાલે છે અને જ્યારે તે પૂરતું નથી, ત્યારે આ કલર કોન્ટ્રાસ્ટ ટૂલ ટેક્સ્ટના સ્થાન પર રેન્ડર કરેલા પિક્સેલ્સના નમૂના લે છે. ❓ પ્રશ્ન અને જવાબ 📌 WCAG અને APCA હેઠળ એક જ રંગની જોડીને ક્યારેક અલગ અલગ નિર્ણય કેમ મળે છે? ↳ WCAG લ્યુમિનન્સ માપે છે; APCA ગ્રહણશીલ કોન્ટ્રાસ્ટ માપે છે. 4.5:1 પાર કરતી જોડી હજુ પણ બ્રિજ-PCA Lc થ્રેશોલ્ડ - એક કડક મોડેલ - થી ઓછી હોઈ શકે છે. 📌 શું APCA WCAG ને બદલે છે? ↳ ના — APCA એ રિપ્લેસમેન્ટ નથી, પરંતુ એક ઉપયોગી સેકન્ડ ઓપિનિયન છે. આ કોન્ટ્રાસ્ટ ચેકર બંનેનો અહેવાલ આપે છે. 📌 શું હું આ ઍક્સેસિબિલિટી ચેકર વડે સ્થાનિક ફાઇલ અથવા મારા ડેવલપમેન્ટ સર્વરને સ્કેન કરી શકું છું? ↳ હા. એક્સટેન્શન સેટિંગ્સમાં "ફાઇલ URL ને ઍક્સેસ કરવાની મંજૂરી આપો" સક્ષમ કરો. file:// અથવા localhost URL ખોલો અને ટૂલબાર આઇકોન પર ક્લિક કરો. ફક્ત chrome://, Chrome વેબ સ્ટોર અને અન્ય પ્રતિબંધિત યોજનાઓ છોડી દેવામાં આવે છે. 📌 શું આ સાધન ADA પાલનને પ્રમાણિત કરે છે? ↳ ના. તે ફક્ત રંગ વિરોધાભાસ તપાસે છે - સુલભતાનો એક પાસું. ADA પાલન એ એક કાનૂની નિર્ધારણ છે જે ઘણા ધોરણો અને માપદંડો (અર્થશાસ્ત્ર, કીબોર્ડ ઍક્સેસ, વૈકલ્પિક ટેક્સ્ટ, કૅપ્શન્સ અને વધુ) ને આવરી લે છે અને તેનું મૂલ્યાંકન લાયક વ્યાવસાયિક દ્વારા થવું જોઈએ.