రంగు కాంట్రాస్ట్ చెకర్: 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 కు, RGB ను HEX కు మార్చండి. ఏ ఫార్మాట్ రంగు కోడ్ అయినా అతికిస్తే HEX, RGB, HSL, HSV, CMYK ఒకేసారి వస్తాయి.
- రంగుల పాలెట్ జనరేటర్స్పేస్ బార్తో ఐదు రంగుల పాలెట్ తయారు చేయండి, మీ రంగు నుంచి స్కీమ్ తీయండి. ప్రతి రంగుకు 11 షేడ్లు; CSS, Tailwind, JSON, HEXగా ఎగుమతి.
- రంగు పేరు ఫైండర్HEX, RGB లేదా HSL కోడ్ అతికించండి; దగ్గరి CSS రంగు పేర్లు, సాదా వివరణతో చూడండి. 148 పేర్లను వడపోసి, ఏదైనా పేరును మీ CSSలోకి కాపీ చేయండి.