ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ
ਜਾਂਚੋ ਕਿ ਤੁਹਾਡਾ ਰੰਗ ਸੁਮੇਲ WCAG ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ ਜਾਂ ਨਹੀਂ।
ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਬਾਰੇ
GuruAlpha ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਫੋਰਗ੍ਰਾਊਂਡ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗਾਂ ਵਿਚਕਾਰ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਨੂੰ WCAG (ਵੈੱਬ ਕੰਟੈਂਟ ਐਕਸੈਸਿਬਿਲਟੀ ਗਾਈਡਲਾਈਨਜ਼) ਮਿਆਰਾਂ ਅਨੁਸਾਰ ਮਾਪਦਾ ਹੈ। ਕੋਈ ਵੀ ਦੋ ਰੰਗ ਦਾਖਲ ਕਰੋ ਅਤੇ ਟੂਲ ਉਹਨਾਂ ਦਾ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਗਿਣੇਗਾ, ਜੋ ਦੱਸੇਗਾ ਕਿ ਕੀ ਇਹ ਸੁਮੇਲ ਆਮ ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ AA ਜਾਂ AAA ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ।
ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਇੱਕ ਨੈਤਿਕ ਫਰਜ਼ ਵੀ ਹੈ ਅਤੇ ਕਾਨੂੰਨੀ ਲੋੜ ਵੀ। WCAG 2.1 ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਘੱਟੋ-ਘੱਟ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਟੈਕਸਟ ਦ੍ਰਿਸ਼ਟੀ ਕਮਜ਼ੋਰੀ ਵਾਲੇ ਲੋਕਾਂ ਲਈ ਪੜ੍ਹਨਯੋਗ ਹੋਵੇ, ਜਿਸ ਵਿੱਚ ਰੰਗ ਅੰਨ੍ਹਾਪਣ, ਘੱਟ ਦ੍ਰਿਸ਼ਟੀ ਅਤੇ ਉਮਰ ਨਾਲ ਸਬੰਧਤ ਦ੍ਰਿਸ਼ਟੀ ਗਿਰਾਵਟ ਸ਼ਾਮਲ ਹੈ। ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਤੁਹਾਡੇ ਰੰਗ ਚੋਣਾਂ 'ਤੇ ਤੁਰੰਤ ਫੀਡਬੈਕ ਦੇ ਕੇ ਪਾਲਣਾ ਨੂੰ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ।
ਟੂਲ WCAG 2.1 ਵਿੱਚ ਦੱਸੇ ਗਏ ਸਾਪੇਖਿਕ ਲਿਊਮੀਨੈਂਸ ਫਾਰਮੂਲੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਗਿਣਦਾ ਹੈ। 1:1 ਅਨੁਪਾਤ ਦਾ ਮਤਲਬ ਕੋਈ ਕੰਟ੍ਰਾਸਟ ਨਹੀਂ (ਇੱਕੋ ਰੰਗ)। 21:1 ਅਨੁਪਾਤ ਵੱਧ ਤੋਂ ਵੱਧ ਕੰਟ੍ਰਾਸਟ ਹੈ (ਚਿੱਟੇ 'ਤੇ ਕਾਲਾ)। WCAG ਲੋੜਾਂ ਇਹ ਹਨ: AA ਆਮ ਟੈਕਸਟ ਨੂੰ 4.5:1, AA ਵੱਡੇ ਟੈਕਸਟ ਨੂੰ 3:1, AAA ਆਮ ਟੈਕਸਟ ਨੂੰ 7:1 ਅਤੇ AAA ਵੱਡੇ ਟੈਕਸਟ ਨੂੰ 4.5:1 ਚਾਹੀਦਾ ਹੈ। ਟੂਲ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਤੁਹਾਡਾ ਰੰਗ ਸੁਮੇਲ ਹਰ ਹੱਦ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ।
ਬਿਜ਼ੂਅਲ ਝਲਕ ਤੁਹਾਡੇ ਟੈਕਸਟ ਦਾ ਰੰਗ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ 'ਤੇ ਦਿਖਾਉਂਦੀ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ ਪੜ੍ਹਨਯੋਗਤਾ ਦਾ ਅਸਲ ਨਜ਼ਾਰਾ ਦਿੰਦੀ ਹੈ। ਝਲਕ ਵਿੱਚ ਆਮ (16px) ਅਤੇ ਵੱਡੇ (24px+) ਦੋਵੇਂ ਟੈਕਸਟ ਨਮੂਨੇ ਸ਼ਾਮਲ ਹਨ, ਕਿਉਂਕਿ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਦੀਆਂ ਵੱਖ-ਵੱਖ WCAG ਲੋੜਾਂ ਹੁੰਦੀਆਂ ਹਨ। ਰੰਗ ਵਿਵਸਥਿਤ ਕਰਦੇ ਹੀ ਪਾਸ/ਫੇਲ ਸੰਕੇਤਕ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ।
ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਅਤੇ ਡਿਜ਼ਾਈਨਰਾਂ ਲਈ, ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਵੈੱਬਸਾਈਟਾਂ ਸਾਰੇ ਵਰਤੋਂਕਾਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਹੋਣ। ਇਹ ਡਿਜ਼ਾਈਨ ਵਰਕਫਲੋ ਵਿੱਚ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਰਲ ਜਾਂਦਾ ਹੈ — ਰੰਗ ਚੁਣੋ, ਕੰਟ੍ਰਾਸਟ ਜਾਂਚੋ, ਲੋੜ ਹੋਵੇ ਤਾਂ ਵਿਵਸਥਿਤ ਕਰੋ, ਅਤੇ ਇਸ ਭਰੋਸੇ ਨਾਲ ਅੱਗੇ ਵਧੋ ਕਿ ਤੁਹਾਡਾ ਟੈਕਸਟ ਪੜ੍ਹਨਯੋਗ ਹੈ।
ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
- ਕਿਸੇ ਵੀ ਦੋ ਰੰਗਾਂ ਵਿਚਕਾਰ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੀ ਗਿਣਤੀ
- WCAG AA ਅਤੇ AAA ਪਾਲਣਾ ਜਾਂਚ
- ਆਮ ਟੈਕਸਟ (4.5:1) ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ (3:1) ਦੀਆਂ ਹੱਦਾਂ
- ਬੈਕਗ੍ਰਾਊਂਡ 'ਤੇ ਟੈਕਸਟ ਦੀ ਲਾਈਵ ਝਲਕ
- ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਸੁਝਾਏ ਗਏ ਰੰਗ ਵਿਵਸਥਾ
- HEX, RGB ਅਤੇ HSL ਇਨਪੁੱਟ ਸਹਾਇਤਾ
- ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
- ਸਾਈਨ-ਅੱਪ ਦੀ ਲੋੜ ਨਹੀਂ
ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ
- GuruAlpha 'ਤੇ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਖੋਲ੍ਹੋ।
- ਫੋਰਗ੍ਰਾਊਂਡ (ਟੈਕਸਟ) ਰੰਗ ਦਾਖਲ ਜਾਂ ਚੁਣੋ।
- ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਦਾਖਲ ਜਾਂ ਚੁਣੋ।
- ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਅਤੇ WCAG ਪਾਲਣਾ ਦੀ ਸਥਿਤੀ ਵੇਖੋ।
- ਆਮ ਅਤੇ ਵੱਡੇ ਦੋਵੇਂ ਟੈਕਸਟ ਦੀਆਂ ਲੋੜਾਂ ਜਾਂਚੋ।
- ਜੇ ਸੁਮੇਲ ਫੇਲ੍ਹ ਹੋਵੇ ਤਾਂ ਰੰਗ ਵਿਵਸਥਿਤ ਕਰੋ।
- AA ਜਾਂ AAA ਪੂਰਾ ਕਰਨ ਲਈ ਸੁਝਾਏ ਗਏ ਵਿਵਸਥਾ ਵਰਤੋ।
ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਵਰਤਣ ਦੇ ਸੁਝਾਅ
- AA ਪਾਲਣਾ (4.5:1) ਜਨਤਕ ਵੈੱਬਸਾਈਟਾਂ ਲਈ ਘੱਟੋ-ਘੱਟ ਹੈ।
- AAA ਪਾਲਣਾ (7:1) ਵੱਧ ਤੋਂ ਵੱਧ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਤਰਜੀਹੀ ਹੈ।
- ਵੱਡੇ ਟੈਕਸਟ (18px ਬੋਲਡ ਜਾਂ 24px ਰੈਗੂਲਰ) ਦੀਆਂ ਕੰਟ੍ਰਾਸਟ ਲੋੜਾਂ ਘੱਟ ਹੁੰਦੀਆਂ ਹਨ।
- ਜਾਣਕਾਰੀ ਪਹੁੰਚਾਉਣ ਲਈ ਸਿਰਫ਼ ਰੰਗ 'ਤੇ ਨਿਰਭਰ ਨਾ ਕਰੋ — ਟੈਕਸਟ ਲੇਬਲ ਜਾਂ ਪੈਟਰਨ ਸ਼ਾਮਲ ਕਰੋ।
- ਵਾਧੂ ਪਹੁੰਚਯੋਗਤਾ ਤਸਦੀਕ ਲਈ ਰੰਗ ਅੰਨ੍ਹਾਪਣ ਸਿਮੂਲੇਟਰਾਂ ਨਾਲ ਟੈਸਟ ਕਰੋ।
ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
WCAG ਕੀ ਹੈ?
WCAG (ਵੈੱਬ ਕੰਟੈਂਟ ਐਕਸੈਸਿਬਿਲਟੀ ਗਾਈਡਲਾਈਨਜ਼) ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਅੰਤਰਰਾਸ਼ਟਰੀ ਮਿਆਰ ਹੈ। ਇਹ ਅਪੰਗਤਾ ਵਾਲੇ ਲੋਕਾਂ ਲਈ ਸਮੱਗਰੀ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਦੀਆਂ ਲੋੜਾਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।
ਮੈਨੂੰ ਕਿਹੜੇ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੀ ਲੋੜ ਹੈ?
AA ਆਮ ਟੈਕਸਟ: 4.5:1। AA ਵੱਡਾ ਟੈਕਸਟ: 3:1। AAA ਆਮ ਟੈਕਸਟ: 7:1। AAA ਵੱਡਾ ਟੈਕਸਟ: 4.5:1। ਘੱਟੋ-ਘੱਟ AA ਪਾਲਣਾ ਦਾ ਟੀਚਾ ਰੱਖੋ।
'ਵੱਡਾ ਟੈਕਸਟ' ਕੀ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ?
18px (24pt) ਰੈਗੂਲਰ ਭਾਰ ਜਾਂ 14px (18.66pt) ਬੋਲਡ ਭਾਰ। ਵੱਡੇ ਟੈਕਸਟ ਦੀਆਂ ਕੰਟ੍ਰਾਸਟ ਲੋੜਾਂ ਘੱਟ ਹੁੰਦੀਆਂ ਹਨ ਕਿਉਂਕਿ ਵੱਡੇ ਅੱਖਰ ਪੜ੍ਹਨ ਵਿੱਚ ਸੌਖੇ ਹੁੰਦੇ ਹਨ।
ਕੀ ਇਹ ਗੈਰ-ਟੈਕਸਟ ਤੱਤਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ?
ਟੂਲ ਟੈਕਸਟ ਕੰਟ੍ਰਾਸਟ 'ਤੇ ਕੇਂਦਰਿਤ ਹੈ। WCAG ਗੈਰ-ਟੈਕਸਟ UI ਭਾਗਾਂ ਲਈ ਵੀ 3:1 ਕੰਟ੍ਰਾਸਟ ਦੀ ਮੰਗ ਕਰਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਇਸੇ ਟੂਲ ਨਾਲ ਹੱਥੀਂ ਜਾਂਚ ਸਕਦੇ ਹੋ।