Contrast Checker: Instant WCAG Ratio aur AA/AAA

Contrast checker jo kisi bhi do colors ke liye WCAG contrast ratio compute kare aur AA/AAA pass ya fail dikhaye.

Jo color values aap daalte hain woh aapke browser mein locally process hote hain aur kuch bhi server par upload nahi hota.

Banaya aur maintain kiya: Udit Agarwal

Color codes ke saath kaam kar rahe hain? CSS Color Converter try karein.

Contrast Checker ke baare mein

Yeh contrast checker kisi bhi do colors ke beech WCAG color contrast ratio measure karta hai aur turant batata hai ki woh AA ya AAA accessibility levels pass karte hain ya nahi. Ek foreground (text) color aur ek background color hex ya rgb/rgba ke roop mein daalein, ya unhein built-in color swatches se pick karein, aur tool exact ratio plus normal aur large text ke liye pass/fail verdicts calculate karta hai. Yeh un developers, designers, aur QA engineers ke liye banaya gaya hai jinhein accessible interfaces, design systems, ya marketing pages banate waqt ek quick color contrast ratio check chahiye. Ek live preview aapke chune gaye colors mein sample text render karta hai taaki aap ek nazar mein legibility judge kar sakein aur accessibility contrast issues jaldi pakad sakein. Sab kuch aapke browser mein locally chalta hai, isliye aapke color values aapke device par process hote hain aur kuch bhi server par upload nahi hota.

Features

  • Do colors ke beech exact WCAG 2.x contrast ratio compute karta hai
  • hex (3 ya 6 digit), rgb(), aur rgba() color formats accept karta hai
  • Normal text (4.5:1) aur large text (3:1) ke liye AA pass/fail dikhata hai
  • Normal text (7:1) aur large text (4.5:1) ke liye AAA pass/fail dikhata hai
  • Foreground aur background dono ke liye native color picker swatches
  • Live preview jo aapke selected colors mein sample text render karta hai
  • Jab koi color value parse na ho to ek saaf validation message

Contrast Checker kaise use karein

  1. Apna text color Foreground (text) field mein daalein, ya use color swatch se pick karein.
  2. Apna background color Background field mein daalein, ya uska swatch use karein.
  3. Verdict badges ke upar dikhne wala contrast ratio padhein.
  4. Normal aur large text ke liye AA aur AAA pass/fail badges check karein.

Example

Input

Foreground (text): #777777
Background: #ffffff

Output

contrast ratio: 4.48
AA · normal text (4.5:1): Fail
AA · large text (3:1): Pass
AAA · normal text (7:1): Fail
AAA · large text (4.5:1): Fail

White par medium gray normal-size body text ke liye AA mein muski se fail hota hai.

