What is color contrast ratio and why does it matter?

Color contrast ratio measures the luminance difference between foreground text and its background, on a scale from 1:1 (identical colors) to 21:1 (black on white). It matters for accessibility: users with low vision, color blindness, or viewing screens in bright environments need sufficient contrast to read text. WCAG 2.1 defines minimum contrast ratios for accessible web content — failing contrast standards creates legal risk and excludes a significant portion of users.

What are the WCAG contrast ratio requirements?

WCAG 2.1 defines two levels: AA (minimum, legally required in many jurisdictions) and AAA (enhanced). For normal text (under 18pt regular or 14pt bold): AA requires 4.5:1, AAA requires 7:1. For large text (18pt+ regular or 14pt+ bold): AA requires 3:1, AAA requires 4.5:1. UI components and graphical objects require 3:1 against adjacent colors (AA). Text over images must meet contrast requirements against the background portion directly behind the text.

How is the WCAG contrast ratio calculated?

WCAG contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 the darker's. Relative luminance (L) is computed from linearized RGB values: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where each channel is linearized (channel ≤ 0.04045 ? channel/12.92 : ((channel+0.055)/1.055)^2.4). This formula accounts for human perception, where green contributes more to perceived brightness than red or blue.

What tools can I use to check color contrast beyond a web tool?

Browser extensions: Axe DevTools, WAVE, Colour Contrast Analyser (free desktop app by TPGi). VS Code: axe Accessibility Linter, Webhint. Figma plugins: Contrast, A11y — Color Contrast Checker. Chrome DevTools: Accessibility panel highlights contrast issues. Command line: @adobe/leonardo for automated palette generation that meets contrast requirements. For automated testing: @axe-core/playwright, jest-axe run contrast checks as part of your CI pipeline.

நிற மாறுபாடு கணிப்பான்

மாதிரி சேர்க்கைகள்

முன்னணி நிறம் (உரை)

பின்னணி நிறம்

தொழில்நுட்ப விவரங்கள்

நிற மாறுபாட்டு கணிப்பான் எப்படி செயல்படுகிறது

இந்த கருவி என்ன செய்கிறது

நிற மாறுபாட்டு கணிப்பான் முன்புற (foreground) மற்றும் பின்னணி (background) நிறங்களுக்கிடையிலான மாறுபாட்டு விகிதத்தை அளந்து, உரை Web Content Accessibility Guidelines (WCAG) தரநிலைகளை பூர்த்தி செய்கிறதா என்பதை தீர்மானிக்கிறது. இந்த அணுகல்தன்மை சோதனை கருவி WCAG மாறுபாட்டு விகித சூத்திரத்தைப் பயன்படுத்தி இரண்டு நிறங்களுக்கிடையிலான ஒளிர்வு (luminance) வேறுபாட்டை கணக்கிடுகிறது; இதில் இலகுவான நிறத்தின் சார்பு ஒளிர்வை இருண்ட நிறத்துடன் ஒப்பிடுகிறது. உங்கள் உரை நிறங்கள் WCAG AA அல்லது AAA தரநிலைகளை பூர்த்தி செய்கிறதா என்பதைச் சரிபார்க்க வேண்டிய போது, இந்த கணிப்பான் உங்கள் நிற இணைப்புகள் பார்வைக் குறைபாடு உள்ள பயனர்களுக்கு அணுகல்தன்மை கொண்டதா என்பதை உடனடியாக தெரிவிக்கிறது. இந்த கருவி சாதாரண உரை (AAக்கு 4.5:1 மற்றும் AAAக்கு 7:1 தேவை) மற்றும் பெரிய உரை (AAக்கு 3:1 மற்றும் AAAக்கு 4.5:1 தேவை) இரண்டையும் மதிப்பீடு செய்து, உங்கள் வடிவமைப்புகள் அணுகல்தன்மை விதிமுறைகளுக்கு இணங்கவும் அனைத்து பயனர்களுக்கும் வாசிக்கக்கூடிய உள்ளடக்கத்தை வழங்கவும் உதவுகிறது.

டெவலப்பர்களுக்கான பொதுவான பயன்பாட்டு நிலைகள்

