ਰੰਗ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ

ਡਬਲਯੂ.ਸੀ.ਏ.ਜੀ.ਏ.ਏ. ਅਤੇ ਏ.ਏ.ਏ. ਦੇ ਵਿਰੁੱਧ ਫੋਰਗਰਾਉਂਡ/ਬੈਕਗ੍ਰਾਉਂਡ ਕੰਟ੍ਰਾਸਟ ਦੀ ਜਾਂਚ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਰੰਗ ਚੁਣਦੇ ਹੋ ਤਾਂ ਅਨੁਪਾਤ ਅੱਪਡੇਟ ਦੇਖੋ।

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

WCAG AA ਅਤੇ AAA ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੇ ਵਿਰੁੱਧ ਫੋਰਗਰਾਉਂਡ/ਬੈਕਗ੍ਰਾਉਂਡ ਕੰਟਰਾਸਟ ਦੀ ਜਾਂਚ ਕਰੋ।
ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ
ਵਰਤਣ ਲਈ ਮੁਫ਼ਤ

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਟੈਕਸਟ (ਫੋਰਗਰਾਉਂਡ) ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਚੁਣੋ।
ਵਿਪਰੀਤ ਅਨੁਪਾਤ ਅਤੇ AA/AAA ਨਤੀਜੇ ਪੜ੍ਹੋ।
ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਆਪਣੇ ਟੀਚੇ ਦੇ ਪੱਧਰ ਨੂੰ ਪਾਸ ਨਹੀਂ ਕਰਦੇ ਉਦੋਂ ਤੱਕ ਵਿਵਸਥਿਤ ਕਰੋ।

How this tool works

ਟੈਕਸਟ (ਫੋਰਗਰਾਉਂਡ) ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਚੁਣੋ।
ਵਿਪਰੀਤ ਅਨੁਪਾਤ ਅਤੇ AA/AAA ਨਤੀਜੇ ਪੜ੍ਹੋ।
ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਆਪਣੇ ਟੀਚੇ ਦੇ ਪੱਧਰ ਨੂੰ ਪਾਸ ਨਹੀਂ ਕਰਦੇ ਉਦੋਂ ਤੱਕ ਵਿਵਸਥਿਤ ਕਰੋ।

Recommended settings

ਪਹਿਲਾਂ ਡਿਫੌਲਟ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਫਿਰ ਲੋੜ ਪੈਣ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰੋ

Supported formats

Text / on-page input

File size and limits

ਪੁਰਾਣੇ ਫ਼ੋਨਾਂ 'ਤੇ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਮਲਟੀ-ਲੇਅਰ ਪ੍ਰੀਵਿਊਜ਼ ਹੌਲੀ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ।

Privacy

ਰੰਗ ਅਤੇ CSS ਜਨਰੇਟਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ। ਪੂਰਵਦਰਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ ਕਦੇ ਵੀ ਤੁਹਾਡੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਅੱਪਲੋਡ ਨਹੀਂ ਕਰਦੇ ਹਨ।

Common use cases

ਜਦੋਂ ਵੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਦੀ ਵਰਤੋਂ ਕਰੋ: WCAG AA ਅਤੇ AAA ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੇ ਵਿਰੁੱਧ ਫੋਰਗਰਾਉਂਡ/ਬੈਕਗ੍ਰਾਉਂਡ ਕੰਟ੍ਰਾਸਟ ਦੀ ਜਾਂਚ ਕਰੋ।

Troubleshooting

ਪੇਸਟ ਕਰਨ ਤੋਂ ਬਾਅਦ ਪੂਰਵਦਰਸ਼ਨ ਵੱਖਰਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਆਪਣੇ ਪੰਨੇ 'ਤੇ ਪ੍ਰਤੀਯੋਗੀ CSS ਦੀ ਜਾਂਚ ਕਰੋ (ਰੀਸੈੱਟ, ਵਿਰਾਸਤੀ ਰੰਗ)। ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਨਿਯਮ ਨੂੰ ਇੱਕ ਅਲੱਗ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਕੀ ਇਹ ਮੇਰਾ CSS ਅੱਪਲੋਡ ਕਰਦਾ ਹੈ?

ਨਹੀਂ। ਜਨਰੇਟਰ ਅਤੇ ਕਨਵਰਟਰ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਚੱਲਦੇ ਹਨ।

ਕੀ ਮੈਨੂੰ ਇੱਕ ਖਾਤੇ ਦੀ ਲੋੜ ਹੈ?

ਨਹੀਂ। ਟੂਲ ਖੋਲ੍ਹੋ, ਨਿਯੰਤਰਣ ਬਦਲੋ, ਅਤੇ CSS ਦੀ ਨਕਲ ਕਰੋ।