நிற மாறுபாடு சரிபார்ப்பி: WCAG AA, AAA விகிதம் – இலவசம்
இலவசம், பதிவு தேவையில்லை, உங்கள் உலாவியிலேயே வேலை செய்யும். உரை, பின்னணி நிறங்களை உள்ளிட்டு WCAG மாறுபாட்டு விகிதத்தையும் AA, AAA முடிவுகளையும் பாருங்கள். தோற்றால், அருகிலுள்ள தேர்ச்சி நிறத்தைக் கிளிக் செய்யுங்கள்.
பெரிய உரை இப்படித் தெரியும்
சாதாரண முதன்மை உரை இப்படித் தெரியும். விரைவான பழுப்பு நரி சோம்பேறி நாயின் மேல் குதிக்கிறது, தலைப்பு போன்ற சிறிய அச்சு அதன் கீழே இருக்கும்.
சிறிய உரை: 14px தலைப்பு.
பொத்தான்- சாதாரண உரை, AA: தேறியதுமுதன்மை உரை, குறைந்தது 4.5:1
- சாதாரண உரை, AAA: தேறியதுமேம்பட்டது, குறைந்தது 7:1
- பெரிய உரை, AA: தேறியது18pt+, அல்லது தடித்த 14pt+, குறைந்தது 3:1
- பெரிய உரை, AAA: தேறியதுமேம்பட்டது, குறைந்தது 4.5:1
- ஐகான்களும் கட்டுப்பாடுகளும், AA: தேறியதுபொத்தான்கள், எல்லைகள், விளக்கப்பட கோடுகள்: 3:1
WCAG 2 மாறுபாட்டு சூத்திரத்தைப் பயன்படுத்துகிறது. விகிதங்கள் ஒருபோதும் மேலே வட்டமிடப்படுவதில்லை; எனவே 4.49:1 என்பது 4.5:1 ஆக எண்ணப்படாது. உங்கள் சாதனத்திலேயே சரிபார்க்கப்படுகிறது.
நிற மாறுபாடு சரிபார்ப்பி ஏன் பயன்படுத்த வேண்டும்
- 100% இலவசம்
- விரும்பும் அளவுக்குப் பயன்படுத்தலாம். பதிவு தேவையில்லை, வாட்டர்மார்க் இல்லை, எதையும் நிறுவ வேண்டியதில்லை.
- வடிவமைப்பிலேயே தனிப்பட்டது
- நீங்கள் தட்டச்சு செய்வது உங்கள் உலாவியிலேயே இருக்கும், ஒருபோதும் எங்களுக்கு அனுப்பப்படாது.
- எந்தச் சாதனத்திலும் வேலை செய்யும்
- Windows, Mac, Linux, Android மற்றும் iPhone-இல் உங்கள் உலாவியிலேயே இயங்கும். ஆப் தேவையில்லை.
நிற மாறுபாடு சரிபார்ப்பி-ஐ எப்படிப் பயன்படுத்துவது
- உரை நிறம் மற்றும் பின்னணியை HEX, rgb(), hsl() அல்லது navy போன்ற பெயராக உள்ளிடுங்கள், அல்லது வண்ண மாதிரிகளில் தேர்ந்தெடுங்கள். அவற்றை மாற்ற “இடமாற்று” பயன்படுத்துங்கள்.
- மாறுபாட்டு விகிதத்தையும் ஐந்து முடிவுகளையும் படியுங்கள்: சாதாரண உரை AA மற்றும் AAA, பெரிய உரை AA மற்றும் AAA, ஐகான்கள் மற்றும் கட்டுப்பாடுகள்.
- தலைப்புகள், உடல் உரை, சிறிய அச்சு, ஒரு பொத்தான் ஆகியவற்றை உங்கள் நிறங்களில் பார்க்க நேரடி முன்தோற்றத்தைச் சரிபாருங்கள்.
- ஒரு நிலை தோற்றால், “அருகிலுள்ள தேர்ச்சி நிறங்களில்” ஒன்றைக் கிளிக் செய்யுங்கள். அது உங்கள் சாயலைத் தக்கவைத்து, உரை எவ்வளவு ஒளியுடன் அல்லது இருட்டாக உள்ளது என்பதை மட்டுமே மாற்றும்.
அடிக்கடி கேட்கப்படும் கேள்விகள்
எனக்கு என்ன மாறுபாட்டு விகிதம் வேண்டும்?
WCAG AA சாதாரண உரைக்கு 4.5:1, பெரிய உரைக்கும் பொத்தான்கள், எல்லைகள், ஐகான்கள் போன்ற இடைமுகப் பகுதிகளுக்கும் 3:1 கேட்கிறது. AAA சாதாரண உரைக்கு 7:1, பெரிய உரைக்கு 4.5:1 கேட்கிறது.
பெரிய உரை என்றால் என்ன?
குறைந்தது 18 புள்ளி (24px) சாதாரணமாக, அல்லது 14 புள்ளி (ஏறத்தாழ 18.7px) தடித்ததாக.
மாறுபாட்டு விகிதம் எப்படிக் கணக்கிடப்படுகிறது?
WCAG 2 சூத்திரத்தின்படி: ஒவ்வொரு நிறத்தின் ஒப்பு ஒளிர்வு கணக்கிடப்பட்டு, பிரகாசமான நிறத்தின் மதிப்புடன் 0.05 சேர்த்து, இருட்டான நிறத்தின் மதிப்புடன் 0.05 சேர்த்ததால் வகுக்கப்படும். முடிவு 1:1 (மாறுபாடு இல்லை) முதல் 21:1 (வெள்ளையில் கருப்பு) வரை இருக்கும்.
4.49:1 ஏன் தோல்வியடைகிறது?
விகிதங்களை மேல்நோக்கி முழுமையாக்கக் கூடாது என்று WCAG சொல்கிறது; எனவே 4.5:1-க்குக் குறைவான எதுவும் சாதாரண உரைக்கான AA-வைப் பூர்த்தி செய்யாது. இந்தக் கருவி விகிதத்தை ஒருபோதும் மேல்நோக்கி முழுமையாக்குவதில்லை.
தோல்வியடையும் நிறத்தை எப்படிச் சரிசெய்வது?
“அருகிலுள்ள தேர்ச்சி நிறங்கள்” பிரிவின் கீழ், AA-க்கும் AAA-க்கும் உரை நிறத்தை கருவி பரிந்துரைக்கிறது. ஒவ்வொன்றும் உங்கள் சாயலையும் செறிவையும் வைத்திருந்து, ஒளிர்வை மட்டுமே மாற்றுவதால் உங்கள் பிராண்ட் நிறம் அடையாளம் காணக்கூடியதாக இருக்கும். பயன்படுத்த ஒன்றைக் கிளிக் செய்யுங்கள்.
வெளிப்படையான உரை நிறங்களைக் கையாளுமா?
ஆம். rgba(26, 20, 70, 0.6) போன்ற ஊடுருவும் உரை நிறம், மாறுபாடு அளக்கப்படுவதற்கு முன் பின்னணியுடன் கலக்கப்படும். பின்னணியின் வெளிப்படைத்தன்மை புறக்கணிக்கப்பட்டு, அது திடமானதாகக் கருதப்படும்.
பொத்தான்களுக்கும் ஐகான்களுக்கும் மாறுபாடு தேவையா?
ஆம். இடைமுகப் பகுதிகளுக்கும் (பொத்தான் எல்லைகள், படிவ புலங்கள், ஐகான்கள், விளக்கப்பட கோடுகள்) அவற்றுக்கு அருகிலுள்ள நிறங்களுக்கும் இடையே WCAG 2.1 3:1 கேட்கிறது. “ஐகான்களும் கட்டுப்பாடுகளும்” முடிவு அதைச் சரிபார்க்கிறது.
தேர்ச்சி பெற்றால் என் தளம் அணுகக்கூடியது என்றாகுமா?
இந்த ஜோடி நிறங்கள் WCAG மாறுபாட்டு விதியைப் பூர்த்தி செய்கின்றன என்று மட்டுமே பொருள். அணுகல்தன்மை உரை அளவு, கவன நிலைகள், மாற்று உரை, விசைப்பலகைப் பயன்பாடு போன்ற பலவற்றை உள்ளடக்கும்; எனவே இதை பல சோதனைகளில் ஒன்றாகக் கருதுங்கள்.
நிற மாறுபாடு சரிபார்ப்பி இலவசமா?
ஆம். இது இலவசமாகப் பயன்படுத்தலாம், பதிவு தேவையில்லை, எதையும் நிறுவ வேண்டியதில்லை.
உதவி மற்றும் வழிகாட்டிகள் (ஆங்கிலத்தில்)
- The 60-30-10 Color Rule for Websites and Slides (Free)The 60-30-10 rule splits a design into a dominant colour, a secondary and an accent. Use it on web pages and slides with HEX codes and a free palette generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Color Theory Basics: The Wheel and Color Schemes (Free)The colour wheel, hue, saturation and lightness, and complementary, analogous, triadic and monochromatic schemes, with HEX examples from a free tool.
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
தொடர்புடைய கருவிகள்
- HEX முதல் RGB வண்ண மாற்றிவண்ணக் குறியீட்டை ஒட்டுங்கள்; HEX, RGB, HSL, HSV, CMYK ஒரே நேரத்தில் கிடைக்கும். ஒவ்வொன்றுக்கும் நகல் பொத்தான் உண்டு.
- நிறத் தட்டு உருவாக்கிஇடைவெளி விசையை அழுத்தி ஐந்து நிறத் தட்டை உருவாக்குங்கள்; பிடித்த நிறங்களைப் பூட்டி, உங்கள் நிறத்திலிருந்தும் கலவைகளைப் பெறுங்கள். 11 நிழல்கள், CSS, Tailwind, JSON அல்லது HEX ஆக ஏற்றுமதி.
- நிறப் பெயர் கண்டறிவிHEX, RGB அல்லது HSL குறியீட்டை ஒட்டுங்கள்; அருகிலுள்ள CSS நிறப் பெயர்களையும் “அடர், துடிப்பான நீலம்” போன்ற விளக்கத்தையும் பாருங்கள். 148 நிறங்களில் தேடி, பெயரை நகலெடுக்கலாம்.