Debt-to-Income (DTI) Ratio Calculator
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}
.dti-calculator-container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.dti-header {
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid #0073e6;
padding-bottom: 15px;
}
.dti-header h1 {
margin: 0;
color: #0073e6;
font-size: 28px;
}
.calc-flex-row {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.calc-inputs {
flex: 1;
min-width: 300px;
}
.calc-results {
flex: 1;
min-width: 300px;
background-color: #f0f7ff;
padding: 25px;
border-radius: 8px;
border: 1px solid #d0e3f7;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 5px;
font-size: 14px;
color: #444;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.form-group input:focus {
border-color: #0073e6;
outline: none;
box-shadow: 0 0 5px rgba(0,115,230,0.3);
}
.calc-btn {
width: 100%;
padding: 12px;
background-color: #0073e6;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.calc-btn:hover {
background-color: #005bb5;
}
.result-row {
margin-bottom: 20px;
text-align: center;
}
.result-label {
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.result-value {
font-size: 32px;
font-weight: 800;
color: #333;
}
.result-status {
font-size: 18px;
font-weight: 600;
padding: 5px 10px;
border-radius: 4px;
display: inline-block;
margin-top: 5px;
}
.status-good { color: #2e7d32; background: #e8f5e9; }
.status-warning { color: #f57f17; background: #fffde7; }
.status-bad { color: #c62828; background: #ffebee; }
.article-content {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.article-content h2 {
color: #0073e6;
margin-top: 30px;
font-size: 24px;
}
.article-content p {
margin-bottom: 15px;
color: #555;
}
.article-content ul {
margin-bottom: 15px;
padding-left: 20px;
}
.article-content li {
margin-bottom: 8px;
color: #555;
}
@media (max-width: 600px) {
.calc-flex-row {
flex-direction: column;
}
.dti-calculator-container {
padding: 15px;
}
}
Front-End Ratio (Housing)
0.0%
Back-End Ratio (Total DTI)
0.0%
Understanding Your Debt-to-Income (DTI) Ratio
Your Debt-to-Income (DTI) ratio is one of the most critical metrics lenders use to assess your financial health and ability to repay a loan. Whether you are applying for a mortgage, a car loan, or a personal line of credit, knowing your DTI helps you understand where you stand financially.
What is DTI?
The DTI ratio compares how much you owe each month to how much you earn. It is expressed as a percentage. A lower percentage signifies that you have a good balance between debt and income, making you a more attractive borrower.
Front-End vs. Back-End Ratio
Lenders often look at two different types of ratios:
- Front-End Ratio: This strictly measures your housing costs (rent or mortgage, property taxes, insurance) against your gross monthly income. Ideally, this should be under 28%.
- Back-End Ratio: This includes your housing costs plus all other recurring monthly debts like student loans, credit card minimums, and car payments. Most lenders prefer this to be under 36%, though some loan programs allow up to 43% or even higher.
How to Interpret Your Results
Using the calculator above, you can categorize your financial health generally as follows:
- 36% or less: Excellent. You have a manageable level of debt relative to your income.
- 36% to 43%: Good/Fair. You are eligible for most loans, but you may want to pay down some debt before taking on a large mortgage.
- 43% to 50%: Warning Zone. You may face difficulties getting approved for a standard mortgage (Qualified Mortgage limits are often set at 43%).
- Over 50%: High Risk. Lenders may view you as high risk, and your options for borrowing will be limited. It is highly recommended to focus on debt repayment or income generation.
Tips to Lower Your DTI
If your calculation shows a high percentage, consider these strategies:
- Increase your payments: Pay more than the minimum on high-interest credit cards to eliminate monthly obligations.
- Avoid new debt: Do not open new credit lines before applying for a major loan.
- Increase income: Side hustles or negotiating a raise increases the denominator in the calculation, lowering the ratio.
function calculateDTI() {
// 1. Get input values
var grossIncome = document.getElementById('monthlyGrossIncome').value;
var rentMortgage = document.getElementById('monthlyRentMortgage').value;
var carPayment = document.getElementById('carPayment').value;
var studentLoans = document.getElementById('studentLoans').value;
var creditCards = document.getElementById('creditCards').value;
var otherDebts = document.getElementById('otherDebts').value;
// 2. Parse values to floats, default to 0 if empty
var incomeVal = grossIncome === "" ? 0 : parseFloat(grossIncome);
var housingVal = rentMortgage === "" ? 0 : parseFloat(rentMortgage);
var carVal = carPayment === "" ? 0 : parseFloat(carPayment);
var loanVal = studentLoans === "" ? 0 : parseFloat(studentLoans);
var cardVal = creditCards === "" ? 0 : parseFloat(creditCards);
var otherVal = otherDebts === "" ? 0 : parseFloat(otherDebts);
// 3. Validation
if (incomeVal <= 0) {
alert("Please enter a valid monthly gross income greater than 0.");
return;
}
// 4. Calculate Totals
var totalNonHousingDebt = carVal + loanVal + cardVal + otherVal;
var totalDebt = housingVal + totalNonHousingDebt;
// 5. Calculate Ratios
var frontEndRatio = (housingVal / incomeVal) * 100;
var backEndRatio = (totalDebt / incomeVal) * 100;
// 6. Format numbers
var displayTotalDebt = totalDebt.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
var displayFrontEnd = frontEndRatio.toFixed(2) + "%";
var displayBackEnd = backEndRatio.toFixed(2) + "%";
// 7. Determine Status Message for Back-End Ratio
var statusMsg = "";
var statusClass = "";
if (backEndRatio 36 && backEndRatio <= 43) {
statusMsg = "Good / Manageable";
statusClass = "status-warning";
} else {
statusMsg = "High Risk";
statusClass = "status-bad";
}
// 8. Update DOM
document.getElementById('displayTotalDebt').innerText = displayTotalDebt;
document.getElementById('displayFrontEnd').innerText = displayFrontEnd;
document.getElementById('displayBackEnd').innerText = displayBackEnd;
var msgElement = document.getElementById('dtiMessage');
msgElement.innerText = statusMsg;
msgElement.className = "result-status " + statusClass;
}