વેબ એક્સેસિબિલિટી (સુગમતા) સુનિશ્ચિત કરવા માટે લખાણ અને તેના બેકગ્રાઉન્ડ વચ્ચે યોગ્ય કોન્ટ્રાસ્ટ હોવો અનિવાર્ય છે. આ કોન્ટ્રાસ્ટ ચેકર ટૂલની મદદથી તમે કોઈપણ લખાણના રંગ અને બેકગ્રાઉન્ડના રંગ વચ્ચેનો કોન્ટ્રાસ્ટ રેશિયો WCAG 2.1 / 2.2 ધોરણો અનુસાર સરળતાથી ચકાસી શકો છો. આ ટૂલ ડિઝાઇનર્સ, ડેવલપર્સ અને કન્ટેન્ટ ટીમોને તેમના ડિજિટલ કન્ટેન્ટની વાંચનક્ષમતા અને એક્સેસિબિલિટી ધોરણોની ચકાસણી કરવામાં મદદ કરે છે.
WCAG 2.1 / 2.2 કોન્ટ્રાસ્ટ ધોરણો અને તેનું મહત્વ
વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ (WCAG) 2.1 અને 2.2 એ હાલમાં વૈશ્વિક સ્તરે સ્વીકૃત કમ્પ્લાયન્સ સ્ટાન્ડર્ડ છે. આ ધોરણો હેઠળ કલર કોન્ટ્રાસ્ટને બે સ્તરોમાં વિભાજિત કરવામાં આવે છે: AA (મધ્યમ સ્તર) અને AAA (ઉચ્ચ સ્તર).
કોન્ટ્રાસ્ટ રેશિયોની ગણતરી 1:1 થી 21:1 ની વચ્ચે થાય છે. 1:1 નો અર્થ એ થાય કે લખાણ અને બેકગ્રાઉન્ડ વચ્ચે કોઈ કોન્ટ્રાસ્ટ નથી (દા.ત. સફેદ પર સફેદ), જ્યારે 21:1 એ સૌથી ઉચ્ચ કોન્ટ્રાસ્ટ દર્શાવે છે (જેમ કે સફેદ બેકગ્રાઉન્ડ પર કાળું લખાણ).
આ ટૂલ મુખ્યત્વે ત્રણ કેટેગરી માટે પરિણામો દર્શાવે છે:
- સામાન્ય લખાણ (Normal text): આ કેટેગરીમાં નાના કદના લખાણનો સમાવેશ થાય છે.
- મોટું લખાણ (Large text): આ કેટેગરીમાં 18pt (આશરે 24px) કે તેથી વધુ કદનું લખાણ, અથવા જો બોલ્ડ હોય તો 14pt (આશરે 18.5px) ના લખાણનો સમાવેશ થાય છે.
- UI અને ગ્રાફિક્સ: આમાં યુઝર ઇન્ટરફેસના ઘટકો અને ગ્રાફિકલ ઓબ્જેક્ટ્સનો સમાવેશ થાય છે.
ઇનપુટ ફોર્મેટ્સ અને ટૂલનો ઉપયોગ
આ ટૂલમાં લખાણ અને બેકગ્રાઉન્ડના રંગો દાખલ કરવા માટે વિવિધ કલર ફોર્મેટ્સનો ઉપયોગ કરી શકાય છે. તમે નીચે આપેલા ફોર્મેટ્સમાં કલર વેલ્યુ દાખલ કરી શકો છો:
- Hex વેલ્યુ: જેમ કે
#1a1a1aઅથવા#ffffff. - RGB વેલ્યુ: જેમ કે
rgb(26, 26, 26)અથવાrgb(255, 255, 255). - HSL વેલ્યુ: રંગોને હ્યુ, સેચ્યુરેશન અને લાઇટનેસના આધારે વ્યાખ્યાયિત કરવા માટે.
ટૂલના પ્રારંભિક સેટઅપમાં લખાણ માટે #4f46e5 અને બેકગ્રાઉન્ડ માટે #ffffff રંગ પૂર્વ-નિર્ધારિત હોય છે, જે 6.29 નો કોન્ટ્રાસ્ટ રેશિયો આપે છે. ટૂલમાં આપેલા સ્વેપ બટનની મદદથી તમે લખાણ અને બેકગ્રાઉન્ડના રંગોને પરસ્પર બદલી શકો છો.
જો તમે અમાન્ય રંગ દાખલ કરશો, તો ટૂલ નીચે મુજબની ભૂલ દર્શાવશે:
- લખાણના રંગ માટે:
#1a1a1a કે rgb(26, 26, 26) જેવો માન્ય લખાણનો રંગ દાખલ કરો. - બેકગ્રાઉન્ડ રંગ માટે:
#ffffff કે rgb(255, 255, 255) જેવો માન્ય બેકગ્રાઉન્ડ રંગ દાખલ કરો.
કોન્ટ્રાસ્ટ રેશિયોના નિયમો અને પરિણામોનું અર્થઘટન
ટૂલ દ્વારા ગણતરી કરાયેલા કોન્ટ્રાસ્ટ રેશિયોના આધારે અલગ-અલગ સ્તરો માટે સફળ (Pass) અથવા અસફળ (Fail) ના પરિણામો નક્કી થાય છે:
| કેટેગરી | AA સ્તર માટે જરૂરી રેશિયો | AAA સ્તર માટે જરૂરી રેશિયો |
|---|---|---|
| સામાન્ય લખાણ (Normal text) | ઓછામાં ઓછો 4.5:1 | ઓછામાં ઓછો 7:1 |
| મોટું લખાણ (Large text) | ઓછામાં ઓછો 3:1 | ઓછામાં ઓછો 4.5:1 |
| UI અને ગ્રાફિક્સ | ઓછામાં ઓછો 3:1 (સિંગલ થ્રેશોલ્ડ) | લાગુ પડતું નથી (કોઈ AA/AAA ભેદ નથી) |
UI અને ગ્રાફિક્સ માટે માત્ર એક જ સિંગલ થ્રેશોલ્ડ (3:1) હોય છે, જેમાં AA કે AAA નો કોઈ અલગ ભેદ હોતો નથી.
તમે પસંદ કરેલા રંગોના આધારે ટૂલ એક અંતિમ ચુકાદો (Verdict) જાહેર કરે છે:
- સામાન્ય લખાણ માટે AA અને AAA બંને પાસ કરે છે. (જ્યારે રેશિયો 7:1 કે તેથી વધુ હોય).
- સામાન્ય લખાણ માટે AA પાસ કરે છે. (જ્યારે રેશિયો 4.5:1 થી 6.9:1 ની વચ્ચે હોય).
- ફક્ત મોટા લખાણ માટે જ AA પાસ કરે છે. (જ્યારે રેશિયો 3:1 થી 4.4:1 ની વચ્ચે હોય).
- AA ન્યૂનતમ કરતાં ઓછું છે — કોન્ટ્રાસ્ટ વધારો. (જ્યારે રેશિયો 3:1 થી ઓછો હોય).
ડેટા પ્રોસેસિંગ અને પ્રાઇવસી
આ ટૂલનો ઉપયોગ કરતી વખતે તમારી પ્રાઇવસી સંપૂર્ણપણે સુરક્ષિત રહે છે. દરેક ટેસ્ટ તમારા બ્રાઉઝરમાં જ રન થાય છે. તમે દાખલ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી. બધી જ ગણતરીઓ સ્થાનિક સ્તરે ક્લાયન્ટ-સાઇડ પર જ પ્રક્રિયા કરવામાં આવે છે.
વારંવાર પૂછાતા પ્રશ્નો (FAQ)
AA અને AAA પરિણામોનો અર્થ શું થાય છે?
મોટાભાગની સાઇટ્સ AA લેવલ મેળવવાનો લક્ષ્ય રાખે છે: સામાન્ય લખાણ માટે ઓછામાં ઓછો 4.5:1 અને મોટા લખાણ માટે 3:1 નો રેશિયો હોવો જરૂરી છે. AAA વધુ કડક છે — સામાન્ય લખાણ માટે 7:1 અને મોટા લખાણ માટે 4.5:1. આ રેશિયો 1:1 (કોઈ કોન્ટ્રાસ્ટ નહીં) થી 21:1 (સફેદ પર કાળું) સુધીનો હોય છે.
મોટું લખાણ (large text) કોને ગણવામાં આવે છે?
18pt (આશરે 24px) કે તેથી વધુ કદનું લખાણ, અથવા જો બોલ્ડ હોય તો 14pt (આશરે 18.5px) નું લખાણ. મોટું લખાણ ઓછા કોન્ટ્રાસ્ટમાં પણ સરળતાથી વાંચી શકાય છે, તેથી તે સામાન્ય લખાણના કડક નિયમોને બદલે 3:1 પર AA અને 4.5:1 પર AAA પાસ કરે છે.
હું કયા કલર ફોર્મેટ્સ દાખલ કરી શકું છું?
#1a1a1a જેવી હેક્સ વેલ્યુ, rgb(26, 26, 26) જેવી RGB વેલ્યુ અથવા HSL વેલ્યુ ટાઈપ કરો — અથવા રંગ પસંદ કરવા માટે કલર બોક્સ પર ક્લિક કરો. લખાણ અને બેકગ્રાઉન્ડના રંગોને પરસ્પર બદલવા માટે સ્વેપ (swap) બટનનો ઉપયોગ કરો.
શું આ WCAG 2 છે કે નવી APCA પદ્ધતિ?
આ ટૂલ WCAG 2.1 / 2.2 ફોર્મ્યુલાનો ઉપયોગ કરે છે, જેનો આજે એક્સેસિબિલિટી નિયમો અને ઓડિટમાં સંદર્ભ લેવામાં આવે છે. APCA એ એક નવી પદ્ધતિ છે જે હજી WCAG 3 માટે ડ્રાફ્ટ થઈ રહી છે — તે આશાસ્પદ છે, પરંતુ હજી સુધી સત્તાવાર સ્ટાન્ડર્ડ નથી, તેથી અહીંના પરિણામોમાં તેનો ઉપયોગ થતો નથી.