WCAG 2.1 / 2.2 ਮੁਤਾਬਕ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੀ ਜਾਂਚ
ਇਹ ਟੂਲ ਡਿਜ਼ਾਈਨਰਾਂ, ਡਿਵੈਲਪਰਾਂ ਅਤੇ ਕੰਟੈਂਟ ਟੀਮਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਦੇ ਵਿਚਕਾਰ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ (contrast ratio) ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਜਾਂਚ ਰਾਹੀਂ ਇਹ ਪਤਾ ਲਗਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਰੰਗਾਂ ਦਾ ਸੁਮੇਲ WCAG 2.1 / 2.2 ਦੇ ਮਿਆਰਾਂ ਮੁਤਾਬਕ ਪਹੁੰਚਯੋਗਤਾ (accessibility) ਦੇ ਨਿਯਮਾਂ 'ਤੇ ਖਰਾ ਉਤਰਦਾ ਹੈ ਜਾਂ ਨਹੀਂ।
ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਟੂਲ ਵਿੱਚ ਰੰਗ ਦਰਜ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਆਮ ਟੈਕਸਟ (normal text), ਵੱਡੇ ਟੈਕਸਟ (large text) ਅਤੇ UI ਕੰਪੋਨੈਂਟਸ ਲਈ AA ਅਤੇ AAA ਪੱਧਰਾਂ ਦੇ ਨਤੀਜੇ ਦਿਖਾਉਂਦਾ ਹੈ। ਸ਼ੁਰੂਆਤੀ ਤੌਰ 'ਤੇ, ਟੂਲ ਵਿੱਚ ਟੈਕਸਟ ਦੇ ਰੰਗ ਲਈ #4f46e5 ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇ ਰੰਗ ਲਈ #ffffff ਸੈੱਟ ਹੁੰਦਾ ਹੈ, ਜਿਸਦਾ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ 6.29 ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਆਪਣੀ ਲੋੜ ਅਨੁਸਾਰ ਰੰਗਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਜਾਂ ਸਵੈਪ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇ ਰੰਗਾਂ ਨੂੰ ਆਪਸ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹੋ।
ਰੰਗ ਦਰਜ ਕਰਨ ਦੇ ਫਾਰਮੈਟ
ਇਸ ਟੂਲ ਵਿੱਚ ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇ ਰੰਗਾਂ ਨੂੰ ਪਰਖਣ ਲਈ ਵੱਖ-ਵੱਖ ਫਾਰਮੈਟਾਂ ਵਿੱਚ ਮੁੱਲ ਦਰਜ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ:
- Hex ਮੁੱਲ: ਜਿਵੇਂ ਕਿ
#1a1a1aਜਾਂ#ffffff। - rgb() ਮੁੱਲ: ਜਿਵੇਂ ਕਿ
rgb(26, 26, 26)ਜਾਂrgb(255, 255, 255)। - hsl() ਮੁੱਲ: ਤੁਸੀਂ ਐਚ.ਐਸ.ਐਲ ਫਾਰਮੈਟ ਵਿੱਚ ਵੀ ਰੰਗਾਂ ਦੇ ਮੁੱਲ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ।
ਜੇਕਰ ਤੁਹਾਡੇ ਵੱਲੋਂ ਦਰਜ ਕੀਤਾ ਗਿਆ ਟੈਕਸਟ ਦਾ ਰੰਗ ਅਵੈਧ ਹੈ, ਤਾਂ ਟੂਲ "ਇੱਕ ਵੈਧ ਟੈਕਸਟ ਰੰਗ ਦਰਜ ਕਰੋ, ਜਿਵੇਂ #1a1a1a ਜਾਂ rgb(26, 26, 26)।" ਦਾ ਸੁਨੇਹਾ ਦਿਖਾਏਗਾ। ਇਸੇ ਤਰ੍ਹਾਂ, ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ ਗਲਤ ਹੋਣ 'ਤੇ "ਇੱਕ ਵੈਧ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਦਰਜ ਕਰੋ, ਜਿਵੇਂ #ffffff ਜਾਂ rgb(255, 255, 255)।" ਦਾ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੇ ਨਿਯਮ ਅਤੇ ਸੀਮਾਵਾਂ
ਰੰਗਾਂ ਦੇ ਵਿਚਕਾਰ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ 1:1 (ਜਿੱਥੇ ਕੋਈ ਕੰਟ੍ਰਾਸਟ ਨਹੀਂ ਹੁੰਦਾ) ਤੋਂ ਲੈ ਕੇ 21:1 (ਚਿੱਟੇ ਪਿਛੋਕੜ 'ਤੇ ਕਾਲਾ ਟੈਕਸਟ) ਤੱਕ ਹੁੰਦਾ ਹੈ। WCAG 2.1 / 2.2 ਦੇ ਫਾਰਮੂਲੇ ਦੇ ਅਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਲਈ ਹੇਠ ਲਿਖੇ ਨਿਯਮ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:
| ਸ਼੍ਰੇਣੀ | AA ਪੱਧਰ ਲਈ ਲੋੜੀਂਦਾ ਅਨੁਪਾਤ | AAA ਪੱਧਰ ਲਈ ਲੋੜੀਂਦਾ ਅਨੁਪਾਤ |
|---|---|---|
| ਆਮ ਟੈਕਸਟ | ਘੱਟੋ-ਘੱਟ 4.5:1 | ਘੱਟੋ-ਘੱਟ 7:1 |
| ਵੱਡਾ ਟੈਕਸਟ | ਘੱਟੋ-ਘੱਟ 3:1 | ਘੱਟੋ-ਘੱਟ 4.5:1 |
| UI ਅਤੇ ਗ੍ਰਾਫਿਕਸ | ਘੱਟੋ-ਘੱਟ 3:1 (ਸਿੰਗਲ ਥ੍ਰੈਸ਼ਹੋਲਡ) | ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ |
ਵੱਡੇ ਟੈਕਸਟ ਨੂੰ ਅਜਿਹੇ ਟੈਕਸਟ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ 18pt (ਲਗਭਗ 24px) ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ ਹੋਵੇ, ਜਾਂ ਜੇਕਰ ਟੈਕਸਟ ਬੋਲਡ (bold) ਹੋਵੇ ਤਾਂ ਉਹ 14pt (ਲਗਭਗ 18.5px) ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ ਹੋਵੇ। UI ਅਤੇ ਗ੍ਰਾਫਿਕਸ ਵਾਲੀ ਲਾਈਨ ਲਈ ਕੋਈ AA ਜਾਂ AAA ਦਾ ਵੱਖਰਾ ਪੱਧਰ ਨਹੀਂ ਹੁੰਦਾ, ਇਸ ਲਈ ਟੂਲ ਇਸ ਸ਼੍ਰੇਣੀ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਹੀ ਨਤੀਜਾ ਦਿਖਾਉਂਦਾ ਹੈ।
ਨਤੀਜੇ ਅਤੇ ਫੈਸਲੇ (Verdict) ਦੀ ਵਿਆਖਿਆ
ਜਦੋਂ ਤੁਸੀਂ ਰੰਗਾਂ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹੋ, ਤਾਂ ਟੂਲ ਹਰੇਕ ਸ਼੍ਰੇਣੀ ਲਈ "ਪਾਸ" ਜਾਂ "ਫੇਲ੍ਹ" ਦਾ ਨਤੀਜਾ ਦਿੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਸਭ ਤੋਂ ਉੱਚੇ ਪਾਸ ਹੋਏ ਪੱਧਰ ਦੇ ਅਧਾਰ 'ਤੇ ਇੱਕ ਮੁੱਖ ਫੈਸਲਾ (verdict) ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ:
- ਆਮ ਟੈਕਸਟ ਲਈ AA ਅਤੇ AAA ਪਾਸ ਕਰਦਾ ਹੈ। — ਇਹ ਉਦੋਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਰੰਗਾਂ ਦਾ ਸੁਮੇਲ ਸਭ ਤੋਂ ਸਖ਼ਤ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ।
- ਆਮ ਟੈਕਸਟ ਲਈ AA ਪਾਸ ਕਰਦਾ ਹੈ। — ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਸੁਮੇਲ ਆਮ ਟੈਕਸਟ ਦੇ AA ਪੱਧਰ ਲਈ ਢੁਕਵਾਂ ਹੈ।
- ਸਿਰਫ਼ ਵੱਡੇ ਟੈਕਸਟ ਲਈ AA ਪਾਸ ਕਰਦਾ ਹੈ। — ਇਹ ਉਦੋਂ ਆਉਂਦਾ ਹੈ ਜਦੋਂ ਕੰਟ੍ਰਾਸਟ ਘੱਟ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਹ ਸਿਰਫ਼ ਵੱਡੇ ਅਕਾਰ ਦੇ ਟੈਕਸਟ ਲਈ ਹੀ ਸਹੀ ਹੁੰਦਾ ਹੈ।
- AA ਦੇ ਘੱਟੋ-ਘੱਟ ਪੱਧਰ ਤੋਂ ਹੇਠਾਂ — ਕੰਟ੍ਰਾਸਟ ਵਧਾਓ। — ਇਹ ਸੁਨੇਹਾ ਉਦੋਂ ਮਿਲਦਾ ਹੈ ਜਦੋਂ ਰੰਗਾਂ ਦਾ ਕੰਟ੍ਰਾਸਟ ਬਹੁਤ ਘੱਟ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸੁਧਾਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਨਿੱਜਤਾ ਅਤੇ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ
ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡੀ ਨਿੱਜਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ। ਹਰ ਜਾਂਚ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੀ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਦਰਜ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ। ਸਾਰੀ ਗਣਨਾ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਆਪਣੇ ਉਪਕਰਨ 'ਤੇ ਹੀ ਹੁੰਦੀ ਹੈ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)
AA ਅਤੇ AAA ਨਤੀਜਿਆਂ ਦਾ ਕੀ ਅਰਥ ਹੈ?
AA ਉਹ ਪੱਧਰ ਹੈ ਜਿਸਦਾ ਉਦੇਸ਼ ਜ਼ਿਆਦਾਤਰ ਸਾਈਟਾਂ ਰੱਖਦੀਆਂ ਹਨ: ਇਸਨੂੰ ਆਮ ਟੈਕਸਟ ਲਈ ਘੱਟੋ-ਘੱਟ 4.5:1 ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ 3:1 ਦੇ ਅਨੁਪਾਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। AAA ਵਧੇਰੇ ਸਖ਼ਤ ਹੈ — ਆਮ ਟੈਕਸਟ ਲਈ 7:1 ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ 4.5:1। ਇਹ ਅਨੁਪਾਤ 1:1 (ਕੋਈ ਕੰਟ੍ਰਾਸਟ ਨਹੀਂ) ਤੋਂ 21:1 (ਚਿੱਟੇ 'ਤੇ ਕਾਲਾ) ਤੱਕ ਚੱਲਦਾ ਹੈ।
ਵੱਡੇ ਟੈਕਸਟ ਵਜੋਂ ਕੀ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ?
18pt (ਲਗਭਗ 24px) ਤੋਂ ਟੈਕਸਟ, ਜਾਂ ਬੋਲਡ ਹੋਣ 'ਤੇ 14pt (ਲਗਭਗ 18.5px)। ਵੱਡਾ ਟੈਕਸਟ ਘੱਟ ਕੰਟ੍ਰਾਸਟ 'ਤੇ ਵੀ ਪੜ੍ਹਨਯੋਗ ਰਹਿੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਸਖ਼ਤ ਨਾਰਮਲ-ਟੈਕਸਟ ਸੀਮਾਵਾਂ ਦੀ ਬਜਾਏ 3:1 'ਤੇ AA ਅਤੇ 4.5:1 'ਤੇ AAA ਪਾਸ ਕਰਦਾ ਹੈ।
ਮੈਂ ਕਿਹੜੇ ਰੰਗ ਫਾਰਮੈਟ ਦਰਜ ਕਰ ਸਕਦਾ ਹਾਂ?
ਇੱਕ hex ਮੁੱਲ ਜਿਵੇਂ #1a1a1a, ਇੱਕ rgb() ਮੁੱਲ ਜਿਵੇਂ rgb(26, 26, 26), ਜਾਂ ਇੱਕ hsl() ਮੁੱਲ ਟਾਈਪ ਕਰੋ — ਜਾਂ ਰੰਗ ਚੁਣਨ ਲਈ ਕਿਸੇ ਵੀ ਸਵੈਚ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇ ਰੰਗਾਂ ਨੂੰ ਆਪਸ ਵਿੱਚ ਬਦਲਣ ਲਈ ਸਵੈਪ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕੀ ਇਹ WCAG 2 ਹੈ ਜਾਂ ਨਵਾਂ APCA ਤਰੀਕਾ?
ਇਹ WCAG 2.1 / 2.2 ਫਾਰਮੂਲੇ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜਿਸਦਾ ਅੱਜਕੱਲ੍ਹ ਐਕਸੈਸਬਿਲਟੀ ਨਿਯਮਾਂ ਅਤੇ ਆਡਿਟਾਂ ਵਿੱਚ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। APCA ਇੱਕ ਨਵਾਂ, ਵਧੇਰੇ ਅਨੁਭਵੀ ਤਰੀਕਾ ਹੈ ਜੋ ਅਜੇ ਵੀ WCAG 3 ਲਈ ਤਿਆਰ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ — ਇਹ ਵਧੀਆ ਹੈ, ਪਰ ਅਜੇ ਤੱਕ ਇੱਕ ਪਾਲਣਾ ਮਿਆਰ (compliance standard) ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਇੱਥੇ ਪਾਸ ਨਤੀਜੇ ਇਸਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ।