ਰੰਗ ਵਿਰੋਧ ਚੈੱਕਰ

ਪਹੁੰਚ ਯੋਗਤਾ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਅਗਲੇ ਅਤੇ ਪਿਛਲੇ ਰੰਗਾਂ ਦੇ ਵਿਰੋਧ ਅਨੁਪਾਤ ਦੀ ਜਾਂਚ ਕਰੋ।

ਆਪਣੇ ਰੰਗ ਜਾਂਚੋ

ਰੰਗ ਦੇ ਸੰਯੋਜਨਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਉਹ ਪਾਠ ਪੜ੍ਹਨ ਯੋਗਤਾ ਲਈ WCAG ਪਹੁੰਚ ਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਹਨ।

11.80 ਤੋਂ 1
ਵਿਰੋਧ
AAA
ਟੈਕਸਟ ਨਤੀਜਾ
ਬਹੁਤ ਵਧੀਆ

ਤੁਲਨਾ ਕੀਤੀ: #000000 'ਤੇ #F1BA2C

ਟੈਕਸਟ

16px, ਸਧਾਰਨ (400)

ਸਧਾਰਣ ਟੈਕਸਟ ਵਜੋਂ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ.

  • AA (WCAG 1.4.3): ਘੱਟੋ-ਘੱਟ 4.5:1

    ਪਾਸ
  • AAA (WCAG 1.4.6): ਘੱਟੋ-ਘੱਟ 7:1

    ਪਾਸ

UI ਕੰਪੋਨੇੰਟ ਅਤੇ ਗ੍ਰਾਫਿਕਸ

ਆਇਕਨ, ਇਨਪੁਟ ਬਾਰਡਰ, ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਅਤੇ ਉਹ ਹੋਰ ਹਿੱਸੇ ਜੋ ਇੰਟਰਫੇਸ ਵਰਤਣ ਲਈ ਵੇਖਣੇ ਲਾਜ਼ਮੀ ਹੁੰਦੇ ਹਨ.

  • AA (WCAG 1.4.11): ਘੱਟੋ-ਘੱਟ 3:1

    ਪਾਸ
11.80 ਤੋਂ 1. ਟੈਕਸਟ: AA 'ਤੇ ਪਾਸ, AAA 'ਤੇ ਪਾਸ. ਯੂਆਈ ਘਟਕ: ਪਾਸ.
ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਜਾਂਚਿਆ ਜਾਂਦਾ ਹੈ
ਤੁਲਨਾ ਕੀਤੇ ਗਏ ਰੰਗ (ਬਲੇਂਡਿੰਗ ਤੋਂ ਬਾਅਦ)
ਟੈਕਸਟ #000000, ਬੈਕਗ੍ਰਾਊਂਡ #F1BA2C
ਸੰਬੰਧਿਤ ਚਮਕ
ਟੈਕਸਟ 0.0000, ਬੈਕਗ੍ਰਾਊਂਡ 0.5400
ਫਾਰਮੂਲਾ
(L1 + 0.05) / (L2 + 0.05) ਜਿੱਥੇ L1 ਲਾਈਟਰ ਰੰਗ ਦੀ ਚਮਕ ਹੈ ਅਤੇ L2 ਡਾਰਕਰ ਰੰਗ ਦੀ.
ਸਹੀ ਅਨੁਪਾਤ
11.8000 ਤੋਂ 1, ਦਿਖਾਇਆ ਗਿਆ ਹੈ 11.80 ਤੋਂ 1. ਦਿਖਾਇਆ ਗਿਆ ਮੁੱਲ ਕੱਟਿਆ ਗਿਆ ਹੈ, ਗੋਲ ਨਹੀਂ ਕੀਤਾ ਗਿਆ, ਇਸ ਲਈ ਇਹ ਕਦੇ ਵੀ ਅਸਲ ਤੋਂ ਵਧੀਆ ਨਹੀਂ ਲੱਗਦਾ. ਸਹੀ ਮੁੱਲ ਹੀ ਲੋੜਾਂ ਨਾਲ ਤੁਲਨਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ.

