.dti-calculator-wrapper {
max-width: 800px;
margin: 0 auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
color: #333;
}
.dti-calc-header {
text-align: center;
margin-bottom: 30px;
background: #2c3e50;
color: #fff;
padding: 20px;
border-radius: 8px 8px 0 0;
margin: -20px -20px 20px -20px;
}
.dti-calc-header h2 {
margin: 0;
font-size: 24px;
}
.dti-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.dti-col {
flex: 1;
min-width: 300px;
}
.dti-input-group {
margin-bottom: 15px;
}
.dti-input-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
}
.dti-input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.dti-input-group input:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.dti-btn {
width: 100%;
padding: 15px;
background: #27ae60;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}
.dti-btn:hover {
background: #219150;
}
.dti-result-box {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
text-align: center;
border: 1px solid #e9ecef;
display: none;
}
.dti-score-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #34495e;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
margin: 0 auto 15px auto;
border: 5px solid #bdc3c7;
}
.dti-status-text {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
display: block;
}
.dti-breakdown {
margin-top: 15px;
text-align: left;
font-size: 14px;
border-top: 1px solid #ddd;
padding-top: 10px;
}
.dti-breakdown-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.dti-article-content {
margin-top: 40px;
line-height: 1.6;
}
.dti-article-content h3 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-top: 30px;
}
.dti-article-content p {
margin-bottom: 15px;
}
.dti-article-content ul {
margin-bottom: 20px;
padding-left: 20px;
}
.dti-article-content li {
margin-bottom: 8px;
}
.tooltip-icon {
display: inline-block;
background: #eee;
color: #666;
width: 16px;
height: 16px;
border-radius: 50%;
text-align: center;
line-height: 16px;
font-size: 11px;
cursor: help;
margin-left: 5px;
}
@media (max-width: 600px) {
.dti-grid {
flex-direction: column;
}
}
function calculateDTI() {
// 1. Get Input Values
var grossIncome = parseFloat(document.getElementById('grossIncome').value) || 0;
var rentPayment = parseFloat(document.getElementById('rentPayment').value) || 0;
var carPayment = parseFloat(document.getElementById('carPayment').value) || 0;
var studentLoans = parseFloat(document.getElementById('studentLoans').value) || 0;
var creditCards = parseFloat(document.getElementById('creditCards').value) || 0;
var otherDebts = parseFloat(document.getElementById('otherDebts').value) || 0;
// 2. Validation
if (grossIncome <= 0) {
alert("Please enter a valid Gross Monthly Income greater than zero.");
return;
}
// 3. Logic: Calculate Totals
var totalMonthlyDebt = rentPayment + carPayment + studentLoans + creditCards + otherDebts;
var dtiRatio = (totalMonthlyDebt / grossIncome) * 100;
var cashFlow = grossIncome – totalMonthlyDebt;
// 4. Update Result Elements
var resultBox = document.getElementById('dtiResult');
var scoreCircle = document.getElementById('dtiScoreCircle');
var statusText = document.getElementById('dtiStatusText');
var message = document.getElementById('dtiMessage');
// Show result box
resultBox.style.display = "block";
// Display Totals
document.getElementById('displayIncome').innerText = "$" + grossIncome.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById('displayDebt').innerText = "$" + totalMonthlyDebt.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById('displayRemainder').innerText = "$" + cashFlow.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
// Set DTI Percentage
scoreCircle.innerText = dtiRatio.toFixed(1) + "%";
// 5. Determine Status and Styling
if (dtiRatio 35 && dtiRatio 43 && dtiRatio <= 49) {
scoreCircle.style.borderColor = "#e74c3c"; // Red
scoreCircle.style.color = "#fff";
scoreCircle.style.background = "#e74c3c";
statusText.innerText = "High Risk";
statusText.style.color = "#c0392b";
message.innerText = "Your DTI is high. Many lenders restrict mortgages at 43%. Consider paying down debt.";
} else {
scoreCircle.style.borderColor = "#8b0000"; // Dark Red
scoreCircle.style.color = "#fff";
scoreCircle.style.background = "#8b0000";
statusText.innerText = "Critical";
statusText.style.color = "#8b0000";
message.innerText = "Your debt takes up more than half your income. Lending options will be very limited.";
}
// Scroll to result
resultBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
Debt-to-Income (DTI) Ratio Calculator
1. Monthly Income
2. Monthly Debt Payments
0%
—
Total Monthly Income:
$0
Total Monthly Debt:
$0
Remaining Cash Flow:
$0
What is Debt-to-Income (DTI) Ratio?
Your Debt-to-Income (DTI) ratio is a personal finance measure that compares an individual's monthly debt payment to their monthly gross income. Lenders use this ratio to determine your ability to repay borrowed money. It is a critical factor when applying for mortgages, auto loans, and credit cards.
Calculated as a percentage, a lower DTI indicates a good balance between debt and income. Conversely, a higher DTI ratio signals that an individual has too much debt for the amount of income earned.
Understanding the Results
- 35% or Less (Good): This is viewed favorably by lenders. It indicates you have manageable debt relative to your income and likely have money left over for savings.
- 36% to 49% (Opportunity for Improvement): You may still qualify for loans, but lenders might ask for additional eligibility criteria. This range suggests your debt is becoming heavy.
- 50% or Higher (High Risk): With half your gross income going to debt, you have limited spending flexibility. Most mortgage lenders will not approve loans for borrowers in this range.
How is DTI Calculated?
The formula for calculating your DTI is straightforward:
DTI = (Total Monthly Debt Payments / Gross Monthly Income) x 100
Note that "Gross Monthly Income" refers to your income before taxes and other deductions are taken out. "Total Monthly Debt" typically includes rent/mortgage, minimum credit card payments, student loans, auto loans, and court-ordered payments like child support. It usually does not include utility bills, grocery costs, or taxes.
Front-End vs. Back-End Ratio
Mortgage lenders often look at two types of DTI ratios:
- Front-End Ratio: Only includes housing-related expenses (mortgage principal, interest, taxes, insurance, and HOA fees) divided by gross income. Ideally, this should be under 28%.
- Back-End Ratio: Includes all debts (housing + consumer debt) divided by gross income. This is what our calculator above provides. Ideally, this should be under 36% (though up to 43% is often accepted for Qualified Mortgages).
How to Lower Your DTI Ratio
If your ratio is higher than desired, consider these strategies before applying for a major loan:
- Pay off high-interest debt: Focus on credit cards with high minimum payments to reduce your monthly debt load quickly.
- Increase your income: Taking on a side gig, freelance work, or asking for a raise increases the denominator in the equation, lowering the percentage.
- Refinance loans: Extending the term of a loan or getting a lower interest rate can reduce the monthly payment amount, thereby lowering your DTI.
- Avoid new debt: Do not open new credit lines or make large purchases on credit before applying for a mortgage.