குறைந்த பார்வை அல்லது நிறக் குருடுத்தன்மை உள்ள பயனர்களுக்கு பின்னணி நிறங்களுக்கு எதிராக உரை வாசிக்கக்கூடியதாக இருக்க உறுதி செய்ய, டெவலப்பர்கள் அணுகல்தன்மை கொண்ட வலை பயன்பாடுகளை உருவாக்கும்போது நிற மாறுபாட்டு கணிப்பான்களைப் பயன்படுத்துகிறார்கள். பயனர் இடைமுகங்களை வடிவமைத்தல், டிசைன் சிஸ்டம்கள் உருவாக்குதல், அல்லது உள்ள வலைத்தளங்களை அணுகல்தன்மை தரநிலைகளுக்காக தணிக்கை செய்தல் ஆகியவற்றில் WCAG இணக்க சரிபார்ப்பான் அவசியமானது. பல வடிவமைப்பாளர்கள் நிறத் திட்டங்களை இறுதிப்படுத்துவதற்கு முன் மாறுபாட்டு விகிதங்களை சரிபார்க்க வேண்டும்; குறிப்பாக போதுமான மாறுபாட்டை இயல்பாக வழங்காத பிராண்ட் நிறங்களுடன் பணிபுரியும் போது. டார்க் மோடு தீம்களை செயல்படுத்தும்போது, வெளிர் மற்றும் இருண்ட நிறத் திட்டங்களுக்கு இடையில் மாறும்போது உரை வாசிக்கக்கூடியதாக இருக்க உறுதி செய்ய இந்த அணுகல்தன்மை சரிபார்ப்பான் உதவுகிறது. ஃப்ரண்ட்எண்ட் டெவலப்பர்கள் CSS நிறத் தேர்வுகளை சரிபார்க்க, டிசைன் மாக்க்அப்களிலிருந்து நிற இணைப்புகளை சோதிக்க, அல்லது Section 508 மற்றும் ADA தேவைகளுக்கு இணக்கம் உறுதி செய்ய இந்த கருவியைப் பயன்படுத்துகிறார்கள். படிக்கத்தக்க உரை முக்கியமான அணுகல்தன்மை கொண்ட படிவங்கள், வழிசெலுத்தல் மெனுக்கள், அல்லது எந்த இடைமுக கூறையும் உருவாக்கும்போது மாறுபாட்டு விகித கணிப்பான் மிகவும் பயனுள்ளது.

தரவு வடிவங்கள், வகைகள், அல்லது மாறுபாடுகள்

