WCAG Color Contrast & Hex Solver
Stop the frustrating "guess and check" loop of blindly dragging color sliders. Check your contrast against WCAG AA and AAA standards, and if a pairing fails, let our solver calculate the exact hex code shift needed to pass.
Preview
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Normal body (AA 4.5:1) · Bold/Large sample (AA 3.0:1)
Valid hex code (e.g., #FFFFFF or FFFFFF)
Valid hex code (e.g., #FFFFFF or FFFFFF)
Contrast ratio
12.63 : 1
AA — Normal text
≥ 4.5
AA — Large text
≥ 3
AAA — Normal text
≥ 7
AAA — Large text
≥ 4.5
Note: This calculator uses the official, legally enforceable WCAG 2.2 relative luminance algorithm. While future standards (WCAG 3.0 / APCA) are in draft, 2.2 remains the strict mathematical baseline required to pass current accessibility audits.
Automated Contrast Remediation
Fixing Contrast Without the Guesswork
Finding the exact hex code to pass an accessibility audit often turns into a frustrating loop: tweaking a color picker, copying the new hex, testing the contrast, and hoping it passes.
This solver eliminates that manual trial and error. When a color pairing fails, the math engine automatically calculates the exact visual shift required. It provides immediate, mathematically verified replacement hex codes so you can fix contrast issues instantly and get back to building.
Understanding AA vs. AAA Standards
Accessibility is not subjective; it is governed by strict mathematical ratios based on relative luminance. The Web Content Accessibility Guidelines (WCAG) 2.2 dictate two primary tiers of compliance:
- AA Compliance (The Baseline): Requires a contrast ratio of at least 4.5:1 for normal text, and 3.0:1 for large text (18pt, or 14pt bold). This is the legal and functional baseline for most modern web applications.
- AAA Compliance (The Gold Standard): Requires a stricter contrast ratio of at least 7.0:1 for normal text, and 4.5:1 for large text. This tier is typically required for specialized government, medical, or educational platforms.
How the Solver Works
When a color pairing falls short of WCAG standards, the engine preserves the core identity of your design. It locks in your original hue and saturation, then mathematically nudges the brightness up or down. The exact moment the contrast hits the required 4.5:1 or 7.0:1 target, it captures that hex code and hands it back to you.
Goal: Reach Target WCAG Ratio
Step 1: Lock the original color's hue and saturation
Step 2: Adjust the brightness step-by-step
Step 3: Stop at the exact passing threshold
Result: A perfectly compliant replacement hex codeExplore Related Calculators
Web & Network Insights & Resources
Explore the algorithms, protocols, and computational concepts behind modern digital infrastructure.
Script Loading Strategy: beforeInteractive vs. afterInteractive
Choose the right script timing strategy for product performance. Compare beforeInteractive and afterInteractive, see Core Web Vitals impact, and scale script governance across large websites.
SSR vs. CSR Explained Like You're 12: SEO, Speed, and React
A plain-English guide to SSR vs. CSR with simple analogies, SEO impact, real use cases, and how React supports both rendering models in modern websites.
What Is a Multi-Hop VPN? Extra Privacy, Explained Simply
What is a multi-hop VPN? Learn how it differs from a regular VPN, why it can add privacy, and when the extra hops are worth the slowdown—with simple analogies, no technical background needed.
What Is an API? How It Works and Why It Powers the Apps You Use
APIs let apps talk to each other and fetch data without you seeing it. Learn what an API is with simple analogies, how it works in the real world, and why weather apps, maps, and "Log in with Google" all depend on them.
How Rate Limiting Keeps Websites Fast, Fair, and Secure
Rate limiting is the quiet “speed limit” that keeps websites and APIs fast, fair, and secure. Learn what it is, why it matters, and how it protects both users and systems in clear, non-technical language.
IndexNow and Push Indexing: A Practical Guide
IndexNow lets sites push URL changes directly to participating search engines instead of waiting for crawlers. Learn how the protocol works, who supports it today, and how to think about it even while Google continues to rely on its own crawling systems.
What Is a Local Server? Localhost, 127.0.0.1 & Running Offline
A local server runs on your computer instead of the cloud. Learn what it is, when you need one, and why the address might be localhost, 127.0.0.1, or 10.5.0.2.
Cache Hit Ratio & Latency: How They Turn Into Revenue (and Cost)
Cache hit ratio cuts origin egress; latency shifts conversion. See how CHR and TTFB translate into cost savings and revenue impact—and when the math justifies edge delivery.
HTTP Caching in Plain Language: How Browsers and Servers Reuse Data So Sites Load Faster
What is HTTP caching? Learn how browsers and servers save and reuse copies of web pages and files so sites load faster—explained in simple terms, no technical background needed.
What's the Difference Between a Proxy, a Load Balancer, and a Reverse Proxy?
Proxy, load balancer, and reverse proxy explained—what they do, how they relate, and when one piece of software does more than one job.
Cloud Egress Explained: How to Avoid Surprise Bandwidth Bills on Your Side Projects
Running a side project app or website? Learn what cloud egress is in plain English, why it causes surprise bills, and how to optimize your architecture to keep your project's budget on track.
This calculator/tool is for illustrative purposes only. Because web and network environments vary significantly, Definitive Calc is not liable for deployment issues, unexpected costs, or system errors. Always independently verify results before production use.