⇄ रंग बदलें

कैसे उपयोग करें

1. अग्रभूमि (टेक्स्ट) रंग और पृष्ठभूमि रंग चुनें।
2. कंट्रास्ट अनुपात तुरंत अपडेट होता है।
3. सामान्य और बड़े टेक्स्ट के लिए WCAG रेटिंग (AA/AAA) जाँचें।
4. रंग अदला-बदली करने के लिए Swap पर क्लिक करें।

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

WCAG क्या है?

WCAG (Web Content Accessibility Guidelines) वेब सामग्री को सुलभ बनाने के लिए अंतर्राष्ट्रीय मानक हैं। स्तर AA सबसे अधिक आवश्यक मानक है। स्तर AAA उच्चतम है।

«बड़े टेक्स्ट» के रूप में क्या गिना जाता है?

बड़ा टेक्स्ट कम से कम 18 pt (24 px) या 14 pt (18.66 px) बोल्ड के रूप में परिभाषित है। इसकी कंट्रास्ट आवश्यकता कम है क्योंकि इसे पढ़ना आसान है।

कौन सा कंट्रास्ट अनुपात लक्षित करें?

मुख्य टेक्स्ट के लिए, कम से कम 4.5:1 (AA) का लक्ष्य रखें। सर्वोत्तम अभिगम्यता के लिए, 7:1 (AAA) का लक्ष्य रखें। शीर्षक और बड़े टेक्स्ट को कम से कम 3:1 की आवश्यकता होती है।

What WCAG actually measures

"Contrast" in web accessibility is not "how different the colors look", it's a precise ratio of relative luminance between two colors. Luminance is a perceptual approximation of how bright a color appears to a typical sighted observer. The ratio runs from 1:1 (two colors with identical luminance, invisible against each other) to 21:1 (pure black #000000 against pure white #ffffff). Three normative WCAG success criteria use this ratio:

• 1.4.3 Contrast (Minimum), Level AA: at least 4.5:1 for normal text, 3:1 for large text.
• 1.4.6 Contrast (Enhanced), Level AAA: at least 7:1 normal, 4.5:1 large.
• 1.4.11 Non-text Contrast, Level AA (added in WCAG 2.1), at least 3:1 for UI components and meaningful graphical objects against adjacent colors.

The 4.5:1 floor isn't arbitrary. WCAG's own derivation uses a 3:1 ANSI baseline for normal vision multiplied by 1.5 for users with 20/40 acuity (the threshold often used to define legal "low vision"). 4.5 = 3 × 1.5. The 7:1 AAA threshold extends the same logic to roughly 20/80 acuity. Logos, brand names, and incidental or decorative text are exempt, but everything else falls under the rule.

The formula

The contrast formula in WCAG technique G18 has three steps. Inputs are 8-bit sRGB channel values (0–255), each first converted to a 0–1 range:

1. Linearise sRGB (undo the gamma curve). For each channel V: if V ≤ 0.04045, V_linear = V ÷ 12.92; otherwise V_linear = ((V + 0.055) ÷ 1.055)^2.4. (Older WCAG documents used 0.03928; the W3C errata-updated to 0.04045 to match the formal sRGB spec, the numerical difference is negligible.)
2. Compute relative luminance: L = 0.2126·R + 0.7152·G + 0.0722·B (linearised). The weights come from the CIE 1931 standard observer's photopic luminosity function, the human eye is most sensitive to green (~71%), then red (~21%), then blue (~7%). This is why pure blue text on white can fail contrast even though the colors look very different.
3. Take the ratio: (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color and L2 is the darker. The 0.05 offset models ambient flare on a typical display, and prevents the ratio from blowing up when one color is near-black.

Worked example for black on white: white has L = 1.0, black has L = 0, so the ratio is (1 + 0.05) ÷ (0 + 0.05) = 21. That's the maximum possible contrast in sRGB.

What counts as "large text"?

WCAG defines large-scale text as at least 18 point (regular weight) or 14 point bold. Converted to CSS pixels at the W3C-stated 1pt = 1.333px:

• 18pt = 24px regular
• 14pt bold = 18.66px bold

Most browsers default body text to 16px / 12pt, not large. A common mistake is treating any heading as large; an <h3> styled at 18px regular still falls under the 4.5:1 normal-text rule.

The famous edge case: #767676 on white

Designers chasing minimalism often pick mid-greys for body text. Two values that look identical to the eye are on opposite sides of the WCAG line:

Foreground	Background	Ratio	AA Normal
#000000	#ffffff	21.00	Pass (max)
#595959	#ffffff	~7.0	Pass + AAA
#767676	#ffffff	4.54	Pass (just)
#777777	#ffffff	4.48	Fail
#959595	#ffffff	3.00	Fail (large only)
#ffff00	#ffffff	1.07	Fail

A one-character hex shift, the difference between #767676 and #777777: flips the same-looking grey from passing to failing, because WCAG explicitly forbids rounding ratios up. WebAIM specifically calls out #777777 as a "commonly-used shade of grey" that does not meet AA. This single gotcha drives a measurable share of automated-audit failures in real-world site scans.

Where the formula falls short

The relative-luminance formula is fast and deterministic, but it has well-documented perceptual flaws:

• Symmetry. WCAG 2 returns the same ratio whether you put light text on a dark background or dark text on a light one. Empirical reading studies show light-on-dark needs more contrast than dark-on-light to feel equally readable, partly because of pupil dilation and "halation" on bright glyphs against dark fields. Dark-mode UIs that pass WCAG 2 AA can still feel washed out.
• Spatial blindness. The formula ignores font weight, stroke thickness, and font size beyond the Large Text threshold. A hairline 18px font and a 900-weight 18px font are treated identically.
• Dark-mode over-pass. Per APCA documentation, the formula systematically overstates contrast for dark colors. Two dark greys that pass WCAG 2 mathematically can be visually indistinguishable on a real monitor.

APCA (Accessible Perceptual Contrast Algorithm) is the candidate replacement being prototyped for WCAG 3. It returns a single signed Lc value from roughly −108 to +106, is polarity-aware, and includes a font-weight / size lookup. APCA is currently a beta non-commercial reference, not a legal conformance target (production sites should still target WCAG 2.1 / 2.2 AA) but it's a more accurate readability check, especially for dark mode. Chrome DevTools has an APCA preview built into its color picker.

Why this matters legally

WCAG 2.2 became a W3C Recommendation on 5 October 2023, but the contrast criteria carry forward unchanged from 2.1. Color contrast is one of the most-cited issues in digital accessibility lawsuits, and several jurisdictions effectively make it mandatory:

• United States, Section 508 (refreshed 2017) is harmonised with WCAG 2.0 AA, so 4.5:1 is binding for federal procurement. ADA Title III court rulings have repeatedly cited WCAG AA as the de-facto standard for public-facing commercial sites. The DOJ adopted a Title II rule in April 2024 requiring state and local government web content to meet WCAG 2.1 AA, with phased deadlines later this decade.
• European Union, EN 301 549 embeds WCAG 2.1 AA. The European Accessibility Act (Directive 2019/882) compliance deadline was 28 June 2025, covering websites, mobile apps, e-commerce, banking, e-books and more. Microenterprises are exempt for services. Member-state penalties vary.
• United Kingdom, Equality Act 2010's "reasonable adjustments" duty applies to private and public sector. Public-sector bodies are bound by the 2018 accessibility regulations incorporating EN 301 549 / WCAG 2.1 AA.
• Canada, AODA (Ontario) and the federal Accessible Canada Act require WCAG 2.0 AA, with AODA's phased deadlines long passed.

Color contrast vs color blindness

A common point of confusion: the WCAG ratio is luminance-based and remains useful for most color-blind users, a 4.5:1 ratio derived from luminance corresponds to a strong perceptual signal even when hue cues are lost. That's why the contrast criteria sit alongside a separate criterion, 1.4.1 Use of Color, which forbids relying on color alone to convey information. Contrast doesn't tell you whether a red-vs-green chart is legible to a deuteranope, only whether each color individually contrasts with the chart background. Charts and stateful UI need patterns, labels or shapes layered on top of color.

Practical checklist

• Body text on white: stay at #595959 or darker for AAA; #767676 is the lightest grey that still passes AA Normal.
• Brand blues: many fall in the 3–4.5 range. #1976d2 is a typical Material blue at roughly 4.59:1, it just barely passes AA Normal on white. #42a5f5 at roughly 2.6:1 fails.
• Form borders: a 1px solid #ccc border on white is about 2.13:1, it fails 1.4.11. Use #767676 or darker.
• Focus indicators must reach 3:1 against the background. The default browser outline is often overridden by reset CSS without a replacement that meets the threshold.
• Placeholder text is technically incidental but users do read it, treat it as if 4.5:1 applied.
• Don't trust the eye for dark mode. WCAG 2 ratios systematically over-pass dark backgrounds. Cross-check with APCA in Chrome DevTools.

More questions

Why does pure yellow on white fail when it looks bright?

Yellow (#ffff00) on white is 1.07:1, almost no contrast at all. The luminance formula weights green at 71% and red at 21%, so yellow (R+G) has a luminance very close to white's. Yellow on black, by contrast, is 19.56:1, one of the most legible combinations known, which is why it's used for road signs and hard-hat warnings.

Should I always target AAA?

No. WCAG itself says: "It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content." AA is the legal target almost everywhere; AAA is for high-stakes informational reading (long-form content, government documents intended for the general public, accessibility-first publications).

Can automated tools catch every contrast failure?

No. axe-core, Lighthouse and similar audits flag text-on-flat-color failures reliably, but they cannot test text overlaid on background images, CSS gradients, pseudo-element backgrounds, or CSS border colors, those are flagged "incomplete" and need manual review. A live picker like this one is independently useful for sampling the dominant background color from an image and checking just the text/background pair before shipping.

Does this tool support transparency / alpha?

This page checks opaque hex pairs. If your text or background uses alpha, the actual contrast depends on whatever sits behind it, you'll need to compute the composited foreground first and check the resulting opaque colour.

Does anything get sent to a server?

No. The luminance formula and ratio are computed in your browser; the colors never leave your device. The page works offline once it's loaded.

संबंधित टूल