What contrast thresholds does WCAG commonly discuss?

Guidance frequently cited for Success Criterion style thresholds is about 4.5:1 for normal text and 3:1 for large text at AA, with stronger 7:1 and 4.5:1 figures often associated with AAA. Exact applicability depends on text size, weight, and the criterion you target. Use this tool to inspect ratios; a formal audit still evaluates context.

Does a pass here mean my site is WCAG compliant?

No. Contrast is only one accessibility factor. Structure, keyboard access, focus visibility, captions, motion, and assisted technologies also matter. Treat AA/AAA labels in the UI as educational comparisons to published ratio ideas—not as a certificate or legal opinion.

What counts as large text?

Common interpretations treat roughly 18 point regular or 14 point bold (about 24px / 19px CSS depending on assumptions) as large. Font metrics and user zoom blur neat boundaries. When unsure, aim for the stricter normal-text ratio so sizing debates matter less.

How is the contrast ratio calculated?

Colors convert to relative luminance using a standard sRGB-oriented formula. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 the darker. Higher ratios mean greater contrast. Rounding differences between tools usually stay small but can flip borderline pairs.

Does opacity change the result?

Yes. Semi-transparent text or backgrounds blend with whatever sits behind them. Measure the composited colors users actually see—after overlays, gradients, and image covers—not the raw hex sitting in a design token alone.

What about icons, charts, and focus rings?

Non-text UI components have related contrast expectations that are not identical to paragraph text rules. Strong contrast still helps. Check focus indicators and chart lines as their own pairs, especially on colored dashboards.

Why does another app report a slightly different ratio?

Color management, rounding, alpha compositing, and whether hex is interpreted as sRGB can differ. Pick one measurement pipeline for design sign-off and stick to it across tickets so borderline colors do not bounce between “pass” and “fail” weekly.

Can brand colors be used if they fail body-text ratios?

Yes for large decorative accents, rules, or big marketing wordmarks when those uses are not body copy. Provide a darker or lighter accessible companion token for small text and forms so brand identity and readability can coexist.

How should I check text on images or video?

Contrast against a busy photo varies by crop and moment. Prefer a solid scrim, blur, or text-safe region, then measure text against that plate. Sampling one pixel from the image rarely represents the worst-case area behind every letter.

Do dark mode themes need separate checks?

Absolutely. Lightening body text for dark backgrounds is a new pair with its own luminance gap. Secondary muted grays that worked on white often fail on charcoal. Validate each theme token set independently.

Is AAA always better for product UI?

AAA ratio targets are tougher and useful for critical reading contexts, but they can constrain brand palettes. Many teams prioritize solid AA for interface text and elevate contrast further where prolonged reading or low-vision audiences are primary. Choose targets intentionally with stakeholders.

Are my color values sent to a server?

Checks run locally in the browser. Palette exploration does not require uploading design files. Share hex pairs in specs only after you are ready for engineering to implement them.

Contrast Checker (WCAG)

Readable color pairs are an accessibility foundation for interfaces, documents, and marketing pages. This contrast checker computes the luminance-based contrast ratio between a foreground (text) color and a background color, then relates that ratio to familiar WCAG AA and AAA thresholds for normal and large text. Designers use it while exploring palettes; engineers use it when translating brand hex values into CSS variables. A passing ratio on this page is a useful design signal, not a full accessibility audit or a legal compliance guarantee. Pair ratio checks with real content, focus states, and testing with people whenever decisions matter for your audience.

Contrast Checker UI

Informational only; verify critical results independently.

How to use

Choose the text (foreground) color you plan to use for body copy, labels, or links.
Choose the background color behind that text, including page, card, or button fills as they actually appear.
Enter colors as hex values or via pickers so the tool can convert them into relative luminance.
Read the contrast ratio and note whether common AA and AAA checkpoints for normal and large text are met conceptually.
If you barely miss a target such as 4.5:1, darken the text or lighten the background slightly and recheck.
Preview the pair with sample text so hue relationships—not only the number—feel readable to you.
Document winning pairs in a design spec so implementation uses the same hex values that passed review.
Recheck hover, disabled, and dark-mode variants separately; each combination has its own ratio.
Remember that semi-transparent overlays must be composited against the true backdrop before measuring.
Treat tool results as one input beside keyboard testing, zoom, and user feedback—not as a sole certification.

Examples