ਟੈਕਸਟ ਆਕਾਰ: 16px, ਸਧਾਰਨ (400)

ਸਧਾਰਣ ਟੈਕਸਟ ਵਜੋਂ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ. ਵੱਡਾ ਟੈਕਸਟ ਘੱਟੋ-ਘੱਟ 24px (18pt) ਹੁੰਦਾ ਹੈ, ਜਾਂ ਜੇ ਬੋਲਡ ਹੋਵੇ (ਵਜ਼ਨ 700 ਜਾਂ ਵੱਧ) ਤਾਂ ਘੱਟੋ-ਘੱਟ 18.67px (14pt). ਆਕਾਰ ਕੱਟ ਕੇ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ, ਗੋਲ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ.

ਸਧਾਰਣ ਟੈਕਸਟ ਵਜੋਂ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ. ਵੱਡਾ ਟੈਕਸਟ ਘੱਟੋ-ਘੱਟ 24px (18pt) ਹੁੰਦਾ ਹੈ, ਜਾਂ ਜੇ ਬੋਲਡ ਹੋਵੇ (ਵਜ਼ਨ 700 ਜਾਂ ਵੱਧ) ਤਾਂ ਘੱਟੋ-ਘੱਟ 18.67px (14pt). ਆਕਾਰ ਕੱਟ ਕੇ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ, ਗੋਲ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ.

Aa
ਪੂਰਵ ਦਰਸ਼ਨ ਸਿਰਲੇਖ

ਚੁਸਤ ਭੂਰਾ ਲੂਮੜੀ ਆਲਸੀ ਕੁੱਤੇ ਉੱਤੇ ਛਾਲ ਮਾਰਦੀ ਹੈ

ਛੋਟੇ ਪਾਠ ਦਾ ਉਦਾਹਰਣ (12px)

ਪਾਠ
#000000
ਪਿਛੋਕੜ
#f1ba2c

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 ਹਨ।

ਟੈਕਸਟ ਜਾਂ ਪਿਛੋਕੜ ਦੇ ਰੰਗ ਬਦਲਣ ਲਈ ਸਾਡੀ ਆਟੋਮੈਟਿਕ ਫਿਕਸ ਸੁਵਿਧਾ ਵਰਤੋ, ਜੋ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਦੇ ਇਰਾਦੇ ਨੂੰ ਬਣਾਈ ਰੱਖਦੀ ਹੈ, ਜਾਂ ਦ੍ਰਿਸ਼ਟੀ ਸੰਕੇਤਕਾਂ ਵਾਲੇ HSL ਸਲਾਈਡਰਾਂ ਨਾਲ ਹੱਥੀਂ ਰੰਗ ਐਡਜਸਟ ਕਰੋ, ਜੋ AA/AAA ਅਨੁਕੂਲਤਾ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਖੇਤਰ ਦਿਖਾਉਂਦੇ ਹਨ।

ਹਰੇ ਖੇਤਰ ਅਤੇ AA/AAA ਨਿਸ਼ਾਨ WCAG ਅਨੁਕੂਲਤਾ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਰੇਂਜ ਦਿਖਾਉਂਦੇ ਹਨ। ਦਿਸ਼ਾ ਸੰਕੇਤ (ਹਲਕਾ/ਗੂੜ੍ਹਾ) ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਰੰਗ ਮੇਲ ਦੇ ਆਧਾਰ 'ਤੇ ਬਿਹਤਰ ਵਿਰੋਧ ਵੱਲ ਰਾਹ ਦਿਖਾਉਂਦੇ ਹਨ।

ਹਾਂ, ਤੁਸੀਂ ਕੋਈ ਵੀ ਹੈਕਸ ਰੰਗ ਕੋਡ ਦਾਖਲ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਰੰਗ ਚੋਣਕਾਰ ਨਾਲ ਆਪਣੇ ਰੰਗ ਚੁਣ ਸਕਦੇ ਹੋ। URL ਆਪਣੇ ਆਪ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਖ਼ਾਸ ਰੰਗ ਮੇਲ ਸਾਂਝੇ ਕਰ ਸਕੋ।