ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್ – Contrast Checker

ಈ ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್ ADA ಅನುಸರಣೆಗಾಗಿ WCAG ಮತ್ತು APCA ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಆಡಿಟ್ ಮಾಡುತ್ತದೆ — ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಬಣ್ಣ ಪ್ರವೇಶ…

✅ ಈ ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್‌ನಿಂದ ನೀವು ಏನು ಪಡೆಯುತ್ತೀರಿ: - WCAG 2.2 ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ ಮತ್ತು APCA Lc, - ಪುಟದಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡಲಾದ ಸಮಸ್ಯೆಗಳಿರುವ ಅಂಶಗಳು, - ಬಣ್ಣಗಳನ್ನು ಉತ್ಪಾದಿಸುವ CSS ನಿಯಮಗಳು, ಮೂಲ ನಕ್ಷೆಗಳ ಮೂಲಕ ಪತ್ತೆಹಚ್ಚಲಾಗಿದೆ (ಲಭ್ಯವಿದ್ದರೆ), - ಕಾಂಟ್ರಾಸ್ಟ್ ವಿಶ್ಲೇಷಕ ಮತ್ತು ಸೂಚಿಸಲಾದ ಪರ್ಯಾಯಗಳೊಂದಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬಣ್ಣ ಆಯ್ದುಕೊಳ್ಳುವ ಸಾಧನ, - ಪರಿಹಾರಗಳ ನೇರ ಪೂರ್ವವೀಕ್ಷಣೆ, - CSS ಗೆ ಪರಿಹಾರಗಳ ರಫ್ತು (ಮೂಲ-ಪತ್ತೆ ಕಾಮೆಂಟ್‌ಗಳೊಂದಿಗೆ). 🔍 ಕೇವಲ ಸಮತಟ್ಟಾದ ಹಿನ್ನೆಲೆಗಳಲ್ಲದೆ - ಚಿತ್ರಗಳು ಮತ್ತು ಗ್ರೇಡಿಯಂಟ್‌ಗಳ ಮೇಲೆ ಹುಸಿ-ಸ್ಥಿತಿಗಳು, ನೆರಳು DOM, ಒಂದೇ-ಮೂಲದ ಐಫ್ರೇಮ್‌ಗಳು ಮತ್ತು ಪಠ್ಯವನ್ನು ನಡೆಯುವ ವೆಬ್‌ಸೈಟ್ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರೀಕ್ಷಕವಾಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ⚠️ ಡೀಬಗ್ಗರ್ ಅನುಮತಿ ಅಗತ್ಯವಿದೆ. ಈ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರೀಕ್ಷಕದ ಕವರೇಜ್ Chrome DevTools ಪ್ರೋಟೋಕಾಲ್ ಮೂಲಕ ಮಾತ್ರ ಸಾಧ್ಯ, ಇದಕ್ಕೆ 'ಡೀಬಗ್ಗರ್' ಅನುಮತಿ ಅಗತ್ಯವಿರುತ್ತದೆ. ಒಮ್ಮೆ ಲಗತ್ತಿಸಿದ ನಂತರ, Chrome ಎಲ್ಲಾ ಟ್ಯಾಬ್‌ಗಳಲ್ಲಿ ಮಾಹಿತಿ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಬೇರ್ಪಡುವಿಕೆಯಲ್ಲಿ ಮರೆಮಾಡುವುದಿಲ್ಲ. ⚡ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಕೆಲಸದ ಹರಿವು: • ಬಣ್ಣ ಪ್ರವೇಶದ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಒಂದು ನೋಟದಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡಲಾಗಿದೆ. • ಬದಲಾವಣೆಗಳನ್ನು ತಕ್ಷಣವೇ ಪೂರ್ವವೀಕ್ಷಿಸಿ, ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳು ಮತ್ತು ತೀರ್ಪುಗಳನ್ನು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲಾಗುತ್ತದೆ. • ಸ್ಟೈಲ್‌ಶೀಟ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ CSS ಅನ್ನು ಅನ್ವಯಿಸಿ; ಬಾಧಿತ ಸಮಸ್ಯೆಗಳನ್ನು ಪಟ್ಟಿಯಲ್ಲಿ ಗುರುತಿಸಲಾಗಿದೆ. • ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಪರಿಶೀಲಿಸಲು, ಅಂತರ್ನಿರ್ಮಿತ ಬಣ್ಣ ಪಿಕ್ಕರ್ ಪರಿಕರವನ್ನು ಬಳಸಿ: ಮುನ್ನೆಲೆಯನ್ನು ಹೊಂದಿಸಲು ಎಡ-ಕ್ಲಿಕ್ ಮಾಡಿ, ಹಿನ್ನೆಲೆಗಾಗಿ ಬಲ-ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಅನುಪಾತವು ತಕ್ಷಣವೇ ನವೀಕರಿಸುತ್ತದೆ. • ನೀವು ಸರಿಪಡಿಸುತ್ತಿರುವ ಅಂಶಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಎಲ್ಲವನ್ನೂ ಮರೆಮಾಡಲು ಹೊರಗಿಡುವಿಕೆಗಳ ಟ್ಯಾಬ್ ಬಳಸಿ. 📐 ತೀರ್ಪುಗಳ ಹಿಂದಿನ ಮಾನದಂಡಗಳು. ಈ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ ಪರೀಕ್ಷಕವು WCAG ಮತ್ತು APCA ಅವಶ್ಯಕತೆಗಳ ವಿರುದ್ಧ ಬಣ್ಣ ಪ್ರವೇಶವನ್ನು ಪರೀಕ್ಷಿಸುತ್ತದೆ. APCA Lc ಅನ್ನು ಬ್ರಿಡ್ಜ್-PCA ಮಿತಿಗಳ ವಿರುದ್ಧ ಶ್ರೇಣೀಕರಿಸಲಾಗಿದೆ, ಇದು ಹೊಂದಾಣಿಕೆಯ WCAG ಅನುಪಾತಗಳಿಗಿಂತ ಕಠಿಣವಾಗಿದೆ - ಆದ್ದರಿಂದ ಬ್ರಿಡ್ಜ್-PCA ಪಾಸ್ ಯಾವಾಗಲೂ WCAG ಪಾಸ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. 🔬 APCA ಎಂದರೇನು? APCA (ಆಕ್ಸೆಸ್ಸಿಬಲ್ ಪರ್ಸೆಪ್ಚುವಲ್ ಕಾಂಟ್ರಾಸ್ಟ್ ಅಲ್ಗಾರಿದಮ್) ಎಂಬುದು ಜನರು ಪರದೆಯ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಹೇಗೆ ಓದುತ್ತಾರೆ ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಒಂದು ಮಾದರಿಯಾಗಿದೆ. ಒಂದೇ wcag ಅನುಪಾತವನ್ನು ಹೊಂದಿರುವ ಎರಡು ಬಣ್ಣ ಜೋಡಿಗಳು ಗಮನಾರ್ಹವಾಗಿ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಿಸಬಹುದು ಮತ್ತು ಅವುಗಳ apca Lc (ಲ್ಯುಮಿನೆನ್ಸ್ ಕಾಂಟ್ರಾಸ್ಟ್) ಇದನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ: ಒಂದು ಜೋಡಿ wcag ಅನ್ನು ರವಾನಿಸಬಹುದು ಆದರೆ ಓದಲು ಕಷ್ಟವಾಗುತ್ತದೆ. ಈ ವೆಬ್‌ಸೈಟ್ ಬಣ್ಣ ಪ್ರವೇಶ ಪರೀಕ್ಷಕವು ಎರಡೂ ಸಂಖ್ಯೆಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. 🚧 ಮಿತಿಗಳು: 1. ಪ್ರತಿಯೊಂದು ಇತರ ವೆಬ್‌ಸೈಟ್ ಪ್ರವೇಶ ಪರೀಕ್ಷಕದಂತೆ, ಇದು ಅನುಸರಣೆ ಪ್ರಮಾಣಪತ್ರವನ್ನಲ್ಲ, ಅತ್ಯುತ್ತಮ ಪ್ರಯತ್ನದ ಅಂದಾಜುಗಳನ್ನು ನೀಡುತ್ತದೆ. 2. ವ್ಯಾಪ್ತಿ ಪಠ್ಯ-ಮಾತ್ರ; ಪಠ್ಯೇತರ ಅಂಶಗಳ ಪರಿಶೀಲನೆ (wcag 1.4.11) ಮಾರ್ಗಸೂಚಿಯಲ್ಲಿದೆ. 3. ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಐಫ್ರೇಮ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಲಾಗುವುದಿಲ್ಲ. 4. ಸಂಕೀರ್ಣ ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸೀಮಿತ ಸಂಖ್ಯೆಯ ಪ್ರಾದೇಶಿಕ ಮತ್ತು ತಾತ್ಕಾಲಿಕ ಬಿಂದುಗಳಲ್ಲಿ ಮಾದರಿ ಮಾಡಲಾಗುತ್ತದೆ; ಕೆಟ್ಟ ಮಾದರಿಯ ಅನುಪಾತವನ್ನು ವರದಿ ಮಾಡಲಾಗಿದೆ ಆದರೆ ಇನ್ನೂ ಆಶಾವಾದಿಯಾಗಿರಬಹುದು; ಕಲಾಕೃತಿಗಳನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವ ಮೂಲಕ ಮಾದರಿದಾರರನ್ನು ದಾರಿ ತಪ್ಪಿಸಬಹುದು. 5. ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಸೈಟ್‌ಗಳು ನಕಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. 6. ಈ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರೀಕ್ಷಕವು ಚಿತ್ರಗಳ ಮೇಲೆ OCR ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರನ್ ಮಾಡುವುದಿಲ್ಲ; ಸೇರಿಸಲಾದ ಬಣ್ಣ ಪಿಕ್ಕರ್ ಉಪಕರಣದ ಮೂಲಕ ಅರ್ಥಪೂರ್ಣ ಪಠ್ಯದೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ. 🔒 ಗೌಪ್ಯತೆ ಮತ್ತು ಅನುಮತಿಗಳು. ▸ ಸ್ಥಳೀಯವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ; ಯಾವುದೇ ವೆಬ್‌ಪುಟದ ಡೇಟಾ ನಿಮ್ಮ ಯಂತ್ರವನ್ನು ಬಿಡುವುದಿಲ್ಲ. ▸ 'ಆಕ್ಟಿವ್‌ಟ್ಯಾಬ್' ಮಾತ್ರ: ನೀವು ಟೂಲ್‌ಬಾರ್ ಐಕಾನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ವಿಶ್ಲೇಷಣಾ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲಾಗುತ್ತದೆ. ▸ Shadow DOM ಮತ್ತು iframes ಗೆ ಹೆಜ್ಜೆ ಹಾಕಲು, CSS ಮೂಲಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಸಂಕೀರ್ಣ ಹಿನ್ನೆಲೆಗಳನ್ನು ಮಾದರಿ ಮಾಡಲು 'ಡೀಬಗ್ಗರ್' ಅನುಮತಿ ಅಗತ್ಯವಿದೆ. 🧮 ನಿಖರತೆಯ ವಿವರಗಳು. ಅರೆ-ಪಾರದರ್ಶಕ ಪಠ್ಯ ಮತ್ತು ಪೂರ್ವಜರ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ: ಪ್ರಕಾಶಮಾನತೆಯನ್ನು ಅಳೆಯುವ ಮೊದಲು ಮುಂಭಾಗವನ್ನು ಅದರ ನೈಜ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಸಂಯೋಜಿಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ವರದಿ ಮಾಡಲಾದ ಅನುಪಾತವು ಬಳಕೆದಾರರು ನಿಜವಾಗಿ ನೋಡುವುದಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ವೈಡ್-ಗ್ಯಾಮಟ್ ಬಣ್ಣ ಕಾರ್ಯಗಳು - oklch, lab, lch, color(display-p3) - ಸಹ ಬೆಂಬಲಿತವಾಗಿದೆ, ಗ್ಯಾಮಟ್‌ನಿಂದ ಹೊರಗಿರುವಾಗ sRGB ಗೆ ಕ್ಲ್ಯಾಂಪ್ ಮಾಡಲಾಗಿದೆ. 🎨 ಚಿತ್ರಗಳು ಮತ್ತು ಇಳಿಜಾರುಗಳ ಮೇಲೆ ಪಠ್ಯ. ಹೆಚ್ಚಿನ ರೀತಿಯ ಪರಿಕರಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಇದು ಫ್ಲಾಟ್ ಅಲ್ಲದ ಹಿನ್ನೆಲೆಗಳನ್ನು ಬಿಟ್ಟುಕೊಡುವುದಿಲ್ಲ ಅಥವಾ 'getComputedStyle' / 'CSS.getBackgroundColors' ವರದಿಯನ್ನು ನಂಬುವುದಿಲ್ಲ. ಇದು ನೈಜ ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ ಅನ್ನು ಸಂಯೋಜಿಸಲು ಬ್ರೌಸರ್‌ನ ಬಣ್ಣದ ಕ್ರಮವನ್ನು ಅನುಸರಿಸುತ್ತದೆ - ಅಪಾರದರ್ಶಕತೆ, ಮಿಶ್ರಣ ವಿಧಾನಗಳು, ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್‌ಗಳು, ಬ್ಯಾಕ್‌ಡ್ರಾಪ್-ಫಿಲ್ಟರ್ - ಮತ್ತು ಅದು ಸಾಕಾಗದಿದ್ದಾಗ, ಈ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಕರವು ಪಠ್ಯದ ಸ್ಥಳದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಿದ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಮಾದರಿ ಮಾಡುತ್ತದೆ. ❓ ಪ್ರಶ್ನೋತ್ತರಗಳು 📌 WCAG ಮತ್ತು APCA ಅಡಿಯಲ್ಲಿ ಒಂದೇ ಬಣ್ಣದ ಜೋಡಿ ಕೆಲವೊಮ್ಮೆ ವಿಭಿನ್ನ ತೀರ್ಪುಗಳನ್ನು ಏಕೆ ಪಡೆಯುತ್ತದೆ? ↳ WCAG ಪ್ರಕಾಶಮಾನತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ; APCA ಗ್ರಹಿಕೆಯ ವ್ಯತಿರಿಕ್ತತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ. 4.5:1 ಅನ್ನು ತೆರವುಗೊಳಿಸುವ ಜೋಡಿಯು ಇನ್ನೂ ಬ್ರಿಡ್ಜ್-ಪಿಸಿಎ ಎಲ್ಸಿ ಮಿತಿಯನ್ನು ಮೀರಬಹುದು - ಇದು ಕಠಿಣ ಮಾದರಿಯಾಗಿದೆ. 📌 APCA WCAG ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆಯೇ? ↳ ಇಲ್ಲ — APCA ಬದಲಿಯಾಗಿಲ್ಲ, ಆದರೆ ಉಪಯುಕ್ತವಾದ ಎರಡನೇ ಅಭಿಪ್ರಾಯವಾಗಿದೆ. ಈ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರೀಕ್ಷಕ ಎರಡನ್ನೂ ವರದಿ ಮಾಡುತ್ತದೆ. 📌 ಈ ಪ್ರವೇಶಸಾಧ್ಯತಾ ಪರೀಕ್ಷಕದೊಂದಿಗೆ ನಾನು ಸ್ಥಳೀಯ ಫೈಲ್ ಅಥವಾ ನನ್ನ ಡೆವ್ ಸರ್ವರ್ ಅನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡಬಹುದೇ? ↳ ಹೌದು. ವಿಸ್ತರಣಾ ಸೆಟ್ಟಿಂಗ್‌ಗಳಲ್ಲಿ "ಫೈಲ್ URL ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಅನುಮತಿಸಿ" ಸಕ್ರಿಯಗೊಳಿಸಿ. ಫೈಲ್:// ಅಥವಾ ಲೋಕಲ್‌ಹೋಸ್ಟ್ URL ತೆರೆಯಿರಿ ಮತ್ತು ಟೂಲ್‌ಬಾರ್ ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡಿ. chrome://, Chrome ವೆಬ್ ಸ್ಟೋರ್ ಮತ್ತು ಇತರ ನಿರ್ಬಂಧಿತ ಸ್ಕೀಮ್‌ಗಳನ್ನು ಮಾತ್ರ ಬಿಟ್ಟುಬಿಡಲಾಗುತ್ತದೆ. 📌 ಈ ಉಪಕರಣವು ADA ಅನುಸರಣೆಯನ್ನು ಪ್ರಮಾಣೀಕರಿಸುತ್ತದೆಯೇ? ↳ ಇಲ್ಲ. ಇದು ಬಣ್ಣ ವ್ಯತಿರಿಕ್ತತೆಯನ್ನು ಮಾತ್ರ ಪರಿಶೀಲಿಸುತ್ತದೆ - ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಒಂದು ಮುಖ. ADA ಅನುಸರಣೆಯು ಅನೇಕ ಮಾನದಂಡಗಳು ಮತ್ತು ಮಾನದಂಡಗಳನ್ನು (ಶಬ್ದಾರ್ಥ, ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶ, ಆಲ್ಟ್ ಪಠ್ಯ, ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವು) ಒಳಗೊಂಡಿರುವ ಕಾನೂನು ನಿರ್ಣಯವಾಗಿದೆ ಮತ್ತು ಇದನ್ನು ಅರ್ಹ ವೃತ್ತಿಪರರು ನಿರ್ಣಯಿಸಬೇಕು.