WCAG Color Contrast & Hex Solver
Good design isn't just about how it looks—it's about who can use it. When text and background colors are too similar, millions of people with low vision or color blindness can't read your content. This tool helps you meet international accessibility standards by checking your contrast ratios and instantly calculating the exact color shifts needed to make your site readable for everyone.
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.
The Compliance Standard Matrix
Baseline contrast requirements under WCAG 2.2 guidelines for different text types.
| Text Type | AA Requirement | AAA Requirement | Use Case |
|---|---|---|---|
| Normal Text | 4.5 : 1 | 7.0 : 1 | Body copy, articles |
| Large Text | 3.0 : 1 | 4.5 : 1 | Headers (18pt+ or 14pt bold) |
| UI Components | 3.0 : 1 | N/A | Icons, form borders, buttons |
| Logotypes | Exempt | Exempt | Brand identities and marks |
Principle 1: Cognitive Load & Legibility
High contrast is not just for the visually impaired. It reduces "Cognitive Load" for all users, making it easier to scan information quickly in bright sunlight or on low-quality mobile displays.
Principle 2: Regulatory Compliance
Accessibility is increasingly a legal requirement. Standards like WCAG 2.2 are the basis for the Americans with Disabilities Act (ADA) and the European Accessibility Act, protecting your brand from significant legal liability.
Principle 3: The Luminance Delta
Accessibility is calculated via "Relative Luminance"—a mathematical measurement of the brightness of a color. Our solver identifies the smallest possible shift in luminance to reach compliance while preserving your brand's hue.
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.
What Software Technical Debt Costs in Developer Hours (And Why It Grows Over Time)
Software technical debt is the ongoing developer time a web or app codebase needs for fixes, updates, and upkeep. Learn how those hours add up over time, why the load can increase year to year, and how to model the cost for your team.
Cookies, localStorage, and sessionStorage: What Gets Saved in Your Browser, How Long It Lasts, and Why a Cookie Banner Is Not the Whole Story
Websites stash data in more places than cookies. Learn how cookies, localStorage, and sessionStorage differ, what survives when you close a tab, and why consent banners often leave other storage alone.
Next.js Responsive Images: How `srcset`, `sizes`, and `/_next/image` Turn One Upload Into the Right File for Each Screen
Uploaded one image but Inspect Element lists many URLs? Learn how Next.js `next/image`, `srcset`, `sizes`, and `/_next/image` work—and what your browser really downloads.
Semantic HTML, Landmarks, and ARIA: What They Are and Why Accessibility Needs Them
Semantic tags, landmarks, and ARIA help structure a page so screen readers can jump to the right areas. This straightforward guide explains each piece, how they work together, and what to improve so your site is easier for everyone to use.
React, JavaScript, Next.js, and the App Router: Where Each Fits
A non-technical map of how JavaScript, React, Next.js, and the App Router work together so modern websites feel fast, stay interactive, and stay searchable.
Stop Treating WCAG Contrast Like a Slider Guessing Game
WCAG AA and AAA contrast checks with exact hex codes—no trial-and-error loop.
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.