WCAG કોન્ટ્રાસ્ટ ચેકર — AA/AAA ઓનલાઇન _

WCAG કોન્ટ્રાસ્ટ ચેક થોડા સરળ પગલાંઓ દ્વારા ચાલે છે. કંઈપણ તમારું બ્રાઉઝર છોડતું નથી.

1. તમે આગળનો અને પૃષ્ઠભૂમિ રંગ દાખલ કરો છો. ટૂલ hex, rgb(), hsl(), અથવા નામવાળા CSS રંગોને તેમના લાલ, લીલા અને વાદળી ચેનલ મૂલ્યોમાં પાર્સ કરે છે.
2. દરેક RGB ચેનલ sRGB ટ્રાન્સફર ફંક્શનનો ઉપયોગ કરીને લિનિયરાઇઝ થાય છે. આ ગામા-એન્કોડેડ ડિસ્પ્લે મૂલ્યોને લિનિયર લાઇટ ઇન્ટેન્સિટીમાં રૂપાંતરિત કરે છે.
3. લિનિયર મૂલ્યો માનવ આંખની દરેક ચેનલ પ્રત્યે સંવેદનશીલતા દ્વારા ભારિત થાય છે — લાલ માટે 0.2126, લીલા માટે 0.7152, વાદળી માટે 0.0722. સરવાળો એ રંગની સાપેક્ષ લ્યુમિનન્સ છે.
4. કોન્ટ્રાસ્ટ રેશિયો (L1 + 0.05) ÷ (L2 + 0.05) છે, જ્યાં L1 હળવા રંગની લ્યુમિનન્સ છે અને L2 ઘાટા રંગની છે. વધારાનો 0.05 શુદ્ધ કાળા માટે ફોર્મ્યુલાને માન્ય રાખે છે.
5. રેશિયો WCAG થ્રેશોલ્ડ સામે તુલના થાય છે: AA સામાન્ય ટેક્સ્ટને ઓછામાં ઓછું 4.5:1 જોઈએ, AA મોટા ટેક્સ્ટને 3:1 જોઈએ, AAA સામાન્ય ટેક્સ્ટને 7:1 જોઈએ, અને AAA મોટા ટેક્સ્ટને 4.5:1 જોઈએ. મોટા ટેક્સ્ટનો અર્થ ઓછામાં ઓછું 18pt અથવા 14pt બોલ્ડ છે.

FAQ

WCAG કોન્ટ્રાસ્ટ ચેકિંગ વિશે સામાન્ય પ્રશ્નો.

AA અને AAA વચ્ચે શું તફાવત છે?

AA એ મોટાભાગની વેબ સામગ્રી માટે લઘુત્તમ અનુપાલન સ્તર છે. તે સામાન્ય ટેક્સ્ટ માટે ઓછામાં ઓછા 4.5:1 અને મોટા ટેક્સ્ટ માટે 3:1 ના કોન્ટ્રાસ્ટ રેશિયોની જરૂર છે. AAA એ એક ઉચ્ચ ધોરણ છે જે સામાન્ય ટેક્સ્ટ માટે 7:1 અને મોટા ટેક્સ્ટ માટે 4.5:1ની જરૂર છે. તમે સમાચાર સાઇટ પર બોડી કૉપિ જેવી મુખ્ય સામગ્રી માટે AAA લક્ષ્ય રાખી શકો છો, જ્યારે વ્યાપક ડિઝાઇન માટે AA નો ઉપયોગ કરી શકો છો. દરેક જગ્યાએ AAA પૂરું કરવું બ્રાન્ડ રંગો સાથે મુશ્કેલ હોઈ શકે છે, તેથી ઘણી ટીમો બધે AA લક્ષ્ય રાખે છે અને જ્યાં શક્ય હોય ત્યાં મુખ્ય ટેક્સ્ટને AAA સુધી વધારે છે.

WCAG હેઠળ શું "મોટા ટેક્સ્ટ" ગણાય છે?

