Most early-retirement math stops at "COBRA is expensive" or "budget $1,500/month for insurance." This calculator doesn't guess — it runs your actual income against the real ACA premium tax credit formula, including the MAGI cliffs that can silently cost you thousands. Drop it into your own article in one script tag, and it looks like it was built for your site, not bolted onto it.
Sibling of <retirement-calc-spend> — same engine, different question.
Full explanation: ACA Subsidies in Early Retirement →
See it in context
Here's exactly what that looks like — a live instance embedded inside a sample article, using someone else's fonts and colors, not ours.
That's the exact <retirement-calc-aca> widget, unmodified — same script tag, same math as the full app. See the full picture → · Jump to the embed code ↓
Everything below is for embedding this calculator on your own site — integration code, theming, and events.
Pick colors that match your site, then copy the CSS snippet at the bottom.
retirement-calc-aca {
--rc-accent: #4f8ec9;
--rc-bg: #ffffff;
--rc-surf: #f7f9fc;
--rc-text: #1a1f2e;
}
Drop this into your HTML:
<script src="https://app.retirementscenario.com/embed/v1/aca.js"></script>
<retirement-calc-aca></retirement-calc-aca>
Or pre-seed values relevant to your audience:
<retirement-calc-aca
plan-type="household"
current-age="55"
retirement-age="60"
annual-magi="70000"
household-size="2">
</retirement-calc-aca>
| Attribute | Default | Range |
|---|---|---|
plan-type | household | single or household |
current-age | 55 | 45 – 64 (must be pre-Medicare) |
retirement-age | 60 | currentAge – 65 (when ACA coverage starts) |
annual-magi | 70000 | 0 – 300,000 (Modified Adjusted Gross Income during bridge years, today's $) |
household-size | 2 | 1 – 6 (drives Federal Poverty Level threshold) |
refsrc | (none) | partner attribution tag |
Override CSS custom properties on the host:
retirement-calc-aca {
--rc-accent: #ff6b35; /* primary color */
--rc-bg: #ffffff; /* card background */
--rc-surf: #f7f9fc; /* sub-surface (result area) */
--rc-text: #1a1f2e;
--rc-muted: #6a7280;
--rc-border: rgba(20,30,50,0.10);
--rc-radius: 12px;
}
The element emits two custom events you can listen to:
document.querySelector('retirement-calc-aca')
.addEventListener('rc-calculated', (e) => {
console.log('Cliff status:', e.detail.cliffStatus);
console.log('Annual premium range:', e.detail.annualPremiumLow, '-', e.detail.annualPremiumHigh);
console.log('Total bridge cost:', e.detail.totalBridgeCostLow, '-', e.detail.totalBridgeCostHigh);
});
document.querySelector('retirement-calc-aca')
.addEventListener('rc-cta-clicked', (e) => {
console.log('User clicked CTA to:', e.detail.url);
});