#111111 text on #FFFFFF background → very high ratio suitable for long-form body text.
#767676 on #FFFFFF → often near the AA border for normal-size text; verify before shipping gray body copy.
Large bold heading at #666666 on white → may satisfy a 3:1 large-text style guidance where body gray would not.
Button label #FFFFFF on brand #0066CC → check the filled button state, not only text-on-page white.
Dark mode #E6E6E6 on #121212 → confirm muted secondary text still stays strong enough on near-black.
Error message #C62828 on #FFFFFF → readable alerts usually need solid ratios, not pale pinks.
Link #0B57D0 on #F5F5F5 → measure link color on the actual content background, including tinted sections.
Placeholder #9E9E9E on white → frequently fails body-text thresholds; keep placeholders temporary and light in weight.
Brand gold #C9A227 on white → stylish accents may need a darker companion for small UI labels.
White text on a photo → average the image region or place a solid scrim; sampling one bright pixel lies about the whole area.

FAQ

What contrast thresholds does WCAG commonly discuss?: Guidance frequently cited for Success Criterion style thresholds is about 4.5:1 for normal text and 3:1 for large text at AA, with stronger 7:1 and 4.5:1 figures often associated with AAA. Exact applicability depends on text size, weight, and the criterion you target. Use this tool to inspect ratios; a formal audit still evaluates context.
Does a pass here mean my site is WCAG compliant?: No. Contrast is only one accessibility factor. Structure, keyboard access, focus visibility, captions, motion, and assisted technologies also matter. Treat AA/AAA labels in the UI as educational comparisons to published ratio ideas—not as a certificate or legal opinion.
What counts as large text?: Common interpretations treat roughly 18 point regular or 14 point bold (about 24px / 19px CSS depending on assumptions) as large. Font metrics and user zoom blur neat boundaries. When unsure, aim for the stricter normal-text ratio so sizing debates matter less.
How is the contrast ratio calculated?: Colors convert to relative luminance using a standard sRGB-oriented formula. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 the darker. Higher ratios mean greater contrast. Rounding differences between tools usually stay small but can flip borderline pairs.
Does opacity change the result?: Yes. Semi-transparent text or backgrounds blend with whatever sits behind them. Measure the composited colors users actually see—after overlays, gradients, and image covers—not the raw hex sitting in a design token alone.
What about icons, charts, and focus rings?: Non-text UI components have related contrast expectations that are not identical to paragraph text rules. Strong contrast still helps. Check focus indicators and chart lines as their own pairs, especially on colored dashboards.
Why does another app report a slightly different ratio?: Color management, rounding, alpha compositing, and whether hex is interpreted as sRGB can differ. Pick one measurement pipeline for design sign-off and stick to it across tickets so borderline colors do not bounce between “pass” and “fail” weekly.
Can brand colors be used if they fail body-text ratios?: Yes for large decorative accents, rules, or big marketing wordmarks when those uses are not body copy. Provide a darker or lighter accessible companion token for small text and forms so brand identity and readability can coexist.
How should I check text on images or video?: Contrast against a busy photo varies by crop and moment. Prefer a solid scrim, blur, or text-safe region, then measure text against that plate. Sampling one pixel from the image rarely represents the worst-case area behind every letter.
Do dark mode themes need separate checks?: Absolutely. Lightening body text for dark backgrounds is a new pair with its own luminance gap. Secondary muted grays that worked on white often fail on charcoal. Validate each theme token set independently.
Is AAA always better for product UI?: AAA ratio targets are tougher and useful for critical reading contexts, but they can constrain brand palettes. Many teams prioritize solid AA for interface text and elevate contrast further where prolonged reading or low-vision audiences are primary. Choose targets intentionally with stakeholders.
Are my color values sent to a server?: Checks run locally in the browser. Palette exploration does not require uploading design files. Share hex pairs in specs only after you are ready for engineering to implement them.

Formula / Method

Convert each sRGB color channel to linear light, compute relative luminance L, then contrast ratio = (Llighter + 0.05) / (Ldarker + 0.05). Compare that number conceptually with common WCAG AA/AAA text thresholds (for example ~4.5:1 normal text AA, ~3:1 large text AA, with higher AAA figures). Preview helps humans judge hue relationships that a single ratio cannot fully describe.

Assumptions & Limitations

Results illustrate luminance contrast under typical sRGB assumptions. They are not a complete WCAG conformance claim, legal advice, or substitute for assisted-technology testing. Gradients, images, translucency, and ambient light affect real-world readability. Large-text classification depends on size and weight interpretations. Use this checker as one design aid within a broader accessibility process.

Related guides

Color Contrast and Accessibility: WCAG Basics
Meet WCAG AA/AAA contrast ratios for text, fix brand-color failures, and convert hex/RGB/HSL with practical design checks.

Related tools

Last updated: 2026-07-13

← Back to Color Tools