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 ਰੰਗ ਪੇਸਟ ਕਰ ਸਕਦੇ ਹੋ। ਰੰਗ ਤੁਹਾਡੇ ਡਿਵਾਈਸ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।