Contrast Ratio Calculator: How to Calculate Contrast Ratio Between Two Colors
Use this interactive tool to measure WCAG contrast ratio, check AA and AAA compliance, and understand whether your text or UI colors are readable and accessible.
Live Contrast Preview
The quick brown fox jumps over the lazy dog.
Accessible interfaces improve outcomes.
Contrast Ratio vs WCAG Thresholds
Expert Guide: How to Calculate Contrast Ratio Between Two Colors
If you design websites, apps, dashboards, presentations, or digital products, learning how to calculate contrast ratio between two colors is one of the highest-value accessibility skills you can build. Contrast ratio directly affects readability, usability, and legal compliance. A beautiful interface that fails contrast checks may look polished, but users with low vision, color-vision deficiency, digital eye strain, and aging eyesight can struggle to read it. That creates friction, errors, abandonment, and avoidable support costs.
At a technical level, contrast ratio compares the relative luminance of a foreground color against a background color. Relative luminance is not the same as simple brightness, and it is definitely not the same as color hue. A bright yellow and a bright green can feel vivid, but they may still produce weak contrast depending on luminance values. WCAG evaluates luminance mathematically, which is why “it looks okay to me” is not enough for production-quality accessibility.
Why this metric matters for real users and real outcomes
Contrast compliance is not merely a checkbox. It is a usability multiplier. In practical product teams, higher contrast improves comprehension speed, reduces rereading, supports mobile use in glare, and helps users in tired or low-light conditions. It also supports people with diagnosed visual conditions.
| Data Point | Statistic | Why It Matters for Contrast Decisions |
|---|---|---|
| CDC Vision Health (U.S.) | About 12 million U.S. adults age 40+ have vision impairment, including about 1 million who are blind. | A large population benefits directly when text and UI controls have strong luminance contrast. |
| National Eye Institute (NIH) | Color blindness affects about 1 in 12 men and 1 in 200 women among people with Northern European ancestry. | Color alone cannot communicate state. Contrast and clear visual hierarchy are critical. |
| WebAIM Million Report | Low-contrast text remains one of the most common homepage accessibility failures (around 80% of sampled pages). | Even mature teams miss this issue, so automated checks plus manual review are essential. |
Authoritative references to start with:
- Section508.gov color contrast guidance (.gov)
- CDC vision health overview (.gov)
- National Eye Institute color blindness information (.gov)
The exact formula used to calculate contrast ratio
To calculate contrast ratio between two colors, you first calculate relative luminance for each color, then apply the ratio formula:
- Convert each hex color into RGB values (0 to 255).
- Normalize each RGB channel to 0 to 1 by dividing by 255.
- Convert each normalized sRGB channel into linear light:
- If channel ≤ 0.03928, linear = channel / 12.92
- If channel > 0.03928, linear = ((channel + 0.055) / 1.055)2.4
- Compute relative luminance:
- L = 0.2126 × R + 0.7152 × G + 0.0722 × B
- Let L1 be the lighter luminance and L2 the darker luminance.
- Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
This produces a value from 1:1 to 21:1. A value of 1:1 means no luminance contrast (same color). A value of 21:1 is maximum contrast (pure black on pure white).
WCAG thresholds you should memorize
When teams ask how to calculate contrast ratio between two colors, what they usually need next is “what score is acceptable?” Here are the practical targets from WCAG 2.x.
| Use Case | AA Requirement | AAA Requirement | Notes |
|---|---|---|---|
| Normal body text | 4.5:1 minimum | 7:1 minimum | Default target for paragraphs, labels, and form text. |
| Large text | 3:1 minimum | 4.5:1 minimum | Large means roughly 18pt regular or 14pt bold and above. |
| UI components / graphic objects | 3:1 minimum | No universal AAA parallel | Critical for icons, buttons, focus indicators, chart marks. |
Manual worked example (quick but precise)
Suppose your text color is #1f2937 and background is #ffffff. After conversion, the dark gray has low luminance relative to white. When you run the formula, the ratio lands around the high-contrast range and generally passes normal-text AA comfortably. If instead you pick a lighter gray like #9ca3af on white, luminance gets closer to white and the ratio often drops below 4.5:1. That is a common production bug in muted UI themes.
Common mistakes teams make while checking contrast
- Checking only default state: hover, active, focus, disabled, and visited states are forgotten.
- Ignoring opacity: semi-transparent text or overlays change effective luminance and can fail unexpectedly.
- Testing one screen only: mobile sunlight conditions and low-brightness environments expose weak contrast quickly.
- Using color as the only signal: error states need text labels, icons, or patterns, not just red/green differences.
- Failing to test charts: legends, axis labels, and data colors need enough contrast with both canvas and grid lines.
Design system strategy for reliable contrast compliance
Contrast success is easiest when baked into tokens, not handled ad hoc at the component level. Mature teams define a finite set of approved foreground and background tokens, then validate every pair programmatically.
- Create a luminance-tested palette with core neutrals and semantic colors.
- Pre-map valid text tokens per background token.
- Define separate tokens for body text, secondary text, borders, icons, and disabled states.
- Run automated contrast checks in CI for Storybook snapshots or design exports.
- Review critical flows manually: forms, tables, charts, dialogs, and empty states.
This avoids regressions when brand refreshes happen. It also speeds up approvals because product, design, and engineering share a single source of truth.
How to interpret calculator output like an expert
When this calculator returns a ratio, think in tiers:
- 1:1 to 2.9:1: usually too weak for core text; likely unacceptable except decorative uses.
- 3:1 to 4.49:1: usable for large text and many UI component requirements, but not normal body text AA.
- 4.5:1 to 6.99:1: strong baseline for most text at AA.
- 7:1 and higher: excellent readability range for many contexts and AAA normal-text alignment.
If your brand palette cannot hit 4.5:1 in some combinations, adjust either text darkness/lightness, background tone, font weight, or size. Usually a minor token shift solves it without visual compromise.
Advanced considerations: overlays, gradients, and APCA discussions
Real interfaces are not always flat colors. If text sits on a gradient, image, or glassmorphism panel, contrast can vary across the element. In that case, test the weakest local area where text appears, not just average background color. For overlays, compute blended color first, then run contrast formula. For data visualizations, validate every series color against background and against each other when adjacent.
You may also hear about newer perceptual models such as APCA. While WCAG 2.x legal and procurement workflows still rely heavily on standard contrast ratio checks, forward-looking teams monitor APCA research for improved readability modeling. In practical implementation today, keep WCAG thresholds as your baseline requirement and optionally add APCA-informed reviews for nuanced typography decisions.
Accessibility workflow checklist you can apply today
- Measure every text/background pair before release.
- Verify normal text at 4.5:1 or higher for AA.
- Verify large text and UI graphics at 3:1 or higher.
- Test focus rings and form error messaging for visible contrast.
- Review at 200% zoom and in dark mode if supported.
- Document approved combinations in your design system.
- Re-test after any brand, theme, or token update.
Bottom line
Knowing how to calculate contrast ratio between two colors helps you ship interfaces that are readable, compliant, and genuinely inclusive. It is one of the few accessibility practices that is both mathematically objective and immediately useful in daily design and engineering work. Use the calculator above during design handoff, component development, QA, and content publishing. Consistent contrast validation is a small process change that creates a large quality and usability gain across your entire product.