कंट्रास्ट जाँचक

WCAG AA और AAA के अनुसार पाठ और पृष्ठभूमि कंट्रास्ट जाँचें

फ़ाइलें आपके डिवाइस से बाहर नहीं जातीं
ब्राउज़र में चलता है
मुफ़्त, बिना खाते, बिना वॉटरमार्क

Text color

Background color

Text opacity: 100%

Contrast ratio

4.54:1

Passes AA for all text

AANormal text
4.5:1
Pass
AALarge text
3:1 · 24px+, or 18.66px+ bold
Pass
AAANormal text
7:1
Fail
AAALarge text
4.5:1 · 24px+, or 18.66px+ bold
Pass
AAUI components & graphics
3:1 · Icons, borders of inputs, focus rings
Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Sample text

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes

Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone

Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.

कंट्रास्ट जाँचक का उपयोग कैसे करें

पाठ और पृष्ठभूमि रंग की जोड़ी को WCAG 2 (सामान्य पाठ, बड़े पाठ और UI घटकों के लिए AA और AAA) से जाँचें और WCAG 3 मसौदे से APCA हल्कापन कंट्रास्ट देखें। जोड़ी असफल होने पर यह निकटतम पास होने वाले रंग सुझाता है।

1
पाठ रंग और पृष्ठभूमि रंग HEX, rgb(), hsl(), oklch() या रंग नाम के रूप में दर्ज करें, या रंग चयनक खोलने के लिए स्वैच पर क्लिक करें।
2
कंट्रास्ट अनुपात और हर AA और AAA जाँच का पास या फेल परिणाम पढ़ें।
3
पूर्वावलोकन देखें, अपना नमूना पाठ टाइप करें, और उल्टा जाँचने के लिए रंग अदला-बदली करें उपयोग करें।
4
निकटतम पास रंग के अंतर्गत AA (4.5:1) या AAA (7:1) के लिए पाठ समायोजित करें या पृष्ठभूमि समायोजित करें सुझाव पर लागू करें क्लिक करें।
5
रंग बदलते ही पृष्ठ URL दोनों रंग रखता है, इसलिए परिणाम साझा करने के लिए उसे कॉपी कर सकते हैं।

अक्सर पूछे जाने वाले प्रश्न

मुझे कितना कंट्रास्ट अनुपात चाहिए?

WCAG AA सामान्य पाठ के लिए 4.5:1 और बड़े पाठ (24px और ऊपर, या 18.66px बोल्ड) तथा आइकन और इनपुट बॉर्डर जैसे UI घटकों के लिए 3:1 माँगता है। AAA 7:1 और 4.5:1 माँगता है।

4.497:1 को 4.50 के बजाय 4.49 क्यों दिखाया जाता है?

अनुपात कभी सीमा के पार ऊपर नहीं गोल किया जाता, ताकि 4.5:1 से बस चूकने वाली जोड़ी पास जैसी न दिखे।

क्या मैं अर्ध-पारदर्शी पाठ जाँच सकता हूँ?

हाँ। पाठ अपारदर्शिता स्लाइडर उपयोग करें; अनुपात मापने से पहले पारभासी पाठ पृष्ठभूमि पर मिश्रित किया जाता है।

APCA संख्या क्या है?

APCA WCAG 3 मसौदे से आता है और हल्कापन कंट्रास्ट (Lc) देता है जो इस पर निर्भर करता है कि कौन सा रंग पाठ है; ऋणात्मक मान गहरी पृष्ठभूमि पर हल्के पाठ का मतलब है। यह अभी मसौदा है, इसलिए WCAG 2 अनुपात सामान्य अनुपालन लक्ष्य बने रहते हैं।

सुझाए रंग कैसे चुने जाते हैं?

केवल हल्कापन बदला जाता है (OKLCH में), इसलिए आपके रंग का वर्ण और एहसास वही रहता है। यदि कोई दिशा लक्ष्य तक नहीं पहुँचती, तो यह कहता है केवल हल्कापन बदलकर नहीं पहुँचा जा सकता; दूसरा रंग समायोजित करके देखें।