WCAG 2.x મોટા ટેક્સ્ટને સામાન્ય વજન માટે ઓછામાં ઓછું 18 પોઇન્ટ (24px), અથવા બોલ્ડ વજન માટે 14 પોઇન્ટ (લગભગ 19px) તરીકે વ્યાખ્યાયિત કરે છે. ફોન્ટ ફેસનો ભાગ હોય તેવા પ્રતીકો અને આઇકોન સમાન થ્રેશોલ્ડને અનુસરે છે. જો તમને ખાતરી ન હોય કે તમારા UI માટે કયો થ્રેશોલ્ડ લાગુ થાય છે, તો બંને ચેક કરો — AA મોટામાં નીચો બાર (3:1) છે, તેથી મોટાભાગની રંગ જોડીઓ કે જે AA સામાન્યમાં નિષ્ફળ જાય છે તે ખરેખર AA મોટા પાસ કરે છે જ્યારે ટેક્સ્ટ પૂરતો મોટો હોય.

મારી જોડી AA મોટું પાસ કરે છે પરંતુ AA સામાન્યમાં નિષ્ફળ જાય છે — શા માટે?

કારણ કે AA મોટાને માત્ર 3:1 રેશિયોની જરૂર છે જ્યારે AA સામાન્યને 4.5:1ની જરૂર છે. WCAG મોટા ટેક્સ્ટ માટે નીચો થ્રેશોલ્ડ સેટ કરે છે કારણ કે મોટા અક્ષરો ઓછા કોન્ટ્રાસ્ટ સાથે પણ વાંચવામાં સરળ છે. એક રંગ જોડી જે, કહો, 4.0:1 સ્કોર કરે છે તે AA મોટું (3:1 થ્રેશોલ્ડ) પાસ કરે છે પરંતુ AA સામાન્ય (4.5:1 થ્રેશોલ્ડ)માં નિષ્ફળ જાય છે. સફેદ પૃષ્ઠભૂમિ પર આગળના રંગ તરીકે ઉપયોગમાં લેવાતા હળવા બ્રાન્ડ રંગો સાથે આ ખૂબ સામાન્ય છે.

શું હું એક્સેસિબિલિટી ઑડિટિંગ માટે એકલા આ ટૂલ પર આધાર રાખી શકું?

આ ટૂલ એક વસ્તુ ચેક કરે છે — બે નક્કર રંગો વચ્ચેનો WCAG 2.x કોન્ટ્રાસ્ટ રેશિયો. વાસ્તવિક એક્સેસિબિલિટીમાં વધુ સામેલ છે: ફોકસ ઇન્ડિકેટર, ફોન્ટ સાઇઝ અને વજન, માહિતી આપવાના એકમાત્ર માધ્યમ તરીકે રંગ, અને સ્ક્રીન રીડર્સ અને ઝૂમ ટૂલ્સ સાથે સુસંગતતા. તમારી એપ્લિકેશનની એક્સેસિબિલિટીનું સંપૂર્ણ ચિત્ર મેળવવા માટે આ કોન્ટ્રાસ્ટ ચેકનો અન્ય ઑડિટ પદ્ધતિઓ સાથે ઉપયોગ કરો.

ઇનપુટ કયા રંગ ફોર્મેટ સ્વીકારે છે?

તમે 3, 4, 6, અથવા 8-અંકના hex કોડ્સ (# સાથે અથવા વગર), જૂની કોમા સિન્ટેક્સ અથવા આધુનિક સ્પેસ-સેપરેટેડ સિન્ટેક્સમાં rgb() અને rgba() મૂલ્યો, કોઈપણ પ્રમાણભૂત હ્યુ યુનિટ (deg, rad, grad, turn) સાથે hsl() અને hsla(), hsv(), hwb(), અને CSS Color Module Level 4 સ્પેકમાંથી 150 નામવાળા CSS રંગોમાંથી કોઈપણ પેસ્ટ કરી શકો છો. રંગ તમારા ઉપકરણ પર સંપૂર્ણપણે પાર્સ થાય છે.