நிற மாறுபாட்டு கணிப்பான்கள் ஹெக்ஸாடெசிமல் குறியீடுகள் (#RRGGBB), RGB மதிப்புகள் (rgb(r, g, b)), HSL மதிப்புகள் (hsl(h, s%, l%)), மற்றும் CSS நிறப் பெயர்கள் உள்ளிட்ட பல நிற உள்ளீட்டு வடிவங்களை ஏற்கின்றன. இந்த கருவி WCAG 2.1 சூத்திரத்தைப் பயன்படுத்தி மாறுபாட்டு விகிதங்களை கணக்கிடுகிறது; இதில் நிறங்களை சார்பு ஒளிர்வு மதிப்புகளாக மாற்றி கணித ரீதியாக ஒப்பிடுகிறது. WCAG தரநிலைகள் இரண்டு இணக்க நிலைகளை வரையறுக்கின்றன: Level AA சாதாரண உரைக்கு 4.5:1 மற்றும் பெரிய உரைக்கு 3:1 தேவைப்படுத்துகிறது; Level AAA சாதாரண உரைக்கு 7:1 மற்றும் பெரிய உரைக்கு 4.5:1 தேவைப்படுத்துகிறது. பெரிய உரை என்பது 18pt (24px) சாதாரண எடை அல்லது 14pt (18.5px) தடித்த (bold) எடை என வரையறுக்கப்படுகிறது. கணிப்பான் பொதுவாக ஒவ்வொரு WCAG நிலைக்கும் pass/fail குறியீடுகளை வழங்கி, துல்லியமான மாறுபாட்டு விகிதத்தை காட்டி, அணுகல்தன்மை தரநிலைகளை பூர்த்தி செய்யும் மாற்று நிறங்களையும் பரிந்துரைக்கலாம். சில கருவிகள் UI கூறுகள், கிராபிக்ஸ், மற்றும் உரையல்லாத உள்ளடக்கத்திற்கான மாறுபாட்டையும் கணக்கிடுகின்றன; இவற்றுக்கு 3:1 மாறுபாட்டு விகிதம் தேவைப்படுகிறது.

பொதுவான தவறுகள் மற்றும் விளிம்பு நிலைகள்

நிற மாறுபாட்டு கணிப்பான்களைப் பயன்படுத்தும்போது, மாறுபாட்டு விகிதங்கள் உணரப்படும் பிரகாசத்தை அல்ல, ஒளிர்வு (luminance) மதிப்புகளை அடிப்படையாகக் கொண்டு கணக்கிடப்படுகின்றன என்பதை நினைவில் கொள்ளுங்கள்; ஆகவே ஒரே மாதிரி தோன்றும் நிறங்களுக்கும் ஏற்றுக்கொள்ளத்தக்க மாறுபாட்டு விகிதங்கள் இருக்கலாம். கருவி மாறுபாட்டை கணித ரீதியாக அளவிடுகிறது; ஆனால் உண்மையான வாசிப்புத் திறன் எழுத்துரு எடை, எழுத்துரு அளவு, வரி இடைவெளி, மற்றும் பின்னணி வடிவங்கள் அல்லது படங்கள் ஆகியவற்றால் பாதிக்கப்படலாம். WCAG AA தேர்ச்சி பெற்றால் தானாகவே அனைவருக்கும் உரை வாசிக்கக்கூடியதாக இருக்கும் என்று கருத வேண்டாம்; சில பயனர்களுக்கு குறைந்தபட்ச தரநிலைகளை விட அதிக மாறுபாட்டு விகிதங்கள் தேவைப்படலாம். அலங்கார உரை, லோகோக்கள், மற்றும் செயலற்ற UI கூறுகளுக்கான மாறுபாட்டு தேவைகள் வேறுபடும்; அவற்றுக்கு குறைந்த மாறுபாட்டு தேவைகள் இருக்கலாம் என்பதை கவனத்தில் கொள்ளுங்கள். வாசிப்புத் திறனை மேம்படுத்தக்கூடிய உரை நிழல்கள், அவுட்லைன்கள், அல்லது பிற காட்சி விளைவுகளை இந்த கணிப்பான் கணக்கில் எடுத்துக்கொள்ளாது. மானிட்டர் கலிப்ரேஷன், சுற்றுப்புற ஒளி, மற்றும் தனிநபர் பார்வை திறன்கள் உணரப்படும் மாறுபாட்டை பாதிக்கக்கூடும் என்பதால், உங்கள் உண்மையான வடிவமைப்புகளை நிஜ உலக சூழல்களில் எப்போதும் சோதிக்கவும். மாறுபாடு அணுகல்தன்மையின் ஒரு அம்சம் மட்டுமே; எழுத்துரு தேர்வு, இடைவெளி, மற்றும் உள்ளடக்க அமைப்பும் வாசிப்புத் திறனை பாதிக்கின்றன.

கோடுக்கு பதிலாக இந்த கருவியை எப்போது பயன்படுத்துவது

வடிவமைப்பை விரைவாக சரிபார்க்க, தனிப்பட்ட நிற இணைப்புகளை சோதிக்க, அல்லது வடிவமைப்பு செயல்முறையில் உடனடி பின்னூட்டம் தேவைப்படும் போது உலாவி-அடிப்படையிலான நிற மாறுபாட்டு கணிப்பான்களைப் பயன்படுத்துங்கள். உள்ளமைக்கப்பட்ட மாறுபாட்டு சரிபார்ப்பு இல்லாத வடிவமைப்பு கருவிகளுடன் பணிபுரியும் போது, அணுகல்தன்மை தணிக்கை, பங்குதாரர் டெமோக்கள், அல்லது விரைவு சரிபார்ப்புக்கு இந்த கருவிகள் சிறந்தவை. தயாரிப்பு பயன்பாடுகள் மற்றும் தானியங்கி அணுகல்தன்மை சோதனைக்காக, முழு பக்கங்களை நிரல்முறை ரீதியாக சோதிக்கக்கூடிய axe-core, Pa11y, அல்லது Lighthouse போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் டெவலப்மென்ட் பணிச்சூழலில் மாறுபாட்டு சரிபார்ப்பை ஒருங்கிணைக்கவும். கோடு-அடிப்படையிலான தீர்வுகள் நிற இணைப்புகளை தொகுதியாக செயலாக்க, டிசைன் சிஸ்டம்களை தானாக சோதிக்க, மற்றும் தொடர்ச்சியான அணுகல்தன்மை கண்காணிப்புக்காக CI/CD பைப்ப்லைன்களுடன் ஒருங்கிணைக்க உதவுகின்றன. உலாவி கருவிகள் இடைமுகச் சோதனை மற்றும் கல்வியில் சிறந்து விளங்குகின்றன; நிரல்முறை தீர்வுகள் முறையான, மீண்டும் செய்யக்கூடிய அணுகல்தன்மை சரிபார்ப்பை வழங்குகின்றன. இரு அணுகுமுறைகளையும் பயன்படுத்துவது நல்லது: வடிவமைப்பு ஆய்வுக்கு உலாவி கருவிகள், மற்றும் முழுமையான அணுகல்தன்மை தணிக்கைக்கு கோடு-அடிப்படையிலான கருவிகள்.