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 Large కు తక్కువ బార్ (3:1) ఉంది, కాబట్టి AA Normal లో ఫెయిల్ అయ్యే చాలా రంగు జతలు టెక్స్ట్ తగినంత పెద్దగా ఉన్నప్పుడు AA Large లో పాస్ అవుతాయి.

నా జత AA Large లో పాస్ అయి, AA Normal లో ఎందుకు ఫెయిల్ అవుతుంది?

ఎందుకంటే AA Large కు కేవలం 3:1 నిష్పత్తి అవసరం కాగా AA Normal కు 4.5:1 అవసరం. WCAG పెద్ద టెక్స్ట్ కోసం తక్కువ థ్రెషోల్డ్‌ను సెట్ చేస్తుంది, ఎందుకంటే పెద్ద అక్షరాలు తక్కువ కాంట్రాస్ట్‌తో కూడా చదవడం సులభం. ఒక రంగు జత, ఉదాహరణకు, 4.0:1 స్కోర్ చేస్తే అది AA Large (3:1 థ్రెషోల్డ్) పాస్ అవుతుంది కానీ AA Normal (4.5:1 థ్రెషోల్డ్) ఫెయిల్ అవుతుంది. తెలుపు నేపథ్యంపై లేత బ్రాండ్ రంగులతో ఇది చాలా సాధారణం.

యాక్సెసిబిలిటీ ఆడిటింగ్ కోసం నేను ఈ టూల్‌పై మాత్రమే ఆధారపడవచ్చా?

ఈ టూల్ ఒక విషయాన్ని తనిఖీ చేస్తుంది — రెండు ఘన రంగుల మధ్య WCAG 2.x కాంట్రాస్ట్ నిష్పత్తి. నిజమైన యాక్సెసిబిలిటీలో మరిన్ని ఉన్నాయి: ఫోకస్ సూచికలు, ఫాంట్ పరిమాణం మరియు బరువు, సమాచారాన్ని తెలియజేయడానికి ఏకైక మార్గంగా రంగు, మరియు స్క్రీన్ రీడర్లు మరియు జూమ్ టూల్స్‌తో అనుకూలత. మీ అప్లికేషన్ యొక్క యాక్సెసిబిలిటీ యొక్క పూర్తి చిత్రం కోసం ఈ కాంట్రాస్ట్ తనిఖీని ఇతర ఆడిట్ పద్ధతులతో పాటు ఉపయోగించండి.

ఇన్‌పుట్ ఏ రంగు ఫార్మాట్‌లను ఆమోదిస్తుంది?

మీరు 3, 4, 6 లేదా 8-అంకెల హెక్స్ కోడ్‌లను (# తో లేదా లేకుండా), లెగసీ కామా సింటాక్స్ లేదా ఆధునిక స్పేస్-వేరు చేసిన సింటాక్స్‌లో rgb() మరియు rgba() విలువలు, ఏదైనా ప్రామాణిక హ్యూ యూనిట్ (deg, rad, grad, turn) తో hsl() మరియు hsla(), hsv(), hwb() మరియు CSS కలర్ మాడ్యూల్ లెవల్ 4 స్పెక్ నుండి 150 పేరున్న CSS రంగులను పేస్ట్ చేయవచ్చు. రంగు పూర్తిగా మీ పరికరంలో విశ్లేషించబడుతుంది.