Common errors aur troubleshooting

  • "red" ya "rebeccapurple" jaisa ek CSS color name paste karna ek invalid color error deta hai. — Named colors ke bajaay ek hex value (jaise #ff0000), ya rgb()/rgba() use karein.
  • Alpha wala 8-digit hex (#rrggbbaa) ek invalid color ke roop mein reject hota hai. — Alpha channel hatayein aur ek 6-digit hex dein; checker sirf opaque colors padhta hai.
  • Text AA large pass karta hai lekin AA normal fail karta hai, aur aap unsure hain ki kaunsa apply hota hai. — Large text ka matlab hai lagbhag 18pt+ (ya 14pt+ bold); body copy ko zyada strict 4.5:1 normal threshold poora karna chahiye.
  • Ek rgba() alpha value contrast ratio nahi badalti. — Ratio sirf RGB channels par compute hoti hai, isliye check karne se pehle transparency ko asli background color ke against flatten karein.

Aksar pooche jaane wale sawaal

Contrast checker kya hai aur WCAG ratio kyun maayne rakhti hai?
Ek contrast checker do colors compare karta hai aur unke beech WCAG contrast ratio report karta hai, jo bata deti hai ki text kitna readable hoga. ArrayKit Contrast Checker exact ratio plus AA aur AAA verdicts dikhata hai taaki aap confirm kar sakein ki text low-vision users ke liye legible hai.
WCAG pass karne ke liye mujhe kaunsi contrast ratio chahiye?
WCAG AA ke liye normal text ke liye kam se kam 4.5:1 aur large text ke liye 3:1 chahiye, jabki AAA ke liye normal text ke liye 7:1 aur large text ke liye 4.5:1 chahiye. Contrast Checker chaaron verdicts ek saath dikhata hai.
Apne text aur background ke liye contrast ratio kaise check karun?
Apna text color Foreground field mein aur apna background color Background field mein daalein (hex, rgb, ya rgba), ya swatches use karein. Contrast Checker type karte hi ratio aur AA/AAA badges live update karta hai.
3:1 threshold ke liye large text kya count hota hai?
Large text aam taur par lagbhag 18pt aur upar hai, ya bold hone par 14pt aur upar. Usse chhota kuch bhi normal text mana jaata hai aur use zyada 4.5:1 ratio poora karna chahiye.
Kya contrast ratio opacity ka hisaab rakhti hai?
Nahi. Ratio solid RGB values par based hai, isliye Contrast Checker mein check karne se pehle kisi bhi semi-transparent color ko uske actual background ke against flatten karein.
Kya Contrast Checker mein daale gaye colors kahin bheje jaate hain?
Nahi. Contrast Checker poori tarah aapke browser mein chalta hai, isliye jo colors aap daalte hain woh aapke device par rehte hain aur kuch bhi server par upload nahi hota.

Related tools

  • CSS Color Converter — HEX, RGB aur HSL ke beech ek live swatch ke saath convert karein.
  • CSS / SCSS Formatter — CSS/SCSS/LESS beautify ya minify karein, properties sort karein aur duplicates hatayein.
  • SVG Optimizer — SVG minify karein: comments, metadata aur editor cruft hatayein, aur whitespace collapse karein.
  • HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.
  • Image Optimizer — Images ko re-encode aur chhota karein (JPEG/WebP/PNG), optional resize ke saath.
  • Open Graph Generator — Open Graph aur Twitter meta tags generate karein, social card preview ke saath.
  • Markdown Preview — Markdown ko live preview ke saath HTML mein render karein.

Code Formatters ke aur tools

  • Mermaid Diagram Renderer — Mermaid diagrams (flow, sequence, gantt) ko aapke browser mein SVG mein render karein.
  • SVG Optimizer — SVG minify karein: comments, metadata aur editor cruft hatayein, aur whitespace collapse karein.
  • MongoDB Query Beautifier — MongoDB queries aur find() statements ko aapke browser mein beautify aur indent karein.
  • MongoDB Aggregation Beautifier — MongoDB aggregation pipelines ko aapke browser mein beautify aur indent karein.
  • MongoDB Explorer — MongoDB document ya collection sample explore karein aur uske field schema aur types ka anumaan lagayein.
  • OpenAPI / Swagger Formatter — OpenAPI / Swagger specs (JSON ya YAML) ko format aur validate karein, aur paths tatha operations ginein.
  • CSS Unit Converter — px, rem, em, pt aur % ke beech live convert karein.
  • Glob to Regex — Ek glob pattern ko JavaScript regex mein convert karein aur test karein.
  • HTML to Markdown — HTML ko clean Markdown mein convert karein GFM tables ke saath.
  • TOML Formatter — TOML format karein aur use JSON se aur JSON tak convert karein.
  • logfmt to JSON Converter — logfmt key=value logs ko JSON mein aur wapas convert karein, seedhe aapke browser mein.
  • dotenv to JSON — .env file ko JSON object mein aur JSON ko wapas .env mein badlein

Code Formatters ke sabhi tools dekhein (32) · Saare tools