ImageColorPicker.com

ಬಣ್ಣ ವ್ಯತ್ಯಾಸ ತಪಾಸಕ

ಪ್ರವೇಶಾತಿ ಖಚಿತಪಡಿಸಲು ಮುಂಭಾಗ ಮತ್ತು ಹಿನ್ನಲೆ ಬಣ್ಣಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸ ಅನುಪಾತವನ್ನು ಪರೀಕ್ಷಿಸಿ.

ನಿಮ್ಮ ಬಣ್ಣಗಳನ್ನು ಪರಿಶೀಲಿಸಿ

ಪಠ್ಯ ಓದಲು ಯೋಗ್ಯತೆಯಿಗಾಗಿ WCAG ಪ್ರವೇಶಾತಿ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸಲು ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.

4.66 ರಿಂದ 1
ವ್ಯತ್ಯಾಸ
AA
ಪಠ್ಯದ ಫಲಿತಾಂಶ
ಚೆನ್ನಾಗಿದೆ

ಹೋಲಿಸಲಾಗಿದೆ: #FFFFFF ಮೇಲೆ #9B59B6

ಪಠ್ಯ

16px, ಸಾಮಾನ್ಯ (400)

ಸಾಮಾನ್ಯ ಪಠ್ಯವಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

  • AA (WCAG 1.4.3): ಕನಿಷ್ಠ 4.5:1

    ಉತ್ತೀರ್ಣ

  • AAA (WCAG 1.4.6): ಕನಿಷ್ಠ 7:1

    ಇನ್ನಷ್ಟು 2.34 ಬೇಕಾಗಿದೆ

    ವಿಫಲ

ಯೂಐ ಘಟಕಗಳು ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್

ಐಕಾನ್ಗಳು, ಇನ್‌ಪುಟ್ ಬಾರ್ಡರ್‌ಗಳು, ಫೋಕಸ್ ಸೂಚಕಗಳು ಮತ್ತು ಇಂಟರ್ಫೇಸ್ ಬಳಸಲು ನೋಡಿ ಇರಬೇಕಾದ ಇತರ ಭಾಗಗಳು.

  • AA (WCAG 1.4.11): ಕನಿಷ್ಠ 3:1

    ಉತ್ತೀರ್ಣ
4.66 ಅನುಪಾತ 1. ಪಠ್ಯ: AA ನಲ್ಲಿ ಪಾಸಾಗಿದೆ, AAA ನಲ್ಲಿ ವಿಫಲವಾಗಿದೆ. UI ಘಟಕಗಳು: ಉತ್ತೀರ್ಣವಾಗಿದೆ.
ಇದನ್ನು ಹೇಗೆ ಪರಿಶೀಲಿಸಲಾಗಿದೆ
ಹೋಲಿಸಿದ ಬಣ್ಣಗಳು (ಬ್ಲೆಂಡಿಂಗ್ ನಂತರ)
ಪಠ್ಯ #FFFFFF ಮೇಲೆ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ #9B59B6
ಸಾಪೇಕ್ಷ ಪ್ರಕಾಶಮಾನತೆ
ಪಠ್ಯ 1.0000, ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ 0.1749
ಸೂತ್ರ
(L1 + 0.05) / (L2 + 0.05) ಇಲ್ಲಿ L1 ಎಂದರೆ ಬೆಳಕು ಹೆಚ್ಚಿರುವ ಬಣ್ಣದ ಪ್ರಕಾಶಮಾನತೆ ಮತ್ತು L2 ಎಂದರೆ ಕಡಿಮೆ ಬೆಳಕಿನದದ ಹೌದು.
ನಿಖರ ಅನುಪಾತ
4.6685 to 1, ಇದನ್ನು 4.66 to 1 ಎಂದು ತೋರಿಸಲಾಗಿದೆ. ತೋರಿಸಿದ ಮೌಲ್ಯವನ್ನು ಕತ್ತರಿಸಲಾಗುತ್ತದೆ, ರೌಂಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಇದು ವಾಸ್ತವಕ್ಕಿಂತ ಉತ್ತಮವಾಗಿ ಎಂದಿಗೂ ಕಾಣುವುದಿಲ್ಲ. ಅಗತ್ಯದೊಂದಿಗೆ ಹೋಲಿಸುವುದು ನಿಖರ ಮೌಲ್ಯವನ್ನು.

ಪಠ್ಯದ ಗಾತ್ರ: 16px, ಸಾಮಾನ್ಯ (400)

