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 ದೊಡ್ಡದು ಕಡಿಮೆ ಅಡಚಣೆಯನ್ನು ಹೊಂದಿದೆ (3:1), ಆದ್ದರಿಂದ AA ಸಾಮಾನ್ಯದಲ್ಲಿ ವಿಫಲವಾಗುವ ಹೆಚ್ಚಿನ ಬಣ್ಣ ಜೋಡಿಗಳು ಪಠ್ಯವು ಸಾಕಷ್ಟು ದೊಡ್ಡದಾಗಿದ್ದಾಗ ವಾಸ್ತವವಾಗಿ AA ದೊಡ್ಡದನ್ನು ಪಾಸ್ ಮಾಡುತ್ತವೆ.

ನನ್ನ ಜೋಡಿ AA ದೊಡ್ಡದನ್ನು ಪಾಸ್ ಮಾಡುತ್ತದೆ ಆದರೆ AA ಸಾಮಾನ್ಯದಲ್ಲಿ ವಿಫಲವಾಗುತ್ತದೆ — ಏಕೆ?

ಏಕೆಂದರೆ AA ದೊಡ್ಡದಕ್ಕೆ ಕೇವಲ 3:1 ಅನುಪಾತದ ಅಗತ್ಯವಿದೆ ಆದರೆ AA ಸಾಮಾನ್ಯಕ್ಕೆ 4.5:1 ಅಗತ್ಯವಿದೆ. WCAG ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ ಕಡಿಮೆ ಮಿತಿಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಏಕೆಂದರೆ ದೊಡ್ಡ ಅಕ್ಷರಗಳು ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್‌ನೊಂದಿಗೆ ಸಹ ಓದಲು ಸುಲಭವಾಗಿದೆ. 4.0:1 ಸ್ಕೋರ್ ಮಾಡುವ ಬಣ್ಣ ಜೋಡಿಯು AA ದೊಡ್ಡದನ್ನು (3:1 ಮಿತಿ) ಪಾಸ್ ಮಾಡುತ್ತದೆ ಆದರೆ AA ಸಾಮಾನ್ಯವನ್ನು (4.5:1 ಮಿತಿ) ವಿಫಲಗೊಳಿಸುತ್ತದೆ. ಬಿಳಿ ಹಿನ್ನೆಲೆಗಳಲ್ಲಿ ಮುಂಭಾಗದ ಬಣ್ಣವಾಗಿ ಬಳಸಲಾದ ತಿಳಿ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳೊಂದಿಗೆ ಇದು ತುಂಬಾ ಸಾಮಾನ್ಯವಾಗಿದೆ.

ಪ್ರವೇಶಿಸುವಿಕೆ ಆಡಿಟಿಂಗ್‌ಗಾಗಿ ನಾನು ಈ ಉಪಕರಣವನ್ನು ಮಾತ್ರ ಅವಲಂಬಿಸಬಹುದೇ?

ಈ ಉಪಕರಣವು ಒಂದು ವಿಷಯವನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ — ಎರಡು ಘನ ಬಣ್ಣಗಳ ನಡುವಿನ WCAG 2.x ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ. ನಿಜವಾದ ಪ್ರವೇಶಿಸುವಿಕೆಯು ಹೆಚ್ಚಿನದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ: ಫೋಕಸ್ ಸೂಚಕಗಳು, ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ತೂಕ, ಮಾಹಿತಿಯನ್ನು ತಿಳಿಸುವ ಏಕೈಕ ಮಾರ್ಗವಾಗಿ ಬಣ್ಣ, ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಜೂಮ್ ಉಪಕರಣಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರವೇಶಿಸುವಿಕೆಯ ಸಂಪೂರ್ಣ ಚಿತ್ರಕ್ಕಾಗಿ ಇತರ ಆಡಿಟ್ ವಿಧಾನಗಳ ಜೊತೆಗೆ ಈ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲನೆಯನ್ನು ಬಳಸಿ.

ಇನ್‌ಪುಟ್ ಯಾವ ಬಣ್ಣ ಸ್ವರೂಪಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ?

ನೀವು 3, 4, 6, ಅಥವಾ 8-ಅಂಕಿಯ hex ಕೋಡ್‌ಗಳನ್ನು (# ಜೊತೆಗೆ ಅಥವಾ ಇಲ್ಲದೆ), ಹಳೆಯ ಅಲ್ಪವಿರಾಮ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅಥವಾ ಆಧುನಿಕ ಸ್ಪೇಸ್-ಸೆಪರೇಟೆಡ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನಲ್ಲಿ rgb() ಮತ್ತು rgba() ಮೌಲ್ಯಗಳು, ಯಾವುದೇ ಪ್ರಮಾಣಿತ ಹ್ಯೂ ಯೂನಿಟ್ (deg, rad, grad, turn) ನೊಂದಿಗೆ hsl() ಮತ್ತು hsla(), hsv(), hwb(), ಮತ್ತು CSS Color Module Level 4 ಸ್ಪೆಕ್‌ನಿಂದ 150 ಹೆಸರಿನ CSS ಬಣ್ಣಗಳನ್ನು ಅಂಟಿಸಬಹುದು. ಬಣ್ಣವು ನಿಮ್ಮ ಸಾಧನದಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಪಾರ್ಸ್ ಆಗುತ್ತದೆ.