રંગ કોન્ટ્રાસ્ટ ચેકર

તમારા રંગો ચકાસો

ટેક્સ્ટ વાંચી શકાય તેવા માટે WCAG એક્સેસિબિલિટી ધોરણોને પૂર્ણ કરે છે તે સુનિશ્ચિત કરવા માટે રંગ સંયોજનોનું પરીક્ષણ કરો.

કોન્ટ્રાસ્ટ

લખાણનું પરિણામ

સારો

તુલના: #FFFFFF પર #8631C3

લખાણ

16px, નિયમિત (400)

સાધારણ લખાણ તરીકે ગણાશે.

AA (WCAG 1.4.3): ઓછામાં ઓછું 4.5:1
પાસ
AAA (WCAG 1.4.6): ઓછામાં ઓછું 7:1
0.53 વધુ જરૂરી છે
નિષ્ફળ

UI ઘટકો અને ગ્રાફિક્સ

આઈકન, ઇનપુટ બોર્ડર, ફોકસ સૂચક અને ઇન્ટરફેસ ઉપયોગ કરવા માટે જોવાની જરૂરિયાત હોય તેવા અન્ય ભાગો.

AA (WCAG 1.4.11): ઓછામાં ઓછું 3:1
પાસ

આ કેવી રીતે ચેક થાય છે

તુલના કરાયેલા રંગો (બ્લેન્ડ કર્યા પછી): લખાણ #FFFFFF પર બેકગ્રાઉન્ડ #8631C3
સાપેક્ષ લ્યુમિનેન્સ: લખાણ 1.0000, બેકગ્રાઉન્ડ 0.1120
સૂત્ર: (L1 + 0.05) / (L2 + 0.05) જ્યાં L1 હલકા રંગની લ્યુમિનેન્સ છે અને L2 ગાઢ રંગની લ્યુમિનેન્સ છે.
સચોટ ગુણોત્તર: 6.4794 થી 1, દર્શાવેલું 6.47 થી 1. દર્શાવેલ કિંમત કાપીને બતાવવામાં આવે છે, રાઉન્ડ કરવામાં આવતી નથી, તેથી તે વાસ્તવિકતા કરતાં ક્યારેય સારી દેખાતી નથી. સચોટ કિંમતની જ જરૂરિયાત સાથે સરખામણી થાય છે.

લેખનો કદ: 16px, નિયમિત (400)

સાધારણ લખાણ તરીકે ગણાશે. મોટા લખાણ માટે ઓછામાં ઓછું 24px (18pt) જોઈએ, અથવા જો બોલ્ડ હોય (વજન 700 અથવા વધુ) તો ઓછામાં ઓછું 18.67px (14pt). કદ કાપીને બતાવવામાં આવે છે, રાઉન્ડ કરીને નહીં.

માણદંડ

ટેક્સ્ટ રંગ

પૃષ્ઠભૂમિ રંગ

ટેક્સ્ટ કદ (px)

ફોન્ટ વજન

પૂર્વદર્શન શીર્ષક

ઝડપી ભૂરા રંગનો લોમડી આળસુ કૂતરાને કૂદે છે

નાનું ટેક્સ્ટ ઉદાહરણ (12px)

ટેક્સ્ટ

#ffffff

પૃષ્ઠભૂમિ

#8631c3

WCAG ધોરણો

સ્તર AA

સામાન્ય ટેક્સ્ટ માટે 4.5:1 નો લઘુત્તમ કોન્ટ્રાસ્ટ રેશિયો અને મોટા ટેક્સ્ટ માટે 3:1. મોટાભાગની વેબસાઇટ્સ માટે જરૂરી છે.

સ્તર AAA

સામાન્ય ટેક્સ્ટ માટે 7:1 નો વધારાનો કોન્ટ્રાસ્ટ રેશિયો અને મોટા ટેક્સ્ટ માટે 4.5:1. શ્રેષ્ઠ એક્સેસિબિલિટી માટે ભલામણ કરેલ છે.

ટેક્સ્ટ અને પૃષ્ઠભૂમિના રંગોનો કોન્ટ્રાસ્ટ રેશિયો ગણો.