ಸಾಮಾನ್ಯ ಪಠ್ಯವಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ದೊಡ್ಡ ಪಠ್ಯ ಕನಿಷ್ಠ 24px (18pt) ಇರುತ್ತದೆ, ಅಥವಾ ದಪ್ಪವಾಗಿದ್ದರೆ (ತೂಕ 700 ಅಥವಾ ಹೆಚ್ಚು) ಕನಿಷ್ಠ 18.67px (14pt). ಗಾತ್ರಗಳನ್ನು ರೌಂಡ್ ಮಾಡದೆ ಕತ್ತರಿಸಿ ತೋರಿಸಲಾಗುತ್ತದೆ.

ಸಾಮಾನ್ಯ ಪಠ್ಯವಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ದೊಡ್ಡ ಪಠ್ಯ ಕನಿಷ್ಠ 24px (18pt) ಇರುತ್ತದೆ, ಅಥವಾ ದಪ್ಪವಾಗಿದ್ದರೆ (ತೂಕ 700 ಅಥವಾ ಹೆಚ್ಚು) ಕನಿಷ್ಠ 18.67px (14pt). ಗಾತ್ರಗಳನ್ನು ರೌಂಡ್ ಮಾಡದೆ ಕತ್ತರಿಸಿ ತೋರಿಸಲಾಗುತ್ತದೆ.

Aa
ಪೂರ್ವದೃಶ್ಯ ಶೀರ್ಷಿಕೆ

ವೇಗದ ಕಂದು ನರಿ ಆಲಸ್ಯದ ನಾಯಿಯನ್ನು ಹಾರಿ ಹೋಗುತ್ತದೆ

ಸಣ್ಣ ಪಠ್ಯದ ಉದಾಹರಣೆ (12px)

ಪಠ್ಯ
#ffffff
ಹಿನ್ನೆಲೆ
#9B59B6

WCAG ಮಾನದಂಡಗಳು

ಮಟ್ಟ AA

ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕಾಗಿ ಕನಿಷ್ಠ ಅನುಪಾತ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕಾಗಿ 3:1. ಬಹುತೇಕ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿದೆ.

ಮಟ್ಟ AAA

ವರ್ಧಿತ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ: ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ 7:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 4.5:1. ಉತ್ತಮ ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.

