නොමිලේ WCAG වර්ණ Contrast පරීක්ෂකය
ප්‍රවේශ්‍යතාව සඳහා WCAG AA සහ AAA contrast ප්‍රමිතිවලට වර්ණ දෙකක් ගැළපේදැයි පරීක්ෂා කරන්න. contrast ඉතා අඩු නම් ස්වයංක්‍රීය යෝජනා සමඟ බහු text ප්‍රමාණ සජීව පෙරදසුන.
විශාල ශීර්ෂ පෙළ
මධ්‍යම ශරීර පෙළ (18px) කියවීමට හා අන්තර්ගතයට.
සාමාන්ය ශරීර පෙළ (16px) ඡේදවලට.
කුඩා ශරීර පෙළ (14px) ශීර්ෂාවලිය සහ metadata සඳහා.
contrast අනුපාතය
4.5:1 අවශ්‍යයි · ඔබ සතු 14.63:1
3.0:1 අවශ්‍යයි · ඔබ සතු 14.63:1
7.0:1 අවශ්‍යයි · ඔබ සතු 14.63:1
4.5:1 අවශ්‍යයි · ඔබ සතු 14.63:1
3.0:1 අවශ්‍යයි · ඔබ සතු 14.63:1
ඉක්මන් පූර්ව සකසීම්
WCAG 2.1 contrast මාර්ගෝපදේශ මත පදනම් වේ. විශාල පෙළ = 18pt (24px) සාමාන්ය හෝ 14pt (18.66px) තද. Hex කේත දෙදෙසින්ම යාවත්කාලීන වේ: hex ටයිප් කරන්න හෝ වර්ණයක් තෝරන්න, ආදාන දෙකම සමමුහුර්ත ව පවතී.
පොදු භාවිත
- WCAG සඳහා සඳහා ඔසුරු විමර්ශනය කරන්නඔබගේ සඳහා පෙළ ඡිත්‍ර WCAG AA හෝ AAA සඳහා ඉතිරි ඉටු කිරීම සඳහා.
- ය්‍ර ඡිත්‍ර බෝඩ සඳහා සඳහාඔබගේ ය්‍ර ඡිත්‍ර පැතිකඩු බුද්දිමත් නිර්මාණ සඳහා සඳහා සඳහා පරීක්ෂා කරන්න.
- අඳුරු ප්‍ර්ඇඩ ඡිත්‍ර පැතිකඩු පරීක්ෂා කරන්නඉතිරි පෙළ අඳුරු පසුබිම සඳහා එපිටුවෙ සඳහා අඩු ඉතිරි — ඔබගේ අඳුරු ප්‍ර්ඇඩ පැතිකඩු සඳහා.
- මුද්‍රණ සඳහා ඡිත්‍ර බෝඩතිර, ඉඟුම්, හා මුද්‍රණ සඳහා සඳහා ඉතිරි සඳහා — විශේෂ කිරීම පුරාණ ඔසුරු සඳහා.
- ප්‍රවේශ්‍ය බොත්තම් වර්ණ සැලසුම් කරන්නCTA, ක්රියා බටන් සහ සබැඳි එවායේ පසුතලට WCAG ඉක්මවා යන බව තහවුරු කරන්න.
එය ක්රියා කරන්නේ කෙසේද
Contrast පරීක්ෂාව WCAG 2.1 relative luminance ඇල්ගොරිතමය භාවිතයෙන් සම්පූර්ණයෙන්ම ඔබේ බ්‍රවුසරයේ ක්රියාත්මක වේ — පුස්තකාලයක්, සර්වරයක් නැත, පිරිවිතරයම හරියටම අනුගමනය කරන අතින් ලියන ලද ගණිතය පමණි. ඔබ ටයිප් කරන විට හෝ වර්ණයක් තෝරන විට සෑම ප්‍රතිඵලයක්ම තථ්‍ය කාලීනව යාවත්කාලීන වේ.
- 1Hex ආදානය සහ සාමාන්යකරණයඅගුරු 3ක් (#abc) සහ අගුරු 6ක් (#aabbcc) hex අගයන් දෙකම පිළිගෙන සම්පූර්ණ RGB triples වලට සාමාන්‍යකරණය කෙරේ. වලංගු නොවන ආදානය නිශ්ශබ්දව කළු වර්ණයට default නොවී ක්ෂණිකව ප්‍රතික්ෂේප කෙරේ, එබැවින් නොමඟ යවන pass ප්‍රතිඵලයක් වෙනුවට රතු මායිමක් දිස්වේ.
- 2WCAG luminance ගණනයසෑම වර්ණයක්ම WCAG 2.1 සූත්‍රය භාවිතයෙන් relative luminance එකකට පරිවර්තනය කෙරේ: sRGB channel අගයන් piecewise gamma correction එකකින් (0.03928ට පහළින් 12.92කින් බෙදීම, ඊට ඉහළින් 2.4 බලයට නැංවීම) linearize කර, පසුව 0.2126R + 0.7152G + 0.0722B ලෙස බර ගැසේ.
- 3Contrast අනුපාතය සහ අනුකූලතා පරීක්ෂණContrast අනුපාතය (lighter + 0.05) / (darker + 0.05) ලෙස ගණනය කර WCAG සීමා පහටම එරෙහිව පරීක්ෂා කෙරේ: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), සහ UI components (3:1). සෑම යතුරු තට්ටුවක් සමගම ප්‍රතිඵල යාවත්කාලීන වේ.
- 4Hue-preserving නිවැරදි කිරීමේ යෝජනායුගල WCAG AA අසාර්ථක වන විට, මෙවලම HSL lightness අවකාශය සෙවීම — මුල් lightness එකෙන් දෙපැත්තටම පියවර ගනිමින් — hue සහ saturation එකම තබාගෙන 4.5:1 සමත් වන එක් එක් වර්ණයේ ආසන්නතම variant එක සොයයි. ඔබේ තිරයෙන් කෙලින්ම ඕනෑම වර්ණයක් සාම්පල් කිරීමට EyeDropper API (Chromium) එකද ලබා ගත හැක.
සම්බන්ධ මෙවලම්
වර්ණ අන්ධකාරය Simulator
වර්ණ දෘෂ්ටි ඌනතා ඇති පුද්ගලයින්ට ඔබේ නිර්මාණය කෙසේ පෙනේදැයි දකින්න. Protanopia, deuteranopia, tritanopia, achromatopsia සහ මෘදු anomalies simulate කරයි.
මගේ තිර විභේදනය කුමක්ද
CSS සහ සැබෑ පික්සෙල් වලින් ඔබගේ තිර විභේදනය (screen resolution), කවුළු ප්‍රමාණය, pixel ratio, වර්ණ ගැඹුර, HDR, ස්පර්ශ සහය සහ refresh rate බලන්න, සහ ඒ සියල්ල පිටපත් කරන්න.
මළ පික්සල් පරීක්ෂාව
සම්පූර්ණ තිර කළු, සුදු, රතු, කොළ, නිල් සහ අළු පැහැයන් සමඟ ඔබේ තිරයේ අක්‍රිය හෝ හිරවූ පික්සෙල් පරීක්ෂා කරන්න, තවද අමතර stuck pixel fixer එකක්ද ඇත.