ટેક્સ્ટ અને પૃષ્ઠભૂમિના રંગ માટે કલર પિકરનો ઉપયોગ કરીને રંગ પસંદ કરો અથવા RGB હેક્સાડેસિમલ ફોર્મેટમાં રંગ દાખલ કરો (જેમ કે, #259 અથવા #2596BE). તમે રંગ પસંદ કરવા માટે સ્લાઇડરને સમાયોજિત કરી શકો છો. વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ (WCAG) પાસે દ્રષ્ટિબદ્ધ વપરાશકર્તાઓ માટે ટેક્સ્ટ વાંચી શકાય તેવા છે કે નહીં તે જાણવા માટે એક વિશિષ્ટ માર્ગદર્શિકા છે. આ માપદંડ એક વિશિષ્ટ અલ્ગોરિધમનો ઉપયોગ કરે છે જે રંગ સંયોજનોને સરખામણીય રેશિયોમાં નકશો કરે છે. આ સૂત્રનો ઉપયોગ કરીને, WCAG કહે છે કે ટેક્સ્ટ અને તેની પૃષ્ઠભૂમિ સાથે 4.5:1 રંગ કોન્ટ્રાસ્ટ રેશિયો નિયમિત (બોડી) ટેક્સ્ટ માટે પૂરતો છે, અને મોટા ટેક્સ્ટ (18+ pt નિયમિત, અથવા 14+ pt બોલ્ડ) માટે ઓછામાં ઓછો 3:1 રંગ કોન્ટ્રાસ્ટ રેશિયો હોવો જોઈએ.

મુખ્ય વિશેષતાઓ

રિયલ-ટાઇમ કોન્ટ્રાસ્ટ રેશિયો ગણતરી
WCAG AA & AAA અનુરૂપતા ચકાસણી
સુક્ષ્મ-સુધારણા માટે HSL સ્લાઇડર્સ
એકથી વધુ પૂર્વાવલોકન ફોર્મેટ્સ

અદ્યતન સાધનો

સ્વચાલિત રંગ સુધારણા
ટેક્સ્ટ અને પૃષ્ઠભૂમિ નમૂનાઓ
રંગ નામ શોધ
પરિણામો નિકાસ કરો

વારંવાર પૂછાતા પ્રશ્નો

WCAG AA અનુપાલન માટે સામાન્ય ટેક્સ્ટને ઓછામાં ઓછો 4.5:1 કોન્ટ્રાસ્ટ રેશિયો જોઈએ, જ્યારે મોટા ટેક્સ્ટ (18pt અથવા 14pt બોલ્ડ) માટે 3:1 જોઈએ.

WCAG AAA માં વધુ કોન્ટ્રાસ્ટ રેશિયો જોઈએ: સામાન્ય ટેક્સ્ટ માટે 7:1 અને મોટા ટેક્સ્ટ માટે 4.5:1, જ્યારે AA માં અનુક્રમે 4.5:1 અને 3:1.

ટેક્સ્ટ અથવા બેકગ્રાઉન્ડ રંગને તમારી ડિઝાઇનનો હેતુ જાળવીને ગોઠવવા માટે અમારી સ્વચાલિત સુધારા સુવિધાનો ઉપયોગ કરો, અથવા AA/AAA અનુપાલન માટેના શ્રેષ્ઠ વિસ્તારો દર્શાવતા દૃશ્ય સૂચકો સાથે HSL સ્લાઇડર્સ વડે મેન્યુઅલી રંગ ગોઠવો.

લીલા વિસ્તારો અને AA/AAA માર્કર્સ WCAG અનુપાલન માટેની શ્રેષ્ઠ રેન્જ દર્શાવે છે. દિશા સંકેતો (વધુ આછા તરફ/વધુ ઘેરા તરફ) તમારા હાલના રંગ સંયોજનના આધારે વધુ સારો કોન્ટ્રાસ્ટ મેળવવામાં મદદ કરે છે.

હા, તમે કોઈપણ હેક્સ રંગ કોડ દાખલ કરી શકો છો અથવા કસ્ટમ રંગો પસંદ કરવા માટે રંગ પીકરનો ઉપયોગ કરી શકો છો. URL આપમેળે અપડેટ થાય છે જેથી તમે ચોક્કસ રંગ સંયોજનો શેર કરી શકો.