ಬಣ್ಣ ವ್ಯತ್ಯಾಸ ತಪಾಸಕ

ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನಲೆ ಬಣ್ಣಗಳ ವ್ಯತ್ಯಾಸ ಅನುಪಾತವನ್ನು ಲೆಕ್ಕಹಾಕಿ.

ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕಾಗಿ ಬಣ್ಣ ತೋರಿಸುತ್ತಾ ಬಳಸೋದು ಆಯ್ಕೆ ಮಾಡಿ ಅಥವಾ RGB ಹೆಕ್ಸಾಡೆಸಿಮಲ್ ಸ್ವರೂಪದಲ್ಲಿ ಬಣ್ಣ ನಮೂದಿಸಿ (ಉದಾ., #259 ಅಥವಾ #2596BE). ಬಣ್ಣ ಆಯ್ಕೆ ಮಾಡಲು ಓಟುಕವನ್ನು ಹೊಂದಿಸಬಹುದು. ವೆಬ್ ವಿಷಯ ಮೌಲ್ಯಪದಗಳು (WCAG) ದೃಷ್ಟಿಯಿಂದ ಬಳಕೆದಾರರಿಗಾಗಿ ಪಠ್ಯವನ್ನು ಓದಲಿಕ್ಕೆ ಸುಲಭವಾಗುವುದನ್ನು ನಿರ್ಧರಿಸಲು ವಿಶಿಷ್ಟ ಮಾರ್ಗಸೂಚಿಯನ್ನು ಹೊಂದಿದೆ. ಈ ಲೇಖಿಲ್ಲು ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ಹೋಲಿಸಬಹುದಾದ ಅನುಪಾತಗಳಾಗಿ ನಕ್ಷೆ ಮಾಡಲು ಒಂದು ವಿಶೇಷ ಕ್ರಮಶೀಲತೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಸೂತ್ರದ ಬಳಕೆಯೊಂದಿಗೆ, WCAG ಹೇಳುತ್ತದೆ ಅ 4.5:1 ಬಣ್ಣ ಶ್ರೇಣಿಯ ಅನುಪಾತವು ಸಾಮಾನ್ಯ (ಶರೀರ) ಪಠ್ಯಕ್ಕಾಗಿ ಜ್ಞಾನಪೂರ್ವಕವಾಗಿದೆ, ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯ (18+ pt ಸಾಮಾನ್ಯ, ಅಥವಾ 14+ pt ಬೋಲ್ಡ್) ಕನಿಷ್ಠ 3:1 ಬಣ್ಣ ಶ್ರೇಣಿಯ ಅನುಪಾತವನ್ನು ಹೊಂದಿರಬೇಕು.

ಮುಖ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳು

  • ವಾಸ್ತವಿಕ-ಸಮಯ ವ್ಯತ್ಯಾಸ ಅನುಪಾತ ಲೆಕ್ಕಾಚಾರ
  • WCAG AA & AAA ಅನುಕೂಲತೆ ಪರಿಶೀಲನೆ
  • ಸೂಕ್ಷ್ಮ-ಸಂಯೋಜನೆಗೆ HSL ಸ್ಲೈಡರ್‌ಗಳು
  • ಬಹು ಪೂರ್ವದೃಶ್ಯ ಸ್ವರೂಪಗಳು

ಸುಧಾರಿತ ಸಾಧನಗಳು

  • ಸ್ವಯಂಚಾಲಿತ ಬಣ್ಣ ಸರಿಪಡಿಸುವಿಕೆ
  • ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಮಾದರಿಗಳು
  • ಬಣ್ಣದ ಹೆಸರು ಪತ್ತೆಹಚ್ಚುವುದು
  • ಫಲಿತಾಂಶಗಳನ್ನು ರಫ್ತು ಮಾಡು

ಆಗಾಗ್ಗೆ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

WCAG AA ಅನುಸರಣೆಗೆ, ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ವ್ಯತ್ಯಾಸ ಅನುಪಾತ ಬೇಕು, ಆದರೆ ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ (18pt ಅಥವಾ 14pt ಬೋಲ್ಡ್) 3:1 ಬೇಕು.

WCAG AAA ಹೆಚ್ಚಿನ ವ್ಯತ್ಯಾಸ ಅನುಪಾತಗಳನ್ನು ಬಯಸುತ್ತದೆ: ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ 7:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 4.5:1, AA ಯ ಕ್ರಮವಾಗಿ 4.5:1 ಮತ್ತು 3:1 ಗೆ ಹೋಲಿಸಿದರೆ.

ನಿಮ್ಮ ವಿನ್ಯಾಸದ ಉದ್ದೇಶವನ್ನು ಉಳಿಸಿಕೊಂಡು ಪಠ್ಯ ಅಥವಾ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ನಮ್ಮ ಸ್ವಯಂಚಾಲಿತ ಸರಿಪಡಿಕೆ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸಿ, ಅಥವಾ AA/AAA ಅನುಸರಣೆಗೆ ಸೂಕ್ತ ವಲಯಗಳನ್ನು ತೋರಿಸುವ ದೃಶ್ಯ ಸೂಚಕಗಳೊಂದಿಗೆ HSL ಸ್ಲೈಡರ್‌ಗಳ ಮೂಲಕ ಬಣ್ಣಗಳನ್ನು ಕೈಯಾರೆ ಹೊಂದಿಸಿ.

ಹಸಿರು ವಲಯಗಳು ಮತ್ತು AA/AAA ಗುರುತುಗಳು WCAG ಅನುಸರಣೆ ಸಾಧಿಸಲು ಸೂಕ್ತ ಶ್ರೇಣಿಗಳನ್ನು ತೋರಿಸುತ್ತವೆ. ದಿಕ್ಕಿನ ಸೂಚನೆಗಳು (ಹಗುರವಾಗಿ/ಗಾಢವಾಗಿ) ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಬಣ್ಣ ಸಂಯೋಜನೆಯ ಆಧಾರದ ಮೇಲೆ ಉತ್ತಮ ವ್ಯತ್ಯಾಸದತ್ತ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತವೆ.

ಹೌದು, ನೀವು ಯಾವುದೇ ಹೆಕ್ಸ್ ಬಣ್ಣ ಕೋಡ್ ನಮೂದಿಸಬಹುದು ಅಥವಾ ಕಸ್ಟಮ್ ಬಣ್ಣಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಬಣ್ಣ ಆಯ್ಕೆಗಾರನ್ನು ಬಳಸಬಹುದು. ನಿರ್ದಿಷ್ಟ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು URL ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ.