WCAG colour contrast checker
जाँचें कि आपके रंग पढ़ने योग्य और सुलभ हैं.
फोरग्राउंड और बैकग्राउंड रंग जाँचें, परिणाम देखें, WCAG AA और AAA चेक करें और साफ HEX या CSS वैरिएबल कॉपी करें।
पढ़ने योग्य रंग महत्वपूर्ण हैं।
This sample updates as you change the foreground and background colours.
कॉन्ट्रास्ट ratio
21.00
पास
पास
AA normal text · 4.5:1
पास
AA large text · 3:1
पास
AAA normal text · 7:1
पास
AAA large text · 4.5:1
कॉपी करें the colour pairing
उपयोग करें this in CSS, a design system, or a quick accessibility note.
:root {
--contrast-text: #111827;
--contrast-background: #FFFFFF;
}
Accessible उदाहरण to try
Start from a real पैलेट or a safe high-contrast pairing, then adjust it for your project.
What the score means
The higher the ratio, the easier the combination is to read for more people and more display conditions.
AA normal text
उपयोग करें at least 4.5:1 for body copy, navigation, links, buttons and most interface text.
AA large text
Large text can pass at 3:1, but higher contrast usually still feels clearer and more professional.
AAA text
7:1 is the stronger target for long reading, critical information, accessibility-first products and dashboards.