Color Contrast Checker

Frequently Asked Questions

How is the WCAG contrast ratio calculated?

Contrast = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. The ratio ranges from 1:1 (identical) to 21:1 (black on white).

How is relative luminance computed from RGB?

Each sRGB channel is normalized to 0–1, linearized (c ≤ 0.03928 → c ÷ 12.92, else ((c + 0.055) ÷ 1.055)²·⁴), then combined as L = 0.2126·R + 0.7152·G + 0.0722·B. Green is weighted most because the eye is most sensitive to it.

What ratios pass AA and AAA?

Normal text needs ≥ 4.5:1 for AA and ≥ 7:1 for AAA. Large text (≥ 18.66 px bold or ≥ 24 px regular) needs ≥ 3:1 for AA and ≥ 4.5:1 for AAA.

Do UI components and icons have a contrast requirement?

Yes - WCAG 2.1 requires non-text elements like form borders, focus indicators, and meaningful icons to meet at least 3:1 against adjacent colors.

Provided by AllCalculators.io
Free online calculators for everyday. No registration required.

Estimates for informational purposes only.

Important Disclaimer: Estimates for informational purposes only.

This calculator provides estimates for informational purposes only. Results are based on assumptions and may not reflect actual outcomes. Consult qualified professionals in relevant fields before making important decisions based on these results.

JavaScript is required to use the interactive calculator above. The questions and answers below remain readable without JavaScript.

How This Calculator Works

Web Content Accessibility Guidelines (WCAG) define legible text in terms of the contrast ratio between the text color and the color directly behind it. The ratio runs from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). This calculator takes two hex colors - your foreground (text) and background - converts each to its relative luminance using the official WCAG formula, and reports the contrast ratio together with clear pass/fail badges for the four conformance thresholds. Those thresholds are 4.5:1 for normal text at level AA, 3:1 for large text at AA, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA. "Large" means roughly 18.66px bold or 24px regular and up. Designers and developers use this constantly to verify that body copy, links, placeholder text, and disabled states are actually readable for users with low vision, and to keep automated accessibility audits green.

Formula / Method

First each 8-bit channel is normalized to 0–1 and linearized: for a channel value s, the linear component is s ÷ 12.92 when s ≤ 0.03928, otherwise ((s + 0.055) ÷ 1.055)^2.4. Relative luminance L = 0.2126×R + 0.7152×G + 0.0722×B using those linearized channels - the green weight dominates because the human eye is most sensitive to green. The contrast ratio is then (L_lighter + 0.05) ÷ (L_darker + 0.05), where the 0.05 terms model ambient screen flare so the ratio never blows up to infinity for near-black colors. The order of the two colors does not matter because we always put the brighter luminance on top. A 3-digit shorthand hex like #abc is expanded to #aabbcc before parsing.

Worked Example

Dark gray text #333333 on a white background #ffffff. White linearizes to L = 1.0. For #333 each channel is 51 ÷ 255 = 0.2, which is above 0.03928, so the linear value is ((0.2 + 0.055) ÷ 1.055)^2.4 ≈ 0.0331; luminance L ≈ 0.0331. The ratio is (1.0 + 0.05) ÷ (0.0331 + 0.05) = 1.05 ÷ 0.0831 ≈ 12.6:1 - comfortably passing every level including AAA normal text. Lighten the text to #999999 and the ratio falls to about 2.8:1, which fails AA for both normal and large text; that is exactly the kind of "looks fine to me" gray placeholder that fails an audit.

Common Mistakes

Judging contrast by eye - perceived brightness is unreliable; two colors that look distinct can still fail the ratio.

Testing against the page background instead of the actual element behind the text - cards, overlays, and gradients change the effective background.

Forgetting semi-transparent text or backgrounds - an alpha channel blends colors, so compute the resolved opaque color first.

Applying the 3:1 large-text rule to body copy - that lower bar is only for genuinely large or bold text.

Assuming AA is enough for everyone - AAA (7:1) is the comfortable target for users with significant low vision.

Tips & FAQ

What counts as large text? About 18.66px (14pt) bold or 24px (18pt) regular and larger - it qualifies for the relaxed 3:1 and 4.5:1 thresholds. Does this cover color blindness? Partly - luminance contrast helps, but never rely on color alone to convey meaning; add icons or text labels. Why the 0.05 constants? They model screen glare and viewing-flare so the formula matches real-world legibility and avoids dividing by near-zero. Do non-text elements need contrast too? Yes - WCAG 1.4.11 requires 3:1 for UI components and graphical objects like icons and form borders. What about hover and focus states? Each state needs to pass on its own; a link that only meets contrast on hover fails for keyboard users at rest. Is 21:1 the maximum? Yes - pure black on pure white; anything above 12:1 is plenty for any text. Aim for AA as a floor and AAA where you can, especially for long-form reading content where eye fatigue matters most.

Frequently Asked Questions

Related Developer Tools Calculators