Fireworks Ember 1 – Real Estate
via Fireworks · Generated
- AIMAC Debt 26.50
- Cost $0.34
- Total Violations 161
- HTML Size 67 KB
- Em Dashes 23
Screenshot
View Live Page
Accessibility Issues Found
5 Critical 156 Serious
-
label critical 3 instances
Form elements must have labels
Example HTML
<input id="priceRange" type="range" min="150000" max="2500000" step="5000" value="650000"> -
select-name critical 2 instances
Select element must have an accessible name
Example HTML
<select class="bg-white rounded-xl px-4 py-3 border border-sand text-sm outline-none text-ink/70"> <option>Any price</option><option>Up t... -
color-contrast serious 156 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="block text-[10px] uppercase tracking-[0.28em] text-brass">Realty & Advisory</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Havenmark Realty — Find Your Place in the World</title>
<meta name="description" content="Havenmark Realty is a full-service brokerage helping buyers, sellers, and investors navigate the market with confidence. Browse listings, run the numbers, and talk to an advisor.">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#101f1a',
pine: '#1c352c',
moss: '#2e4d40',
sage: '#7d968a',
cream: '#f5f0e6',
sand: '#e9e1d2',
brass: '#c7a15a',
brassd:'#a9853f'
},
fontFamily: {
display: ['Fraunces','serif'],
body: ['Inter','sans-serif']
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; background:#f5f0e6; color:#101f1a; overflow-x:hidden; }
section { scroll-margin-top: 96px; }
/* film grain */
.grain::after{
content:""; position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.font-display { font-family:'Fraunces',serif; }
/* header state */
#siteHeader { transition: background .4s ease, box-shadow .4s ease, padding .4s ease; }
#siteHeader.scrolled { background: rgba(245,240,230,.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(16,31,26,.08); }
#siteHeader.scrolled .nav-link, #siteHeader.scrolled .brand-text { color:#101f1a !important; }
#siteHeader.scrolled .nav-cta { border-color:#101f1a !important; color:#101f1a !important; }
#siteHeader.scrolled .nav-cta:hover { background:#101f1a; color:#f5f0e6 !important; }
.nav-link { position:relative; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:#c7a15a; transition:width .35s cubic-bezier(.65,0,.35,1); }
.nav-link:hover::after { width:100%; }
/* marquee */
@keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }
.marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
/* hero search tabs */
.search-tab.active { background:#101f1a; color:#f5f0e6; }
/* listing cards */
.prop-card { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.prop-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(16,31,26,.28); }
.prop-card .prop-img { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.prop-card:hover .prop-img { transform: scale(1.08); }
.heart-btn svg { transition: all .25s ease; }
.heart-btn.fav svg { fill:#c7a15a; stroke:#c7a15a; transform:scale(1.15); }
/* filter pills */
.pill.active { background:#101f1a; color:#f5f0e6; border-color:#101f1a; }
/* range sliders */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px; background:#e9e1d2; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#101f1a; border:4px solid #c7a15a; cursor:pointer; transition:transform .2s ease; }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.2); }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#101f1a; border:4px solid #c7a15a; cursor:pointer; }
/* donut */
#donut { border-radius:50%; transition: background .4s ease; }
/* market bars */
.mbar { transform-origin: bottom; }
/* faq */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-chevron { transition:transform .4s ease; }
/* neighborhood cards */
.hood-card img { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.hood-card:hover img { transform: scale(1.1); }
.hood-card .hood-line { width:2.5rem; transition:width .5s ease; }
.hood-card:hover .hood-line { width:5rem; }
/* reveal defaults */
.reveal { opacity:0; }
::selection { background:#c7a15a; color:#101f1a; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#f5f0e6; }
::-webkit-scrollbar-thumb { background:#1c352c; border-radius:99px; border:2px solid #f5f0e6; }
</style>
</head>
<body class="grain antialiased">
<!-- ============ HEADER ============ -->
<header id="siteHeader" class="fixed top-0 left-0 right-0 z-[100] py-5 px-6 lg:px-12">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<a href="#top" class="flex items-center gap-3 group">
<img src="https://placehold.co/52x52/101f1a/c7a15a?text=H&font=playfair-display" alt="Havenmark Realty logo" class="w-11 h-11 rounded-full ring-1 ring-brass/60 group-hover:rotate-[8deg] transition-transform duration-500">
<div class="leading-tight">
<span class="brand-text font-display text-xl tracking-wide text-cream">Havenmark<span class="text-brass">.</span></span>
<span class="block text-[10px] uppercase tracking-[0.28em] text-brass">Realty & Advisory</span>
</div>
</a>
<nav class="hidden lg:flex items-center gap-8 text-[13px] font-medium uppercase tracking-[0.14em]">
<a href="#listings" class="nav-link text-cream">Listings</a>
<a href="#neighborhoods" class="nav-link text-cream">Neighborhoods</a>
<a href="#sell" class="nav-link text-cream">Sell</a>
<a href="#calculator" class="nav-link text-cream">Calculator</a>
<a href="#market" class="nav-link text-cream">Market</a>
<a href="#about" class="nav-link text-cream">About</a>
<a href="#contact" class="nav-cta text-cream border border-cream/60 rounded-full px-5 py-2 hover:bg-cream hover:text-ink transition-colors duration-300">Contact</a>
</nav>
<button id="menuBtn" class="lg:hidden text-cream p-2" aria-label="Open menu">
<i data-lucide="menu" class="w-7 h-7"></i>
</button>
</div>
</header>
<!-- mobile menu -->
<div id="mobileMenu" class="fixed inset-0 z-[110] bg-ink text-cream flex-col justify-center px-10 hidden">
<button id="menuClose" class="absolute top-6 right-6 p-2" aria-label="Close menu"><i data-lucide="x" class="w-8 h-8"></i></button>
<nav class="flex flex-col gap-6 font-display text-4xl">
<a href="#listings" class="mob-link hover:text-brass transition-colors">Listings</a>
<a href="#neighborhoods" class="mob-link hover:text-brass transition-colors">Neighborhoods</a>
<a href="#sell" class="mob-link hover:text-brass transition-colors">Sell</a>
<a href="#calculator" class="mob-link hover:text-brass transition-colors">Calculator</a>
<a href="#market" class="mob-link hover:text-brass transition-colors">Market</a>
<a href="#about" class="mob-link hover:text-brass transition-colors">About</a>
<a href="#contact" class="mob-link text-brass">Contact</a>
</nav>
<p class="mt-12 text-sm text-sage">(503) 555-0147 · hello@havenmarkrealty.com</p>
</div>
<!-- ============ HERO ============ -->
<section id="top" class="relative min-h-screen flex items-end lg:items-center overflow-hidden bg-ink">
<div class="absolute inset-0">
<img id="heroImg" src="https://picsum.photos/seed/havenhero/1920/1200" alt="Modern home exterior at dusk" class="w-full h-full object-cover opacity-70 scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/55 to-ink/30"></div>
<div class="absolute inset-0 bg-gradient-to-r from-ink/70 via-transparent to-transparent"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-12 w-full pt-40 pb-20 lg:py-48">
<p class="hero-el text-brass uppercase tracking-[0.35em] text-xs mb-6 flex items-center gap-3">
<span class="inline-block w-10 h-px bg-brass"></span> Full-Service Brokerage · Est. 2011
</p>
<h1 class="hero-el font-display text-cream text-5xl sm:text-6xl lg:text-[5.4rem] leading-[1.02] font-light max-w-3xl">
Find your place<br><em class="text-brass font-normal">in the world.</em>
</h1>
<p class="hero-el text-sand/85 max-w-xl mt-7 text-lg leading-relaxed">
Havenmark pairs deep local expertise with honest, data-driven counsel — from first pre-approval
to final signature at the closing table. Buy with clarity. Sell with leverage. Invest with conviction.
</p>
<!-- search card -->
<div class="hero-el mt-12 bg-cream/95 backdrop-blur rounded-2xl p-4 sm:p-5 shadow-2xl max-w-3xl">
<div class="flex gap-2 mb-4">
<button class="search-tab active px-5 py-2 rounded-full text-sm font-semibold transition-colors" data-tab="buy">Buy</button>
<button class="search-tab px-5 py-2 rounded-full text-sm font-semibold transition-colors" data-tab="rent">Rent</button>
<button class="search-tab px-5 py-2 rounded-full text-sm font-semibold transition-colors" data-tab="sell">Sell</button>
</div>
<div class="grid sm:grid-cols-[1fr_auto_auto_auto] gap-3">
<div class="flex items-center gap-3 bg-white rounded-xl px-4 py-3 border border-sand">
<i data-lucide="map-pin" class="w-4 h-4 text-brassd shrink-0"></i>
<input type="text" placeholder="City, neighborhood, or address" class="w-full bg-transparent outline-none text-sm placeholder:text-ink/40">
</div>
<select class="bg-white rounded-xl px-4 py-3 border border-sand text-sm outline-none text-ink/70">
<option>Any price</option><option>Up to $500K</option><option>$500K – $1M</option><option>$1M – $2M</option><option>$2M+</option>
</select>
<select class="bg-white rounded-xl px-4 py-3 border border-sand text-sm outline-none text-ink/70">
<option>Beds</option><option>1+</option><option>2+</option><option>3+</option><option>4+</option>
</select>
<a href="#listings" class="bg-ink text-cream rounded-xl px-6 py-3 text-sm font-semibold flex items-center justify-center gap-2 hover:bg-pine transition-colors">
<i data-lucide="search" class="w-4 h-4"></i> Search
</a>
</div>
<p id="searchHint" class="text-xs text-ink/50 mt-3 pl-1">Showing homes for sale across the greater Portland metro.</p>
</div>
<!-- hero stats -->
<div class="hero-el grid grid-cols-2 md:grid-cols-4 gap-6 mt-14 max-w-3xl">
<div><p class="font-display text-4xl text-cream"><span data-count="2400">0</span>+</p><p class="text-xs uppercase tracking-widest text-sage mt-1">Homes Sold</p></div>
<div><p class="font-display text-4xl text-cream">$<span data-count="1800">0</span>M</p><p class="text-xs uppercase tracking-widest text-sage mt-1">Sales Volume</p></div>
<div><p class="font-display text-4xl text-cream"><span data-count="98">0</span>%</p><p class="text-xs uppercase tracking-widest text-sage mt-1">List-to-Sale Ratio</p></div>
<div><p class="font-display text-4xl text-cream"><span data-count="14">0</span></p><p class="text-xs uppercase tracking-widest text-sage mt-1">Years in Market</p></div>
</div>
</div>
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-cream/60 hidden lg:flex flex-col items-center gap-2 text-[10px] uppercase tracking-[0.3em]">
Scroll <span class="w-px h-10 bg-cream/40 overflow-hidden relative"><span class="absolute inset-x-0 top-0 h-4 bg-brass animate-bounce"></span></span>
</div>
</section>
<!-- ============ MARQUEE ============ -->
<div class="bg-brass text-ink py-4 overflow-hidden border-y border-ink/10">
<div class="marquee-track font-display text-lg tracking-wide">
<span class="flex items-center gap-8 pr-8">
<span>Buyer Representation</span><span class="text-ink/40">✦</span>
<span>Listing & Staging</span><span class="text-ink/40">✦</span>
<span>Investment Advisory</span><span class="text-ink/40">✦</span>
<span>Relocation Services</span><span class="text-ink/40">✦</span>
<span>Mortgage Guidance</span><span class="text-ink/40">✦</span>
<span>New Construction</span><span class="text-ink/40">✦</span>
</span>
<span class="flex items-center gap-8 pr-8" aria-hidden="true">
<span>Buyer Representation</span><span class="text-ink/40">✦</span>
<span>Listing & Staging</span><span class="text-ink/40">✦</span>
<span>Investment Advisory</span><span class="text-ink/40">✦</span>
<span>Relocation Services</span><span class="text-ink/40">✦</span>
<span>Mortgage Guidance</span><span class="text-ink/40">✦</span>
<span>New Construction</span><span class="text-ink/40">✦</span>
</span>
</div>
</div>
<!-- ============ FEATURED LISTINGS ============ -->
<section id="listings" class="py-24 lg:py-32 px-6 lg:px-12">
<div class="max-w-7xl mx-auto">
<div class="reveal flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
<div>
<p class="text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3"><span class="w-8 h-px bg-brassd"></span>Curated Portfolio</p>
<h2 class="font-display text-4xl lg:text-5xl font-light">Featured <em class="text-brassd">listings</em></h2>
<p class="text-ink/60 mt-4 max-w-xl leading-relaxed">Hand-selected properties representing the best square footage-per-dollar across the metro. Every listing is walked, measured, and priced against live comparable sales before it reaches this page.</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="pill active px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors" data-filter="all">All</button>
<button class="pill px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors" data-filter="house">Houses</button>
<button class="pill px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors" data-filter="condo">Condos & Lofts</button>
<button class="pill px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors" data-filter="luxury">Luxury</button>
</div>
</div>
<div id="propGrid" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
<!-- card -->
<article class="prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm" data-cat="house">
<div class="relative overflow-hidden h-60">
<img src="https://picsum.photos/seed/haven-a/800/600" alt="Maplewood Craftsman exterior" class="prop-img w-full h-full object-cover">
<span class="absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full">New</span>
<button class="heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform" aria-label="Save home"><i data-lucide="heart" class="w-4 h-4 text-ink"></i></button>
</div>
<div class="p-6">
<p class="font-display text-2xl">$785,000</p>
<h3 class="font-semibold mt-1">The Maplewood Craftsman</h3>
<p class="text-sm text-ink/50 mt-0.5">418 Willow Bend Lane, Portland, OR</p>
<div class="flex items-center gap-4 text-sm text-ink/70 mt-4 pt-4 border-t border-sand">
<span class="flex items-center gap-1.5"><i data-lucide="bed-double" class="w-4 h-4 text-brassd"></i>4 bd</span>
<span class="flex items-center gap-1.5"><i data-lucide="bath" class="w-4 h-4 text-brassd"></i>3 ba</span>
<span class="flex items-center gap-1.5"><i data-lucide="ruler" class="w-4 h-4 text-brassd"></i>2,640 sqft</span>
</div>
<button class="mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors">View Details</button>
</div>
</article>
<article class="prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm" data-cat="luxury condo">
<div class="relative overflow-hidden h-60">
<img src="https://picsum.photos/seed/haven-b/800/600" alt="Harborview Penthouse living room" class="prop-img w-full h-full object-cover">
<span class="absolute top-4 left-4 bg-brass text-ink text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full">Luxury</span>
<button class="heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform" aria-label="Save home"><i data-lucide="heart" class="w-4 h-4 text-ink"></i></button>
</div>
<div class="p-6">
<p class="font-display text-2xl">$1,450,000</p>
<h3 class="font-semibold mt-1">Harborview Penthouse</h3>
<p class="text-sm text-ink/50 mt-0.5">901 Marina Blvd #PH2, Portland, OR</p>
<div class="flex items-center gap-4 text-sm text-ink/70 mt-4 pt-4 border-t border-sand">
<span class="flex items-center gap-1.5"><i data-lucide="bed-double" class="w-4 h-4 text-brassd"></i>3 bd</span>
<span class="flex items-center gap-1.5"><i data-lucide="bath" class="w-4 h-4 text-brassd"></i>3.5 ba</span>
<span class="flex items-center gap-1.5"><i data-lucide="ruler" class="w-4 h-4 text-brassd"></i>2,150 sqft</span>
</div>
<button class="mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors">View Details</button>
</div>
</article>
<article class="prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm" data-cat="house">
<div class="relative overflow-hidden h-60">
<img src="https://picsum.photos/seed/haven-c/800/600" alt="Juniper Bungalow front porch" class="prop-img w-full h-full object-cover">
<span class="absolute top-4 left-4 bg-moss text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full">Open Sat</span>
<button class="heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform" aria-label="Save home"><i data-lucide="heart" class="w-4 h-4 text-ink"></i></button>
</div>
<div class="p-6">
<p class="font-display text-2xl">$512,000</p>
<h3 class="font-semibold mt-1">The Juniper Bungalow</h3>
<p class="text-sm text-ink/50 mt-0.5">77 Alder Court, Lake Oswego, OR</p>
<div class="flex items-center gap-4 text-sm text-ink/70 mt-4 pt-4 border-t border-sand">
<span class="flex items-center gap-1.5"><i data-lucide="bed-double" class="w-4 h-4 text-brassd"></i>3 bd</span>
<span class="flex items-center gap-1.5"><i data-lucide="bath" class="w-4 h-4 text-brassd"></i>2 ba</span>
<span class="flex items-center gap-1.5"><i data-lucide="ruler" class="w-4 h-4 text-brassd"></i>1,480 sqft</span>
</div>
<button class="mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors">View Details</button>
</div>
</article>
<article class="prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm" data-cat="condo">
<div class="relative overflow-hidden h-60">
<img src="https://picsum.photos/seed/haven-d/800/600" alt="Foundry Lofts industrial interior" class="prop-img w-full h-full object-cover">
<span class="absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full">New</span>
<button class="heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform" aria-label="Save home"><i data-lucide="heart" class="w-4 h-4 text-ink"></i></button>
</div>
<div class="p-6">
<p class="font-display text-2xl">$429,000</p>
<h3 class="font-semibold mt-1">Foundry Lofts #304</h3>
<p class="text-sm text-ink/50 mt-0.5">1220 Ironworks Way, Portland, OR</p>
<div class="flex items-center gap-4 text-sm text-ink/70 mt-4 pt-4 border-t border-sand">
<span class="flex items-center gap-1.5"><i data-lucide="bed-double" class="w-4 h-4 text-brassd"></i>2 bd</span>
<span class="flex items-center gap-1.5"><i data-lucide="bath" class="w-4 h-4 text-brassd"></i>2 ba</span>
<span class="flex items-center gap-1.5"><i data-lucide="ruler" class="w-4 h-4 text-brassd"></i>1,120 sqft</span>
</div>
<button class="mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors">View Details</button>
</div>
</article>
<article class="prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm" data-cat="luxury house">
<div class="relative overflow-hidden h-60">
<img src="https://picsum.photos/seed/haven-e/800/600" alt="Stonebridge Estate grounds" class="prop-img w-full h-full object-cover">
<span class="absolute top-4 left-4 bg-brass text-ink text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full">Luxury</span>
<button class="heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform" aria-label="Save home"><i data-lucide="heart" class="w-4 h-4 text-ink"></i></button>
</div>
<div class="p-6">
<p class="font-display text-2xl">$2,350,000</p>
<h3 class="font-semibold mt-1">Stonebridge Estate</h3>
<p class="text-sm text-ink/50 mt-0.5">6 Stonebridge Manor, West Linn, OR</p>
<div class="flex items-center gap-4 text-sm text-ink/70 mt-4 pt-4 border-t border-sand">
<span class="flex items-center gap-1.5"><i data-lucide="bed-double" class="w-4 h-4 text-brassd"></i>5 bd</span>
<span class="flex items-center gap-1.5"><i data-lucide="bath" class="w-4 h-4 text-brassd"></i>6 ba</span>
<span class="flex items-center gap-1.5"><i data-lucide="ruler" class="w-4 h-4 text-brassd"></i>6,200 sqft</span>
</div>
<button class="mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors">View Details</button>
</div>
</article>
<article class="prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm" data-cat="house">
<div class="relative overflow-hidden h-60">
<img src="https://picsum.photos/seed/haven-f/800/600" alt="Rowan Townhome facade" class="prop-img w-full h-full object-cover">
<span class="absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full">New</span>
<button class="heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform" aria-label="Save home"><i data-lucide="heart" class="w-4 h-4 text-ink"></i></button>
</div>
<div class="p-6">
<p class="font-display text-2xl">$598,000</p>
<h3 class="font-semibold mt-1">The Rowan Townhome</h3>
<p class="text-sm text-ink/50 mt-0.5">233 Larkspur Row, Beaverton, OR</p>
<div class="flex items-center gap-4 text-sm text-ink/70 mt-4 pt-4 border-t border-sand">
<span class="flex items-center gap-1.5"><i data-lucide="bed-double" class="w-4 h-4 text-brassd"></i>3 bd</span>
<span class="flex items-center gap-1.5"><i data-lucide="bath" class="w-4 h-4 text-brassd"></i>2.5 ba</span>
<span class="flex items-center gap-1.5"><i data-lucide="ruler" class="w-4 h-4 text-brassd"></i>1,760 sqft</span>
</div>
<button class="mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors">View Details</button>
</div>
</article>
</div>
<div class="reveal text-center mt-14">
<a href="#contact" class="inline-flex items-center gap-3 bg-ink text-cream px-8 py-4 rounded-full font-semibold text-sm hover:bg-pine transition-colors">
Save Search & Get Alerts <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
<p class="text-xs text-ink/45 mt-3">New listings matching your criteria, delivered before they hit the major portals.</p>
</div>
</div>
</section>
<!-- ============ SELL WITH US ============ -->
<section id="sell" class="py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden">
<div class="absolute -top-32 -right-32 w-96 h-96 rounded-full bg-brass/10 blur-3xl"></div>
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
<div class="reveal relative order-2 lg:order-1">
<img src="https://picsum.photos/seed/havensell/900/1100" alt="Staged living room ready for listing photography" class="rounded-2xl w-full h-[520px] object-cover shadow-2xl">
<div class="absolute -bottom-8 -right-4 sm:right-8 bg-cream text-ink rounded-2xl p-6 shadow-2xl w-64">
<p class="font-display text-4xl text-brassd">+7.2%</p>
<p class="text-sm text-ink/60 mt-1 leading-snug">Average premium our staged listings capture versus neighborhood comps.</p>
</div>
</div>
<div class="order-1 lg:order-2">
<p class="reveal text-brass uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3"><span class="w-8 h-px bg-brass"></span>Seller Guide</p>
<h2 class="reveal font-display text-4xl lg:text-5xl font-light leading-tight">Selling, <em class="text-brass">elevated.</em></h2>
<p class="reveal text-sand/80 mt-6 leading-relaxed">
A sale is won long before the sign goes in the yard. Our advisors begin with a forensic pricing analysis —
pulling live comparable sales, absorption rates, and price-per-square-foot trends for your exact micro-market —
so your home enters the market positioned to attract multiple offers, not chase them.
</p>
<p class="reveal text-sand/80 mt-4 leading-relaxed">
From there we manage the entire arc: professional staging and photography, a coordinated launch across the MLS
and private networks, and disciplined negotiation through every inspection and appraisal contingency until the
escrow closes cleanly.
</p>
<ol class="reveal mt-10 space-y-6">
<li class="flex gap-5">
<span class="font-display text-brass text-2xl shrink-0 w-10">01</span>
<div><h4 class="font-semibold">Valuation & Strategy</h4><p class="text-sm text-sand/70 mt-1 leading-relaxed">A data-backed list price built on comps, condition, and current buyer demand — never a guess.</p></div>
</li>
<li class="flex gap-5">
<span class="font-display text-brass text-2xl shrink-0 w-10">02</span>
<div><h4 class="font-semibold">Preparation & Staging</h4><p class="text-sm text-sand/70 mt-1 leading-relaxed">Targeted repairs, editorial-grade staging, and twilight photography that stops the scroll.</p></div>
</li>
<li class="flex gap-5">
<span class="font-display text-brass text-2xl shrink-0 w-10">03</span>
<div><h4 class="font-semibold">Launch & Negotiation</h4><p class="text-sm text-sand/70 mt-1 leading-relaxed">Offer review, counter-strategy, and contingency management handled by a certified negotiation expert.</p></div>
</li>
<li class="flex gap-5">
<span class="font-display text-brass text-2xl shrink-0 w-10">04</span>
<div><h4 class="font-semibold">Escrow to Close</h4><p class="text-sm text-sand/70 mt-1 leading-relaxed">Title, disclosures, and closing costs coordinated end-to-end, with a 21-day average escrow.</p></div>
</li>
</ol>
<a href="#contact" class="reveal inline-flex items-center gap-3 mt-10 bg-brass text-ink px-8 py-4 rounded-full font-semibold text-sm hover:bg-cream transition-colors">
List Property <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</section>
<!-- ============ MORTGAGE CALCULATOR ============ -->
<section id="calculator" class="py-24 lg:py-32 px-6 lg:px-12">
<div class="max-w-7xl mx-auto">
<div class="reveal max-w-2xl mb-14">
<p class="text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3"><span class="w-8 h-px bg-brassd"></span>Interactive Tool</p>
<h2 class="font-display text-4xl lg:text-5xl font-light">Know your number <em class="text-brassd">before</em> you fall in love.</h2>
<p class="text-ink/60 mt-5 leading-relaxed">
Serious buyers walk into showings with a pre-approval letter and a firm grasp of their monthly obligation.
Model your payment below — including property taxes, homeowner's insurance, and PMI when your down payment
falls under 20% — then take that figure to a lender to lock your rate.
</p>
</div>
<div class="reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand">
<!-- inputs -->
<div class="p-8 lg:p-12 space-y-9">
<div>
<div class="flex justify-between items-baseline mb-3">
<label class="text-sm font-semibold">Home Price</label>
<span id="priceOut" class="font-display text-xl text-brassd">$650,000</span>
</div>
<input id="priceRange" type="range" min="150000" max="2500000" step="5000" value="650000">
<div class="flex justify-between text-[11px] text-ink/40 mt-2"><span>$150K</span><span>$2.5M</span></div>
</div>
<div>
<div class="flex justify-between items-baseline mb-3">
<label class="text-sm font-semibold">Down Payment</label>
<span class="font-display text-xl text-brassd"><span id="downPctOut">20</span>% · <span id="downAmtOut">$130,000</span></span>
</div>
<input id="downRange" type="range" min="3" max="50" step="1" value="20">
<div class="flex justify-between text-[11px] text-ink/40 mt-2"><span>3%</span><span>50%</span></div>
<p id="pmiNote" class="hidden text-xs text-brassd mt-2 flex items-center gap-1.5"><i data-lucide="info" class="w-3.5 h-3.5"></i> PMI applies below 20% down.</p>
</div>
<div>
<div class="flex justify-between items-baseline mb-3">
<label class="text-sm font-semibold">Interest Rate</label>
<span id="rateOut" class="font-display text-xl text-brassd">6.25%</span>
</div>
<input id="rateRange" type="range" min="3" max="10" step="0.125" value="6.25">
<div class="flex justify-between text-[11px] text-ink/40 mt-2"><span>3%</span><span>10%</span></div>
</div>
<div>
<label class="text-sm font-semibold block mb-3">Loan Term</label>
<div class="grid grid-cols-3 gap-2">
<button class="term-btn py-3 rounded-xl border border-sand text-sm font-semibold transition-colors" data-years="15">15 yr</button>
<button class="term-btn active-term py-3 rounded-xl border border-sand text-sm font-semibold transition-colors bg-ink text-cream" data-years="30">30 yr</button>
<button class="term-btn py-3 rounded-xl border border-sand text-sm font-semibold transition-colors" data-years="20">20 yr</button>
</div>
</div>
<p class="text-xs text-ink/45 leading-relaxed pt-2 border-t border-sand">
Estimates use a 1.1% annual property tax rate and 0.35% homeowner's insurance. Your debt-to-income ratio,
credit profile, and HOA dues will affect final qualification. This tool is illustrative and not a loan offer.
</p>
</div>
<!-- results -->
<div class="bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between">
<div>
<p class="text-xs uppercase tracking-[0.3em] text-sage">Estimated Monthly Payment</p>
<p id="totalOut" class="font-display text-6xl mt-3 text-brass">$4,157</p>
<p class="text-sm text-sage mt-2">Principal, interest, taxes & insurance (PITI)</p>
<div class="flex items-center gap-8 mt-10">
<div id="donut" class="w-36 h-36 shrink-0 grid place-items-center">
<div class="w-24 h-24 rounded-full bg-ink grid place-items-center text-center">
<span class="text-[10px] uppercase tracking-widest text-sage leading-tight">Loan<br><span id="loanOut" class="text-cream text-sm font-semibold">$520K</span></span>
</div>
</div>
<ul class="space-y-3 text-sm flex-1">
<li class="flex items-center justify-between gap-3"><span class="flex items-center gap-2"><span class="w-3 h-3 rounded-sm bg-brass"></span>Principal & Interest</span><span id="piOut" class="font-semibold">$3,201</span></li>
<li class="flex items-center justify-between gap-3"><span class="flex items-center gap-2"><span class="w-3 h-3 rounded-sm bg-sage"></span>Property Tax</span><span id="taxOut" class="font-semibold">$596</span></li>
<li class="flex items-center justify-between gap-3"><span class="flex items-center gap-2"><span class="w-3 h-3 rounded-sm bg-moss"></span>Insurance</span><span id="insOut" class="font-semibold">$190</span></li>
<li id="pmiRow" class="hidden flex items-center justify-between gap-3"><span class="flex items-center gap-2"><span class="w-3 h-3 rounded-sm bg-sand"></span>PMI</span><span id="pmiOut" class="font-semibold">$0</span></li>
</ul>
</div>
</div>
<div class="mt-10">
<a href="#contact" class="flex items-center justify-center gap-3 bg-brass text-ink w-full py-4 rounded-xl font-semibold text-sm hover:bg-cream transition-colors">
Get Pre-Approved <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
<p class="text-[11px] text-sage text-center mt-3">Connect with a vetted lending partner in under 24 hours.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ MARKET INSIGHTS + OPEN HOUSES ============ -->
<section id="market" class="py-24 lg:py-32 px-6 lg:px-12 bg-sand/60">
<div class="max-w-7xl mx-auto">
<div class="reveal max-w-2xl mb-14">
<p class="text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3"><span class="w-8 h-px bg-brassd"></span>Market Intelligence</p>
<h2 class="font-display text-4xl lg:text-5xl font-light">The market, <em class="text-brassd">decoded.</em></h2>
<p class="text-ink/60 mt-5 leading-relaxed">
Headlines lag; neighborhoods lead. Our research desk tracks median sale price, days on market, and months of
inventory at the zip-code level, so you negotiate from evidence rather than emotion.
</p>
</div>
<div class="grid lg:grid-cols-[1.5fr_1fr] gap-8">
<!-- chart card -->
<div class="reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm">
<div class="flex flex-wrap items-end justify-between gap-4 mb-10">
<div>
<h3 class="font-semibold text-lg">Median Sale Price — Portland Metro</h3>
<p class="text-sm text-ink/50">Quarterly, trailing two years</p>
</div>
<div class="flex gap-8">
<div><p class="font-display text-3xl text-brassd">$612K</p><p class="text-[11px] uppercase tracking-widest text-ink/45">Current Median</p></div>
<div><p class="font-display text-3xl text-moss">19</p><p class="text-[11px] uppercase tracking-widest text-ink/45">Days on Market</p></div>
<div><p class="font-display text-3xl text-ink">1.8</p><p class="text-[11px] uppercase tracking-widest text-ink/45">Months Supply</p></div>
</div>
</div>
<div class="flex items-end justify-between gap-3 h-56 border-b border-sand pb-0">
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-sage/70" style="height:58%"></div><span class="text-[10px] text-ink/45">Q1 '23</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-sage/70" style="height:62%"></div><span class="text-[10px] text-ink/45">Q2</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-sage/70" style="height:60%"></div><span class="text-[10px] text-ink/45">Q3</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-sage/70" style="height:57%"></div><span class="text-[10px] text-ink/45">Q4</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-moss" style="height:64%"></div><span class="text-[10px] text-ink/45">Q1 '24</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-moss" style="height:70%"></div><span class="text-[10px] text-ink/45">Q2</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-moss" style="height:74%"></div><span class="text-[10px] text-ink/45">Q3</span></div>
<div class="flex-1 flex flex-col items-center gap-2 h-full justify-end"><div class="mbar w-full max-w-[46px] rounded-t-lg bg-brass" style="height:82%"></div><span class="text-[10px] text-ink/45">Q4</span></div>
</div>
<p class="text-sm text-ink/55 mt-6 leading-relaxed">
Inventory remains tight at under two months of supply — a persistent seller's market in the sub-$700K band,
while the luxury tier above $1.5M is seeing longer market times and more room for buyer contingencies.
Well-priced homes in walkable districts are still drawing multiple offers within the first weekend.
</p>
</div>
<!-- open houses sidebar -->
<aside class="reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col">
<div class="flex items-center gap-3 mb-6">
<i data-lucide="calendar-days" class="w-5 h-5 text-brass"></i>
<h3 class="font-semibold text-lg">Open Houses This Weekend</h3>
</div>
<ul class="space-y-5 flex-1">
<li class="flex gap-4 pb-5 border-b border-cream/10">
<img src="https://picsum.photos/seed/haven-c/160/160" alt="Juniper Bungalow thumbnail" class="w-16 h-16 rounded-xl object-cover shrink-0">
<div>
<p class="font-semibold text-sm">The Juniper Bungalow</p>
<p class="text-xs text-sage mt-0.5">77 Alder Ct, Lake Oswego</p>
<p class="text-xs text-brass mt-1.5 font-medium">Sat · 11:00 AM – 2:00 PM</p>
</div>
</li>
<li class="flex gap-4 pb-5 border-b border-cream/10">
<img src="https://picsum.photos/seed/haven-a/160/160" alt="Maplewood Craftsman thumbnail" class="w-16 h-16 rounded-xl object-cover shrink-0">
<div>
<p class="font-semibold text-sm">The Maplewood Craftsman</p>
<p class="text-xs text-sage mt-0.5">418 Willow Bend Ln, Portland</p>
<p class="text-xs text-brass mt-1.5 font-medium">Sat · 1:00 – 4:00 PM</p>
</div>
</li>
<li class="flex gap-4">
<img src="https://picsum.photos/seed/haven-d/160/160" alt="Foundry Lofts thumbnail" class="w-16 h-16 rounded-xl object-cover shrink-0">
<div>
<p class="font-semibold text-sm">Foundry Lofts #304</p>
<p class="text-xs text-sage mt-0.5">1220 Ironworks Way, Portland</p>
<p class="text-xs text-brass mt-1.5 font-medium">Sun · 12:00 – 3:00 PM</p>
</div>
</li>
</ul>
<a href="#contact" class="mt-8 flex items-center justify-center gap-2 border border-cream/30 rounded-xl py-3.5 text-sm font-semibold hover:bg-cream hover:text-ink transition-colors">
RSVP / Request Private Tour <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
<div class="mt-6 bg-pine rounded-2xl p-5">
<p class="text-[11px] uppercase tracking-[0.25em] text-brass mb-2">Trend Watch</p>
<p class="text-sm text-sand/80 leading-relaxed">Rate buydowns are back: 2-1 buydowns now appear in 31% of accepted offers we negotiated this quarter.</p>
</div>
</aside>
</div>
</div>
</section>
<!-- ============ NEIGHBORHOODS ============ -->
<section id="neighborhoods" class="py-24 lg:py-32 px-6 lg:px-12">
<div class="max-w-7xl mx-auto">
<div class="reveal flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
<div>
<p class="text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3"><span class="w-8 h-px bg-brassd"></span>Local Expertise</p>
<h2 class="font-display text-4xl lg:text-5xl font-light">Neighborhoods we <em class="text-brassd">know by heart.</em></h2>
</div>
<p class="text-ink/60 max-w-md leading-relaxed text-sm">School boundaries, zoning changes, the café that just signed a lease — context like this doesn't show up in an MLS feed. It shows up in our pricing.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<a href="#contact" class="hood-card reveal group relative rounded-2xl overflow-hidden h-96 block">
<img src="https://picsum.photos/seed/hood1/700/900" alt="Willow Bend tree-lined street" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/20 to-transparent"></div>
<div class="absolute bottom-0 p-6 text-cream">
<span class="hood-line block h-px bg-brass mb-4"></span>
<h3 class="font-display text-2xl">Willow Bend</h3>
<p class="text-xs text-sand/70 mt-1">Median $740K · Craftsman streets, top-rated schools</p>
</div>
</a>
<a href="#contact" class="hood-card reveal group relative rounded-2xl overflow-hidden h-96 block">
<img src="https://picsum.photos/seed/hood2/700/900" alt="Harbor District waterfront" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/20 to-transparent"></div>
<div class="absolute bottom-0 p-6 text-cream">
<span class="hood-line block h-px bg-brass mb-4"></span>
<h3 class="font-display text-2xl">Harbor District</h3>
<p class="text-xs text-sand/70 mt-1">Median $1.1M · Waterfront condos & skyline views</p>
</div>
</a>
<a href="#contact" class="hood-card reveal group relative rounded-2xl overflow-hidden h-96 block">
<img src="https://picsum.photos/seed/hood3/700/900" alt="Old Town historic brick buildings" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/20 to-transparent"></div>
<div class="absolute bottom-0 p-6 text-cream">
<span class="hood-line block h-px bg-brass mb-4"></span>
<h3 class="font-display text-2xl">Old Town</h3>
<p class="text-xs text-sand/70 mt-1">Median $465K · Lofts, galleries & nightlife</p>
</div>
</a>
<a href="#contact" class="hood-card reveal group relative rounded-2xl overflow-hidden h-96 block">
<img src="https://picsum.photos/seed/hood4/700/900" alt="North Ridge hillside homes" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/20 to-transparent"></div>
<div class="absolute bottom-0 p-6 text-cream">
<span class="hood-line block h-px bg-brass mb-4"></span>
<h3 class="font-display text-2xl">North Ridge</h3>
<p class="text-xs text-sand/70 mt-1">Median $890K · View lots & new construction</p>
</div>
</a>
</div>
</div>
</section>
<!-- ============ ABOUT / WHY US ============ -->
<section id="about" class="py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden">
<div class="absolute -bottom-40 -left-40 w-[30rem] h-[30rem] rounded-full bg-brass/10 blur-3xl"></div>
<div class="max-w-7xl mx-auto">
<div class="reveal max-w-2xl mb-14">
<p class="text-brass uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3"><span class="w-8 h-px bg-brass"></span>Why Havenmark</p>
<h2 class="font-display text-4xl lg:text-5xl font-light">Advisory first. <em class="text-brass">Brokerage second.</em></h2>
<p class="text-sand/75 mt-5 leading-relaxed">We measure success in client outcomes, not transaction counts. Every engagement — whether a first condo or a ten-door investment portfolio — begins with strategy and ends with accountability.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500">
<i data-lucide="shield-check" class="w-8 h-8 text-brass mb-5"></i>
<h3 class="font-semibold mb-2">Fiduciary-Grade Counsel</h3>
<p class="text-sm text-sand/65 leading-relaxed">Licensed brokers held to a written duty of loyalty. We tell you when <em>not</em> to buy — and mean it.</p>
</div>
<div class="reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500">
<i data-lucide="line-chart" class="w-8 h-8 text-brass mb-5"></i>
<h3 class="font-semibold mb-2">Proprietary Market Data</h3>
<p class="text-sm text-sand/65 leading-relaxed">Zip-level absorption rates, off-market comps, and price-per-square-foot trends refreshed weekly.</p>
</div>
<div class="reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500">
<i data-lucide="handshake" class="w-8 h-8 text-brass mb-5"></i>
<h3 class="font-semibold mb-2">Certified Negotiation</h3>
<p class="text-sm text-sand/65 leading-relaxed">RNE-certified agents who treat every contingency, credit, and counter as leverage on your side.</p>
</div>
<div class="reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500">
<i data-lucide="key-round" class="w-8 h-8 text-brass mb-5"></i>
<h3 class="font-semibold mb-2">Lifetime Relationship</h3>
<p class="text-sm text-sand/65 leading-relaxed">Annual equity reviews, contractor referrals, and refinance alerts long after you get the keys.</p>
</div>
</div>
<!-- testimonials -->
<div class="grid md:grid-cols-3 gap-6 mt-16">
<figure class="reveal bg-cream text-ink rounded-2xl p-8">
<div class="flex gap-1 text-brassd mb-4">
<i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i>
</div>
<blockquote class="text-sm leading-relaxed text-ink/75">"As first-time buyers we were terrified of waiving the inspection contingency. Our agent structured an offer that won the house <em>with</em> protections intact — and negotiated a $12K seller credit on top."</blockquote>
<figcaption class="flex items-center gap-3 mt-6">
<img src="https://i.pravatar.cc/96?u=sarahhaven" alt="Portrait of Sarah and Tom Whitfield" class="w-11 h-11 rounded-full object-cover">
<div><p class="text-sm font-semibold">Sarah & Tom Whitfield</p><p class="text-xs text-ink/50">Buyers · Willow Bend</p></div>
</figcaption>
</figure>
<figure class="reveal bg-cream text-ink rounded-2xl p-8">
<div class="flex gap-1 text-brassd mb-4">
<i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i>
</div>
<blockquote class="text-sm leading-relaxed text-ink/75">"Havenmark sold our bungalow $61K over asking in nine days. The staging plan and pricing strategy were surgical — every decision was backed by comps, not hunches."</blockquote>
<figcaption class="flex items-center gap-3 mt-6">
<img src="https://i.pravatar.cc/96?u=marcushaven" alt="Portrait of Marcus Oyelaran" class="w-11 h-11 rounded-full object-cover">
<div><p class="text-sm font-semibold">Marcus Oyelaran</p><p class="text-xs text-ink/50">Seller · Old Town</p></div>
</figcaption>
</figure>
<figure class="reveal bg-cream text-ink rounded-2xl p-8">
<div class="flex gap-1 text-brassd mb-4">
<i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i>
</div>
<blockquote class="text-sm leading-relaxed text-ink/75">"They underwrote four duplexes for me, killed two bad deals before I wasted an appraisal fee, and closed the keeper at a 6.8% cap rate. That's an advisor, not a door-opener."</blockquote>
<figcaption class="flex items-center gap-3 mt-6">
<img src="https://i.pravatar.cc/96?u=elenahaven" alt="Portrait of Elena Vasquez" class="w-11 h-11 rounded-full object-cover">
<div><p class="text-sm font-semibold">Elena Vasquez</p><p class="text-xs text-ink/50">Investor · 4 doors and counting</p></div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section class="py-24 lg:py-32 px-6 lg:px-12">
<div class="max-w-4xl mx-auto">
<div class="reveal text-center mb-14">
<p class="text-brassd uppercase tracking-[0.3em] text-xs mb-4">Straight Answers</p>
<h2 class="font-display text-4xl lg:text-5xl font-light">Frequently asked <em class="text-brassd">questions</em></h2>
</div>
<div class="reveal space-y-4">
<div class="faq-item bg-white rounded-2xl border border-sand overflow-hidden">
<button class="faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold">
What's the difference between pre-qualification and pre-approval?
<i data-lucide="chevron-down" class="faq-chevron w-5 h-5 text-brassd shrink-0"></i>
</button>
<div class="faq-answer px-7 text-sm text-ink/65 leading-relaxed">
<p class="pb-6">Pre-qualification is a quick estimate based on self-reported numbers — useful for window shopping, meaningless to a seller. Pre-approval means a lender has verified your income, assets, credit, and debt-to-income ratio and committed to a loan amount in writing. In a multiple-offer situation, a strong pre-approval letter is often the deciding factor, and we won't write an offer without one.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sand overflow-hidden">
<button class="faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold">
How much should I budget for closing costs?
<i data-lucide="chevron-down" class="faq-chevron w-5 h-5 text-brassd shrink-0"></i>
</button>
<div class="faq-answer px-7 text-sm text-ink/65 leading-relaxed">
<p class="pb-6">Buyers typically pay 2–4% of the purchase price in closing costs: lender origination, appraisal, title insurance, escrow fees, and prepaid taxes and insurance. On a $650,000 home, plan for roughly $15,000–$22,000 on top of your down payment. In the current market we regularly negotiate seller credits that offset a meaningful portion of that figure.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sand overflow-hidden">
<button class="faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold">
What exactly is a contingency, and which ones matter most?
<i data-lucide="chevron-down" class="faq-chevron w-5 h-5 text-brassd shrink-0"></i>
</button>
<div class="faq-answer px-7 text-sm text-ink/65 leading-relaxed">
<p class="pb-6">A contingency is a contractual exit ramp: if a condition isn't met, you can walk away with your earnest money. The big three are inspection (the home must pass your review), appraisal (it must value at or above the contract price), and financing (your loan must fund). Waiving contingencies can strengthen an offer but transfers risk to you — we model that tradeoff in writing before you ever sign.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sand overflow-hidden">
<button class="faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold">
Do I really need 20% down to buy a home?
<i data-lucide="chevron-down" class="faq-chevron w-5 h-5 text-brassd shrink-0"></i>
</button>
<div class="faq-answer px-7 text-sm text-ink/65 leading-relaxed">
<p class="pb-6">No. Conventional loans start at 3–5% down, FHA at 3.5%, and VA loans at 0% for eligible buyers. The tradeoff below 20% is private mortgage insurance (PMI), typically 0.3–0.8% of the loan annually, plus a slightly weaker offer posture. Whether to buy sooner with less down or keep saving depends on rent inflation versus price appreciation in your target neighborhood — run both paths in our calculator, then let's talk.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sand overflow-hidden">
<button class="faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold">
How long does it take from accepted offer to keys?
<i data-lucide="chevron-down" class="faq-chevron w-5 h-5 text-brassd shrink-0"></i>
</button>
<div class="faq-answer px-7 text-sm text-ink/65 leading-relaxed">
<p class="pb-6">A typical financed escrow runs 30–45 days: about a week for inspection and negotiations, two to three weeks for appraisal and underwriting, and a final week for signing and recording. Cash purchases can close in as little as 10 days. Our average escrow last year was 21 days because we front-load documentation before the offer is even accepted.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ CTA BANNER ============ -->
<section id="contact" class="px-6 lg:px-12 pb-24 lg:pb-32">
<div class="reveal max-w-7xl mx-auto relative rounded-3xl overflow-hidden bg-ink text-cream">
<img src="https://picsum.photos/seed/havencta/1600/700" alt="Warm modern home interior" class="absolute inset-0 w-full h-full object-cover opacity-30">
<div class="absolute inset-0 bg-gradient-to-r from-ink via-ink/80 to-ink/40"></div>
<div class="relative z-10 p-10 lg:p-20 max-w-2xl">
<h2 class="font-display text-4xl lg:text-5xl font-light leading-tight">Your next chapter starts with a <em class="text-brass">conversation.</em></h2>
<p class="text-sand/80 mt-5 leading-relaxed">Fifteen minutes, zero pressure. Tell us where you are — browsing, pre-approved, or ready to list — and we'll map the smartest next step with real numbers.</p>
<form class="mt-8 flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Request Received — We\'ll Be In Touch';">
<input required type="email" placeholder="you@email.com" class="flex-1 bg-cream/10 border border-cream/25 rounded-xl px-5 py-4 text-sm placeholder:text-cream/40 outline-none focus:border-brass transition-colors">
<button class="bg-brass text-ink rounded-xl px-8 py-4 text-sm font-semibold hover:bg-cream transition-colors whitespace-nowrap">Book Free Consultation</button>
</form>
<p class="text-xs text-sage mt-4">Or call us directly: <span class="text-cream font-medium">(503) 555-0147</span> · Mon–Sat, 9am–6pm</p>
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer class="bg-ink text-cream pt-20 pb-10 px-6 lg:px-12 border-t border-cream/10">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
<div>
<a href="#top" class="flex items-center gap-3 mb-5">
<img src="https://placehold.co/44x44/f5f0e6/101f1a?text=H&font=playfair-display" alt="Havenmark Realty logo" class="w-10 h-10 rounded-full">
<span class="font-display text-xl">Havenmark<span class="text-brass">.</span></span>
</a>
<p class="text-sm text-sage leading-relaxed">A full-service brokerage and advisory serving the greater Portland metro since 2011. Find your place in the world — we'll handle the rest.</p>
<div class="flex gap-3 mt-6">
<a href="#" aria-label="Instagram" class="w-10 h-10 rounded-full border border-cream/20 grid place-items-center hover:bg-brass hover:text-ink hover:border-brass transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
<a href="#" aria-label="Facebook" class="w-10 h-10 rounded-full border border-cream/20 grid place-items-center hover:bg-brass hover:text-ink hover:border-brass transition-colors"><i data-lucide="facebook" class="w-4 h-4"></i></a>
<a href="#" aria-label="LinkedIn" class="w-10 h-10 rounded-full border border-cream/20 grid place-items-center hover:bg-brass hover:text-ink hover:border-brass transition-colors"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
<a href="#" aria-label="YouTube" class="w-10 h-10 rounded-full border border-cream/20 grid place-items-center hover:bg-brass hover:text-ink hover:border-brass transition-colors"><i data-lucide="youtube" class="w-4 h-4"></i></a>
</div>
</div>
<div>
<h4 class="text-xs uppercase tracking-[0.25em] text-brass mb-5">Explore</h4>
<ul class="space-y-3 text-sm text-sand/75">
<li><a href="#listings" class="hover:text-brass transition-colors">Featured Listings</a></li>
<li><a href="#neighborhoods" class="hover:text-brass transition-colors">Neighborhoods</a></li>
<li><a href="#sell" class="hover:text-brass transition-colors">Seller Guide</a></li>
<li><a href="#calculator" class="hover:text-brass transition-colors">Mortgage Calculator</a></li>
<li><a href="#market" class="hover:text-brass transition-colors">Market Reports</a></li>
</ul>
</div>
<div>
<h4 class="text-xs uppercase tracking-[0.25em] text-brass mb-5">Services</h4>
<ul class="space-y-3 text-sm text-sand/75">
<li><a href="#" class="hover:text-brass transition-colors">Buyer Representation</a></li>
<li><a href="#" class="hover:text-brass transition-colors">Listing & Staging</a></li>
<li><a href="#" class="hover:text-brass transition-colors">Investment Advisory</a></li>
<li><a href="#" class="hover:text-brass transition-colors">Relocation Services</a></li>
<li><a href="#" class="hover:text-brass transition-colors">Property Management</a></li>
</ul>
</div>
<div>
<h4 class="text-xs uppercase tracking-[0.25em] text-brass mb-5">Contact</h4>
<ul class="space-y-4 text-sm text-sand/75">
<li class="flex gap-3"><i data-lucide="map-pin" class="w-4 h-4 text-brass shrink-0 mt-0.5"></i>2120 Meridian Avenue, Suite 400<br>Portland, OR 97209</li>
<li class="flex gap-3 items-center"><i data-lucide="phone" class="w-4 h-4 text-brass shrink-0"></i>(503) 555-0147</li>
<li class="flex gap-3 items-center"><i data-lucide="mail" class="w-4 h-4 text-brass shrink-0"></i>hello@havenmarkrealty.com</li>
<li class="flex gap-3 items-center"><i data-lucide="clock" class="w-4 h-4 text-brass shrink-0"></i>Mon–Sat · 9:00 AM – 6:00 PM</li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto pt-8 border-t border-cream/10 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-sage">
<p>© <span id="year">2025</span> Havenmark Realty & Advisory. All rights reserved. Licensed Broker, State of Oregon #201144208.</p>
<div class="flex gap-6">
<a href="#" class="hover:text-brass transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-brass transition-colors">Terms of Service</a>
<a href="#" class="hover:text-brass transition-colors">Fair Housing</a>
<a href="#" class="hover:text-brass transition-colors">Accessibility</a>
</div>
</div>
</footer>
<!-- ============ SCRIPTS ============ -->
<script>
lucide.createIcons();
document.getElementById('year').textContent = new Date().getFullYear();
/* ---------- header scroll state ---------- */
const header = document.getElementById('siteHeader');
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 50);
window.addEventListener('scroll', onScroll, { passive:true }); onScroll();
/* ---------- mobile menu ---------- */
const mm = document.getElementById('mobileMenu');
document.getElementById('menuBtn').addEventListener('click', () => { mm.classList.remove('hidden'); mm.classList.add('flex'); });
document.getElementById('menuClose').addEventListener('click', () => { mm.classList.add('hidden'); mm.classList.remove('flex'); });
mm.querySelectorAll('.mob-link').forEach(a => a.addEventListener('click', () => { mm.classList.add('hidden'); mm.classList.remove('flex'); }));
/* ---------- search tabs ---------- */
const hints = {
buy: 'Showing homes for sale across the greater Portland metro.',
rent: 'Showing rentals: apartments, townhomes, and single-family leases.',
sell: 'Tell us about your home — get a data-backed valuation within 24 hours.'
};
document.querySelectorAll('.search-tab').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.search-tab').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.getElementById('searchHint').textContent = hints[btn.dataset.tab];
});
});
/* ---------- listing filters ---------- */
document.querySelectorAll('.pill').forEach(pill => {
pill.addEventListener('click', () => {
document.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
const f = pill.dataset.filter;
document.querySelectorAll('#propGrid .prop-card').forEach(card => {
const match = f === 'all' || card.dataset.cat.includes(f);
card.style.display = match ? '' : 'none';
if (match) gsap.fromTo(card, {opacity:0, y:24}, {opacity:1, y:0, duration:.55, ease:'power3.out'});
});
});
});
/* ---------- favorite hearts ---------- */
document.querySelectorAll('.heart-btn').forEach(btn =>
btn.addEventListener('click', () => btn.classList.toggle('fav'))
);
/* ---------- FAQ accordion ---------- */
document.querySelectorAll('.faq-toggle').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.faq-item');
const ans = item.querySelector('.faq-answer');
const open = item.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(i => {
i.classList.remove('open');
i.querySelector('.faq-answer').style.maxHeight = null;
});
if (!open) { item.classList.add('open'); ans.style.maxHeight = ans.scrollHeight + 'px'; }
});
});
/* ---------- mortgage calculator ---------- */
const fmt = n => new Intl.NumberFormat('en-US',{style:'currency',currency:'USD',maximumFractionDigits:0}).format(n);
const el = id => document.getElementById(id);
let termYears = 30;
function calc() {
const price = +el('priceRange').value;
const dPct = +el('downRange').value;
const rate = +el('rateRange').value;
const down = price * dPct / 100;
const loan = price - down;
const r = rate / 100 / 12;
const n = termYears * 12;
const pi = loan * r * Math.pow(1+r, n) / (Math.pow(1+r, n) - 1);
const tax = price * 0.011 / 12;
const ins = price * 0.0035 / 12;
const pmi = dPct < 20 ? loan * 0.005 / 12 : 0;
const total = pi + tax + ins + pmi;
el('priceOut').textContent = fmt(price);
el('downPctOut').textContent = dPct;
el('downAmtOut').textContent = fmt(down);
el('rateOut').textContent = rate.toFixed(3).replace(/0+$/,'').replace(/\.$/,'') + '%';
el('totalOut').textContent = fmt(total);
el('loanOut').textContent = fmt(loan).replace('$','$').replace(',000','K').replace('$','$'); // simple
el('loanOut').textContent = '$' + Math.round(loan/1000) + 'K';
el('piOut').textContent = fmt(pi);
el('taxOut').textContent = fmt(tax);
el('insOut').textContent = fmt(ins);
el('pmiOut').textContent = fmt(pmi);
el('pmiNote').classList.toggle('hidden', pmi === 0);
el('pmiRow').classList.toggle('hidden', pmi === 0);
const p1 = pi/total*100, p2 = p1 + tax/total*100, p3 = p2 + ins/total*100;
el('donut').style.background =
`conic-gradient(#c7a15a 0% ${p1}%, #7d968a ${p1}% ${p2}%, #2e4d40 ${p2}% ${p3}%, #e9e1d2 ${p3}% 100%)`;
}
['priceRange','downRange','rateRange'].forEach(id => el(id).addEventListener('input', calc));
document.querySelectorAll('.term-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.term-btn').forEach(b => { b.classList.remove('bg-ink','text-cream'); });
btn.classList.add('bg-ink','text-cream');
termYears = +btn.dataset.years;
calc();
});
});
calc();
/* ---------- GSAP animations ---------- */
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo('.hero-el', {opacity:0, y:40}, {opacity:1, y:0, duration:1.1, stagger:.12, ease:'power3.out', delay:.2});
gsap.to('#heroImg', { scale:1, duration:2.4, ease:'power2.out' });
gsap.to('#heroImg', {
yPercent:12, ease:'none',
scrollTrigger:{ trigger:'#top', start:'top top', end:'bottom top', scrub:true }
});
gsap.utils.toArray('.reveal').forEach(elm => {
gsap.fromTo(elm, {opacity:0, y:48}, {
opacity:1, y:0, duration:1, ease:'power3.out',
scrollTrigger:{ trigger:elm, start:'top 88%', once:true }
});
});
/* counters */
document.querySelectorAll('[data-count]').forEach(elm => {
const target = +elm.dataset.count;
ScrollTrigger.create({
trigger: elm, start:'top 90%', once:true,
onEnter: () => gsap.fromTo(elm, {innerText:0}, {
innerText: target, duration:2, ease:'power2.out', snap:{innerText:1},
onUpdate: function(){ elm.innerText = Math.round(this.targets()[0].innerText).toLocaleString(); }
})
});
});
/* market bars */
gsap.fromTo('.mbar', {scaleY:0}, {
scaleY:1, duration:1.1, stagger:.08, ease:'power3.out',
scrollTrigger:{ trigger:'#market', start:'top 70%', once:true }
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:53:48.237Z",
"url": "https://benchmark.aimac.invalid/c55d1d0fedec2699eb4140889660c17389f7ab553241bf1c7bdbcc1f2e0044d2.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<button class=\"heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform\" aria-label=\"Save home\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .heart-btn.right-4.bg-cream\\/90"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<button class=\"heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform\" aria-label=\"Save home\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .heart-btn.right-4.bg-cream\\/90"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-lucide=\"menu\" aria-hidden=\"true\" class=\"lucide lucide-menu w-7 h-7\">",
"target": [
".lucide-menu"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<button class=\"heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform\" aria-label=\"Save home\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .heart-btn.right-4.bg-cream\\/90"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<button class=\"heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform\" aria-label=\"Save home\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .heart-btn.right-4.bg-cream\\/90"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"heart-btn absolute top-4 right-4 bg-cream/90 backdrop-blur rounded-full p-2.5 hover:scale-110 transition-transform\" aria-label=\"Save home\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .heart-btn.right-4.bg-cream\\/90"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"search-tab active px-5 py-2 rounded-full text-sm font-semibold transition-colors\" data-tab=\"buy\">Buy</button>",
"target": [
"button[data-tab=\"buy\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"hero-el font-display text-cream text-5xl sm:text-6xl lg:text-[5.4rem] leading-[1.02] font-light max-w-3xl\" style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;\">",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light\">Featured <em class=\"text-brassd\">listings</em></h2>",
"target": [
"#listings > .max-w-7xl.mx-auto > .md\\:flex-row.md\\:items-end.mb-12 > div:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"font-semibold mt-1\">The Maplewood Craftsman</h3>",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-semibold mt-1\">Harborview Penthouse</h3>",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-semibold mt-1\">The Juniper Bungalow</h3>",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-semibold mt-1\">Foundry Lofts #304</h3>",
"target": [
"article[data-cat=\"condo\"] > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-semibold mt-1\">Stonebridge Estate</h3>",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-semibold mt-1\">The Rowan Townhome</h3>",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > h3"
]
},
{
"html": "<h2 class=\"reveal font-display text-4xl lg:text-5xl font-light leading-tight\" style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 48px); opacity: 0;\">Selling, <em class=\"text-brass\">elevated.</em></h2>",
"target": [
".order-1 > .leading-tight"
]
},
{
"html": "<h4 class=\"font-semibold\">Valuation & Strategy</h4>",
"target": [
".gap-5:nth-child(1) > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold\">Preparation & Staging</h4>",
"target": [
".gap-5:nth-child(2) > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold\">Launch & Negotiation</h4>",
"target": [
".gap-5:nth-child(3) > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold\">Escrow to Close</h4>",
"target": [
".gap-5:nth-child(4) > div > h4"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light\">Know your number <em class=\"text-brassd\">before</em> you fall in love.</h2>",
"target": [
"#calculator > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > h2"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light\">The market, <em class=\"text-brassd\">decoded.</em></h2>",
"target": [
"#market > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > h2"
]
},
{
"html": "<h3 class=\"font-semibold text-lg\">Median Sale Price \u2014 Portland Metro</h3>",
"target": [
".mb-10 > div:nth-child(1) > .text-lg"
]
},
{
"html": "<h3 class=\"font-semibold text-lg\">Open Houses This Weekend</h3>",
"target": [
".mb-6.gap-3.items-center > .text-lg"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light\">Neighborhoods we <em class=\"text-brassd\">know by heart.</em></h2>",
"target": [
"#neighborhoods > .max-w-7xl.mx-auto > .md\\:flex-row.md\\:items-end.mb-12 > div > h2"
]
},
{
"html": "<h3 class=\"font-display text-2xl\">Willow Bend</h3>",
"target": [
".hood-card.group.h-96:nth-child(1) > .bottom-0.p-6.absolute > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl\">Harbor District</h3>",
"target": [
".hood-card.group.h-96:nth-child(2) > .bottom-0.p-6.absolute > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl\">Old Town</h3>",
"target": [
".hood-card.group.h-96:nth-child(3) > .bottom-0.p-6.absolute > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl\">North Ridge</h3>",
"target": [
".hood-card.group.h-96:nth-child(4) > .bottom-0.p-6.absolute > .text-2xl"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light\">Advisory first. <em class=\"text-brass\">Brokerage second.</em></h2>",
"target": [
"#about > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > h2"
]
},
{
"html": "<h3 class=\"font-semibold mb-2\">Fiduciary-Grade Counsel</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(1) > .mb-2"
]
},
{
"html": "<h3 class=\"font-semibold mb-2\">Proprietary Market Data</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(2) > .mb-2"
]
},
{
"html": "<h3 class=\"font-semibold mb-2\">Certified Negotiation</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(3) > .mb-2"
]
},
{
"html": "<h3 class=\"font-semibold mb-2\">Lifetime Relationship</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(4) > .mb-2"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light\">Frequently asked <em class=\"text-brassd\">questions</em></h2>",
"target": [
".text-center.mb-14.reveal > h2"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-light leading-tight\">Your next chapter starts with a <em class=\"text-brass\">conversation.</em></h2>",
"target": [
".p-10 > .leading-tight"
]
},
{
"html": "<h4 class=\"text-xs uppercase tracking-[0.25em] text-brass mb-5\">Explore</h4>",
"target": [
"div:nth-child(2) > .tracking-\\[0\\.25em\\]"
]
},
{
"html": "<h4 class=\"text-xs uppercase tracking-[0.25em] text-brass mb-5\">Services</h4>",
"target": [
"div:nth-child(3) > .tracking-\\[0\\.25em\\]"
]
},
{
"html": "<h4 class=\"text-xs uppercase tracking-[0.25em] text-brass mb-5\">Contact</h4>",
"target": [
".md\\:grid-cols-2 > div:nth-child(4) > .tracking-\\[0\\.25em\\]"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#101f1a",
"contrastRatio": 14.99,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.99"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"search-tab active px-5 py-2 rounded-full text-sm font-semibold transition-colors\" data-tab=\"buy\">Buy</button>",
"target": [
"button[data-tab=\"buy\"]"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"City, neighborhood, or address\" class=\"w-full bg-transparent outline-none text-sm placeholder:text-ink/40\">",
"target": [
".bg-transparent"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/52x52/101f1a/c7a15a?text=H&font=playfair-display\" alt=\"Havenmark Realty logo\" class=\"w-11 h-11 rounded-full ring-1 ring-brass/60 group-hover:rotate-[8deg] transition-transform duration-500\">",
"target": [
".ring-1"
]
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"City, neighborhood, or address\" class=\"w-full bg-transparent outline-none text-sm placeholder:text-ink/40\">",
"target": [
".bg-transparent"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"flex items-center gap-3 group\">",
"target": [
".group.gap-3[href$=\"#top\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ol class=\"reveal mt-10 space-y-6\" style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 48px); opacity: 0;\">",
"target": [
"ol"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li class=\"flex gap-5\">",
"target": [
".gap-5:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/52x52/101f1a/c7a15a?text=H&font=playfair-display\" alt=\"Havenmark Realty logo\" class=\"w-11 h-11 rounded-full ring-1 ring-brass/60 group-hover:rotate-[8deg] transition-transform duration-500\">",
"target": [
".ring-1"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 203.6,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (203.6px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"flex items-center gap-3 group\">",
"target": [
".group.gap-3[href$=\"#top\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": "imgNode",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<img id=\"heroImg\" src=\"https://picsum.photos/seed/havenhero/1920/1200\" alt=\"Modern home exterior at dusk\" class=\"w-full h-full object-cover opacity-70 scale-110\" style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px);\">",
"target": [
"#heroImg"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because element contains an image node"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-text font-display text-xl tracking-wide text-cream\">Havenmark<span class=\"text-brass\">.</span></span>",
"target": [
".brand-text"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because element contains an image node"
}
]
}
],
"violations": [
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input id=\"priceRange\" type=\"range\" min=\"150000\" max=\"2500000\" step=\"5000\" value=\"650000\">",
"target": [
"#priceRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input id=\"downRange\" type=\"range\" min=\"3\" max=\"50\" step=\"1\" value=\"20\">",
"target": [
"#downRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input id=\"rateRange\" type=\"range\" min=\"3\" max=\"10\" step=\"0.125\" value=\"6.25\">",
"target": [
"#rateRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "select-name",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select class=\"bg-white rounded-xl px-4 py-3 border border-sand text-sm outline-none text-ink/70\">\n <option>Any price</option><option>Up to $500K</option><option>$500K \u2013 $1M</option><option>$1M \u2013 $2M</option><option>$2M+</option>\n </select>",
"target": [
"select:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select class=\"bg-white rounded-xl px-4 py-3 border border-sand text-sm outline-none text-ink/70\">\n <option>Beds</option><option>1+</option><option>2+</option><option>3+</option><option>4+</option>\n </select>",
"target": [
"select:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c7a15a",
"bgColor": "#f5f0e6",
"contrastRatio": 2.13,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"fixed top-0 left-0 right-0 z-[100] py-5 px-6 lg:px-12 scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #c7a15a, background color: #f5f0e6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block text-[10px] uppercase tracking-[0.28em] text-brass\">Realty & Advisory</span>",
"target": [
".tracking-\\[0\\.28em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #c7a15a, background color: #f5f0e6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ceb991",
"bgColor": "#f5f0e6",
"contrastRatio": 1.68,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.68 (foreground color: #ceb991, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3\"><span class=\"w-8 h-px bg-brassd\"></span>Curated Portfolio</p>",
"target": [
"#listings > .max-w-7xl.mx-auto > .md\\:flex-row.md\\:items-end.mb-12 > div:nth-child(1) > .tracking-\\[0\\.3em\\].mb-4.gap-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.68 (foreground color: #ceb991, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ceb991",
"bgColor": "#f5f0e6",
"contrastRatio": 1.68,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.68 (foreground color: #ceb991, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brassd\">listings</em>",
"target": [
"#listings > .max-w-7xl.mx-auto > .md\\:flex-row.md\\:items-end.mb-12 > div:nth-child(1) > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.68 (foreground color: #ceb991, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#afb0a7",
"bgColor": "#f5f0e6",
"contrastRatio": 1.92,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.92 (foreground color: #afb0a7, background color: #f5f0e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-4 max-w-xl leading-relaxed\">Hand-selected properties representing the best square footage-per-dollar across the metro. Every listing is walked, measured, and priced against live comparable sales before it reaches this page.</p>",
"target": [
".max-w-xl.text-ink\\/60.mt-4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.92 (foreground color: #afb0a7, background color: #f5f0e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#80857e",
"contrastRatio": 3.31,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"pill active px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors\" data-filter=\"all\">All</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #f5f0e6, background color: #80857e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill active px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors\" data-filter=\"all\">All</button>",
"target": [
"button[data-filter=\"all\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #f5f0e6, background color: #80857e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#f5f0e6",
"contrastRatio": 3.31,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #80857e, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors\" data-filter=\"house\">Houses</button>",
"target": [
"button[data-filter=\"house\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #80857e, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#f5f0e6",
"contrastRatio": 3.31,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #80857e, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors\" data-filter=\"condo\">Condos & Lofts</button>",
"target": [
"button[data-filter=\"condo\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #80857e, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#f5f0e6",
"contrastRatio": 3.31,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #80857e, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 rounded-full border border-ink/20 text-sm font-medium transition-colors\" data-filter=\"luxury\">Luxury</button>",
"target": [
"button[data-filter=\"luxury\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #80857e, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#80857e",
"contrastRatio": 3.31,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">New</span>",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #f5f0e6, background color: #80857e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">New</span>",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #f5f0e6, background color: #80857e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#faf8f3",
"contrastRatio": 3.54,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mt-1\">The Maplewood Craftsman</h3>",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#babbb2",
"bgColor": "#faf8f3",
"contrastRatio": 1.82,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.82 (foreground color: #babbb2, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50 mt-0.5\">418 Willow Bend Lane, Portland, OR</p>",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > .mt-0\\.5.text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.82 (foreground color: #babbb2, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#faf8f3",
"contrastRatio": 3.54,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(1)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors\">View Details</button>",
"target": [
"article[data-cat=\"house\"]:nth-child(1) > .p-6 > .border-ink.hover\\:bg-ink.hover\\:text-cream"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#ddc89e",
"contrastRatio": 2.3,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-brass text-ink text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">Luxury</span>",
"target": [
"article[data-cat=\"luxury condo\"] > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #80857e, background color: #ddc89e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-brass text-ink text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">Luxury</span>",
"target": [
"article[data-cat=\"luxury condo\"] > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #80857e, background color: #ddc89e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#faf8f3",
"contrastRatio": 3.54,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"luxury condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mt-1\">Harborview Penthouse</h3>",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#babbb2",
"bgColor": "#faf8f3",
"contrastRatio": 1.82,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"luxury condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.82 (foreground color: #babbb2, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50 mt-0.5\">901 Marina Blvd #PH2, Portland, OR</p>",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > .mt-0\\.5.text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.82 (foreground color: #babbb2, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"luxury condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"luxury condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"luxury condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#faf8f3",
"contrastRatio": 3.54,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"luxury condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors\">View Details</button>",
"target": [
"article[data-cat=\"luxury condo\"] > .p-6 > .border-ink.hover\\:bg-ink.hover\\:text-cream"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#8f9d91",
"contrastRatio": 2.49,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-moss text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">Open Sat</span>",
"target": [
".bg-moss.left-4.px-3"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.49 (foreground color: #f5f0e6, background color: #8f9d91, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-moss text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">Open Sat</span>",
"target": [
".bg-moss.left-4.px-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.49 (foreground color: #f5f0e6, background color: #8f9d91, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#faf8f3",
"contrastRatio": 3.54,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mt-1\">The Juniper Bungalow</h3>",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#babbb2",
"bgColor": "#faf8f3",
"contrastRatio": 1.82,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.82 (foreground color: #babbb2, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50 mt-0.5\">77 Alder Court, Lake Oswego, OR</p>",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > .mt-0\\.5.text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.82 (foreground color: #babbb2, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a59d",
"bgColor": "#faf8f3",
"contrastRatio": 2.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a59d, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#80857e",
"bgColor": "#faf8f3",
"contrastRatio": 3.54,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.4459px, 0px); opacity: 0.5115;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(3)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors\">View Details</button>",
"target": [
"article[data-cat=\"house\"]:nth-child(3) > .p-6 > .border-ink.hover\\:bg-ink.hover\\:text-cream"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #80857e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#828780",
"contrastRatio": 3.22,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">New</span>",
"target": [
"article[data-cat=\"condo\"] > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.22 (foreground color: #f5f0e6, background color: #828780, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">New</span>",
"target": [
"article[data-cat=\"condo\"] > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.22 (foreground color: #f5f0e6, background color: #828780, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#faf8f3",
"contrastRatio": 3.45,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mt-1\">Foundry Lofts #304</h3>",
"target": [
"article[data-cat=\"condo\"] > .p-6 > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bcbcb3",
"bgColor": "#faf8f3",
"contrastRatio": 1.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #bcbcb3, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50 mt-0.5\">1220 Ironworks Way, Portland, OR</p>",
"target": [
"article[data-cat=\"condo\"] > .p-6 > .mt-0\\.5.text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #bcbcb3, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"condo\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"condo\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"condo\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#faf8f3",
"contrastRatio": 3.45,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"condo\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"condo\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors\">View Details</button>",
"target": [
"article[data-cat=\"condo\"] > .p-6 > .border-ink.hover\\:bg-ink.hover\\:text-cream"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#dec8a0",
"contrastRatio": 2.24,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-brass text-ink text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">Luxury</span>",
"target": [
"article[data-cat=\"luxury house\"] > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #828780, background color: #dec8a0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-brass text-ink text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">Luxury</span>",
"target": [
"article[data-cat=\"luxury house\"] > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #828780, background color: #dec8a0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#faf8f3",
"contrastRatio": 3.45,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"luxury house\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mt-1\">Stonebridge Estate</h3>",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bcbcb3",
"bgColor": "#faf8f3",
"contrastRatio": 1.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"luxury house\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #bcbcb3, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50 mt-0.5\">6 Stonebridge Manor, West Linn, OR</p>",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > .mt-0\\.5.text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #bcbcb3, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"luxury house\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"luxury house\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"luxury house\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#faf8f3",
"contrastRatio": 3.45,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"luxury house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"luxury house\"]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors\">View Details</button>",
"target": [
"article[data-cat=\"luxury house\"] > .p-6 > .border-ink.hover\\:bg-ink.hover\\:text-cream"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#828780",
"contrastRatio": 3.22,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">New</span>",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.22 (foreground color: #f5f0e6, background color: #828780, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-ink text-cream text-[11px] font-semibold uppercase tracking-widest px-3 py-1.5 rounded-full\">New</span>",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .h-60.relative.overflow-hidden > .left-4.px-3.py-1\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.22 (foreground color: #f5f0e6, background color: #828780, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#faf8f3",
"contrastRatio": 3.45,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mt-1\">The Rowan Townhome</h3>",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bcbcb3",
"bgColor": "#faf8f3",
"contrastRatio": 1.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #bcbcb3, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50 mt-0.5\">233 Larkspur Row, Beaverton, OR</p>",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > .mt-0\\.5.text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #bcbcb3, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79e",
"bgColor": "#faf8f3",
"contrastRatio": 2.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > .pt-4.text-ink\\/70.mt-4 > .gap-1\\.5.items-center.flex:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #a5a79e, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828780",
"bgColor": "#faf8f3",
"contrastRatio": 3.45,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"prop-card reveal bg-white rounded-2xl overflow-hidden shadow-sm\" data-cat=\"house\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.8978px, 0px); opacity: 0.5021;\">",
"target": [
"article[data-cat=\"house\"]:nth-child(6)"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"mt-5 w-full border border-ink rounded-xl py-3 text-sm font-semibold hover:bg-ink hover:text-cream transition-colors\">View Details</button>",
"target": [
"article[data-cat=\"house\"]:nth-child(6) > .p-6 > .border-ink.hover\\:bg-ink.hover\\:text-cream"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #828780, background color: #faf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#797f78",
"contrastRatio": 3.61,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#contact\" class=\"inline-flex items-center gap-3 bg-ink text-cream px-8 py-4 rounded-full font-semibold text-sm hover:bg-pine transition-colors\">",
"target": [
".inline-flex.hover\\:bg-pine.px-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.61 (foreground color: #f5f0e6, background color: #797f78, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#contact\" class=\"inline-flex items-center gap-3 bg-ink text-cream px-8 py-4 rounded-full font-semibold text-sm hover:bg-pine transition-colors\">",
"target": [
".inline-flex.hover\\:bg-pine.px-8"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.61 (foreground color: #f5f0e6, background color: #797f78, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bdbdb4",
"bgColor": "#f5f0e6",
"contrastRatio": 1.66,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.66 (foreground color: #bdbdb4, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-ink/45 mt-3\">New listings matching your criteria, delivered before they hit the major portals.</p>",
"target": [
".mt-3.text-ink\\/45.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.66 (foreground color: #bdbdb4, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#796f45",
"bgColor": "#1c352c",
"contrastRatio": 2.61,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.61 (foreground color: #796f45, background color: #1c352c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"reveal text-brass uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 22.0212px, 0px); opacity: 0.5412;\"><span class=\"w-8 h-px bg-brass\"></span>Seller Guide</p>",
"target": [
".order-1 > .tracking-\\[0\\.3em\\].mb-4.gap-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.61 (foreground color: #796f45, background color: #1c352c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#796f45",
"bgColor": "#1c352c",
"contrastRatio": 2.61,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.61 (foreground color: #796f45, background color: #1c352c, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brass\">elevated.</em>",
"target": [
".order-1 > .leading-tight > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.61 (foreground color: #796f45, background color: #1c352c, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#726638",
"bgColor": "#a0a69d",
"contrastRatio": 2.29,
"fontSize": "27.0pt (36px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute -bottom-8 -right-4 sm:right-8 bg-cream text-ink rounded-2xl p-6 shadow-2xl w-64\">",
"target": [
".-bottom-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #726638, background color: #a0a69d, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-4xl text-brassd\">+7.2%</p>",
"target": [
".text-4xl.font-display.text-brassd"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #726638, background color: #a0a69d, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f887d",
"bgColor": "#1c352c",
"contrastRatio": 3.58,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #7f887d, background color: #1c352c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"reveal text-sand/80 mt-6 leading-relaxed\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 18.8861px, 0px); opacity: 0.6065;\">",
"target": [
".text-sand\\/80.mt-6.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #7f887d, background color: #1c352c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f887d",
"bgColor": "#1c352c",
"contrastRatio": 3.58,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #7f887d, background color: #1c352c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"reveal text-sand/80 mt-4 leading-relaxed\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 18.8861px, 0px); opacity: 0.6065;\">",
"target": [
".text-sand\\/80.mt-4.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #7f887d, background color: #1c352c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#847748",
"bgColor": "#1c352c",
"contrastRatio": 2.95,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-display text-brass text-2xl shrink-0 w-10\">01</span>",
"target": [
".gap-5:nth-child(1) > .w-10.text-2xl.shrink-0"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#737e72",
"bgColor": "#1c352c",
"contrastRatio": 3.1,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/70 mt-1 leading-relaxed\">A data-backed list price built on comps, condition, and current buyer demand \u2014 never a guess.</p>",
"target": [
".gap-5:nth-child(1) > div > .text-sand\\/70.mt-1.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#847748",
"bgColor": "#1c352c",
"contrastRatio": 2.95,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-display text-brass text-2xl shrink-0 w-10\">02</span>",
"target": [
".gap-5:nth-child(2) > .w-10.text-2xl.shrink-0"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#737e72",
"bgColor": "#1c352c",
"contrastRatio": 3.1,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/70 mt-1 leading-relaxed\">Targeted repairs, editorial-grade staging, and twilight photography that stops the scroll.</p>",
"target": [
".gap-5:nth-child(2) > div > .text-sand\\/70.mt-1.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#847748",
"bgColor": "#1c352c",
"contrastRatio": 2.95,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-display text-brass text-2xl shrink-0 w-10\">03</span>",
"target": [
".gap-5:nth-child(3) > .w-10.text-2xl.shrink-0"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#737e72",
"bgColor": "#1c352c",
"contrastRatio": 3.1,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/70 mt-1 leading-relaxed\">Offer review, counter-strategy, and contingency management handled by a certified negotiation expert.</p>",
"target": [
".gap-5:nth-child(3) > div > .text-sand\\/70.mt-1.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#847748",
"bgColor": "#1c352c",
"contrastRatio": 2.95,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-display text-brass text-2xl shrink-0 w-10\">04</span>",
"target": [
".gap-5:nth-child(4) > .w-10.text-2xl.shrink-0"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #847748, background color: #1c352c, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#737e72",
"bgColor": "#1c352c",
"contrastRatio": 3.1,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"sell\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/70 mt-1 leading-relaxed\">Title, disclosures, and closing costs coordinated end-to-end, with a 21-day average escrow.</p>",
"target": [
".gap-5:nth-child(4) > div > .text-sand\\/70.mt-1.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #737e72, background color: #1c352c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b49456",
"bgColor": "#f5f0e6",
"contrastRatio": 2.52,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #b49456, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3\"><span class=\"w-8 h-px bg-brassd\"></span>Interactive Tool</p>",
"target": [
"#calculator > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > .tracking-\\[0\\.3em\\].mb-4.gap-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #b49456, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b49456",
"bgColor": "#f5f0e6",
"contrastRatio": 2.52,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #b49456, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brassd\">before</em>",
"target": [
"#calculator > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #b49456, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f847d",
"bgColor": "#f5f0e6",
"contrastRatio": 3.36,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.36 (foreground color: #7f847d, background color: #f5f0e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-5 leading-relaxed\">",
"target": [
"#calculator > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > .text-ink\\/60.mt-5.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.36 (foreground color: #7f847d, background color: #f5f0e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6c736c",
"bgColor": "#f5f0e6",
"contrastRatio": 4.29,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute -bottom-8 -right-4 sm:right-8 bg-cream text-ink rounded-2xl p-6 shadow-2xl w-64\">",
"target": [
".-bottom-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.29 (foreground color: #6c736c, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/60 mt-1 leading-snug\">Average premium our staged listings capture versus neighborhood comps.</p>",
"target": [
".leading-snug"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.29 (foreground color: #6c736c, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#fbf8f4",
"contrastRatio": 4.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label class=\"text-sm font-semibold\">Home Price</label>",
"target": [
"div:nth-child(1) > .items-baseline.mb-3.justify-between > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cab488",
"bgColor": "#fbf8f4",
"contrastRatio": 1.9,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"priceOut\" class=\"font-display text-xl text-brassd\">$650,000</span>",
"target": [
"#priceOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2c1b8",
"bgColor": "#fbf8f4",
"contrastRatio": 1.7,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>$150K</span>",
"target": [
"div:nth-child(1) > .mt-2.text-\\[11px\\].text-ink\\/40 > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2c1b8",
"bgColor": "#fbf8f4",
"contrastRatio": 1.7,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>$2.5M</span>",
"target": [
"div:nth-child(1) > .mt-2.text-\\[11px\\].text-ink\\/40 > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#fbf8f4",
"contrastRatio": 4.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label class=\"text-sm font-semibold\">Down Payment</label>",
"target": [
"div:nth-child(2) > .items-baseline.mb-3.justify-between > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cab488",
"bgColor": "#fbf8f4",
"contrastRatio": 1.9,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-display text-xl text-brassd\"><span id=\"downPctOut\">20</span>% \u00b7 <span id=\"downAmtOut\">$130,000</span></span>",
"target": [
"div:nth-child(2) > .items-baseline.mb-3.justify-between > .text-xl.font-display.text-brassd"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cab488",
"bgColor": "#fbf8f4",
"contrastRatio": 1.9,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"downPctOut\">20</span>",
"target": [
"#downPctOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cab488",
"bgColor": "#fbf8f4",
"contrastRatio": 1.9,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"downAmtOut\">$130,000</span>",
"target": [
"#downAmtOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2c1b8",
"bgColor": "#fbf8f4",
"contrastRatio": 1.7,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>3%</span>",
"target": [
"div:nth-child(2) > .mt-2.text-\\[11px\\].text-ink\\/40 > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2c1b8",
"bgColor": "#fbf8f4",
"contrastRatio": 1.7,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>50%</span>",
"target": [
"div:nth-child(2) > .mt-2.text-\\[11px\\].text-ink\\/40 > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#fbf8f4",
"contrastRatio": 4.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label class=\"text-sm font-semibold\">Interest Rate</label>",
"target": [
"div:nth-child(3) > .items-baseline.mb-3.justify-between > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cab488",
"bgColor": "#fbf8f4",
"contrastRatio": 1.9,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"rateOut\" class=\"font-display text-xl text-brassd\">6.25%</span>",
"target": [
"#rateOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cab488, background color: #fbf8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2c1b8",
"bgColor": "#fbf8f4",
"contrastRatio": 1.7,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>3%</span>",
"target": [
"div:nth-child(3) > .mt-2.text-\\[11px\\].text-ink\\/40 > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2c1b8",
"bgColor": "#fbf8f4",
"contrastRatio": 1.7,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>10%</span>",
"target": [
"div:nth-child(3) > .mt-2.text-\\[11px\\].text-ink\\/40 > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #c2c1b8, background color: #fbf8f4, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#fbf8f4",
"contrastRatio": 4.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label class=\"text-sm font-semibold block mb-3\">Loan Term</label>",
"target": [
"div:nth-child(4) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#fbf8f4",
"contrastRatio": 4.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"term-btn py-3 rounded-xl border border-sand text-sm font-semibold transition-colors\" data-years=\"15\">15 yr</button>",
"target": [
"button[data-years=\"15\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"term-btn active-term py-3 rounded-xl border border-sand text-sm font-semibold transition-colors bg-ink text-cream\" data-years=\"30\">30 yr</button>",
"target": [
".active-term"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"term-btn active-term py-3 rounded-xl border border-sand text-sm font-semibold transition-colors bg-ink text-cream\" data-years=\"30\">30 yr</button>",
"target": [
".active-term"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#fbf8f4",
"contrastRatio": 4.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"term-btn py-3 rounded-xl border border-sand text-sm font-semibold transition-colors\" data-years=\"20\">20 yr</button>",
"target": [
"button[data-years=\"20\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.09 (foreground color: #757b74, background color: #fbf8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bbbbb3",
"bgColor": "#fbf8f4",
"contrastRatio": 1.82,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal grid lg:grid-cols-[1.15fr_1fr] gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-sand\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 21.0736px, 0px); opacity: 0.561;\">",
"target": [
".lg\\:grid-cols-\\[1\\.15fr_1fr\\]"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.82 (foreground color: #bbbbb3, background color: #fbf8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-ink/45 leading-relaxed pt-2 border-t border-sand\">",
"target": [
".pt-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.82 (foreground color: #bbbbb3, background color: #fbf8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2beb2",
"bgColor": "#757b74",
"contrastRatio": 2.25,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs uppercase tracking-[0.3em] text-sage\">Estimated Monthly Payment</p>",
"target": [
".tracking-\\[0\\.3em\\].text-sage.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dbc497",
"bgColor": "#757b74",
"contrastRatio": 2.55,
"fontSize": "45.0pt (60px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.55 (foreground color: #dbc497, background color: #757b74, font size: 45.0pt (60px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p id=\"totalOut\" class=\"font-display text-6xl mt-3 text-brass\">$3,987</p>",
"target": [
"#totalOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.55 (foreground color: #dbc497, background color: #757b74, font size: 45.0pt (60px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2beb2",
"bgColor": "#757b74",
"contrastRatio": 2.25,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sage mt-2\">Principal, interest, taxes & insurance (PITI)</p>",
"target": [
".mt-2.text-sage.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2beb2",
"bgColor": "#757b74",
"contrastRatio": 2.25,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"w-24 h-24 rounded-full bg-ink grid place-items-center text-center\">\n <span class=\"text-[10px] uppercase tracking-widest text-sage leading-tight\">Loan<br><span id=\"loanOut\" class=\"text-cream text-sm font-semibold\">$520K</span></span>\n </div>",
"target": [
".w-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] uppercase tracking-widest text-sage leading-tight\">Loan<br><span id=\"loanOut\" class=\"text-cream text-sm font-semibold\">$520K</span></span>",
"target": [
".leading-tight.text-\\[10px\\].tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"w-24 h-24 rounded-full bg-ink grid place-items-center text-center\">\n <span class=\"text-[10px] uppercase tracking-widest text-sage leading-tight\">Loan<br><span id=\"loanOut\" class=\"text-cream text-sm font-semibold\">$520K</span></span>\n </div>",
"target": [
".w-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"loanOut\" class=\"text-cream text-sm font-semibold\">$520K</span>",
"target": [
"#loanOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 rounded-sm bg-brass\"></span>Principal & Interest</span>",
"target": [
".justify-between:nth-child(1) > .gap-2.items-center.flex"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"piOut\" class=\"font-semibold\">$3,202</span>",
"target": [
"#piOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 rounded-sm bg-sage\"></span>Property Tax</span>",
"target": [
".space-y-3 > .justify-between:nth-child(2) > .gap-2.items-center.flex"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"taxOut\" class=\"font-semibold\">$596</span>",
"target": [
"#taxOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 rounded-sm bg-moss\"></span>Insurance</span>",
"target": [
".justify-between:nth-child(3) > .gap-2.items-center.flex"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e6",
"bgColor": "#757b74",
"contrastRatio": 3.81,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"insOut\" class=\"font-semibold\">$190</span>",
"target": [
"#insOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.81 (foreground color: #f5f0e6, background color: #757b74, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#757b74",
"bgColor": "#dbc497",
"contrastRatio": 2.55,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#contact\" class=\"flex items-center justify-center gap-3 bg-brass text-ink w-full py-4 rounded-xl font-semibold text-sm hover:bg-cream transition-colors\">",
"target": [
".justify-center.hover\\:bg-cream.py-4"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.55 (foreground color: #757b74, background color: #dbc497, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#contact\" class=\"flex items-center justify-center gap-3 bg-brass text-ink w-full py-4 rounded-xl font-semibold text-sm hover:bg-cream transition-colors\">",
"target": [
".justify-center.hover\\:bg-cream.py-4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.55 (foreground color: #757b74, background color: #dbc497, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2beb2",
"bgColor": "#757b74",
"contrastRatio": 2.25,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-ink text-cream p-8 lg:p-12 flex flex-col justify-between\">",
"target": [
".lg\\:p-12.p-8.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] text-sage text-center mt-3\">Connect with a vetted lending partner in under 24 hours.</p>",
"target": [
".text-center.mt-3.text-\\[11px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #b2beb2, background color: #757b74, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cbb68c",
"bgColor": "#eee7da",
"contrastRatio": 1.6,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.6 (foreground color: #cbb68c, background color: #eee7da, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3\"><span class=\"w-8 h-px bg-brassd\"></span>Market Intelligence</p>",
"target": [
"#market > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > .tracking-\\[0\\.3em\\].mb-4.gap-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.6 (foreground color: #cbb68c, background color: #eee7da, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cbb68c",
"bgColor": "#eee7da",
"contrastRatio": 1.6,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.6 (foreground color: #cbb68c, background color: #eee7da, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brassd\">decoded.</em>",
"target": [
"#market > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.6 (foreground color: #cbb68c, background color: #eee7da, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#abaaa0",
"bgColor": "#eee7da",
"contrastRatio": 1.89,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.89 (foreground color: #abaaa0, background color: #eee7da, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-5 leading-relaxed\">\n Headlines lag; neighborhoods lead. Our research desk tracks median sale price, days on market, and months of\n inventory at the zip-code level, so you negotiate from evidence rather than emotion.\n </p>",
"target": [
"#market > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > .text-ink\\/60.mt-5.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.89 (foreground color: #abaaa0, background color: #eee7da, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#70766d",
"bgColor": "#f8f5ef",
"contrastRatio": 4.28,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #70766d, background color: #f8f5ef, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold text-lg\">Median Sale Price \u2014 Portland Metro</h3>",
"target": [
".mb-10 > div:nth-child(1) > .text-lg"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #70766d, background color: #f8f5ef, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#afaea4",
"bgColor": "#f8f5ef",
"contrastRatio": 2.05,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.05 (foreground color: #afaea4, background color: #f8f5ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/50\">Quarterly, trailing two years</p>",
"target": [
"div:nth-child(1) > .text-ink\\/50.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.05 (foreground color: #afaea4, background color: #f8f5ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c7af82",
"bgColor": "#f8f5ef",
"contrastRatio": 1.95,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.95 (foreground color: #c7af82, background color: #f8f5ef, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-3xl text-brassd\">$612K</p>",
"target": [
".text-3xl.font-display.text-brassd"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.95 (foreground color: #c7af82, background color: #f8f5ef, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] uppercase tracking-widest text-ink/45\">Current Median</p>",
"target": [
"div:nth-child(1) > .text-ink\\/45.text-\\[11px\\].tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] uppercase tracking-widest text-ink/45\">Days on Market</p>",
"target": [
"div:nth-child(2) > .text-ink\\/45.text-\\[11px\\].tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] uppercase tracking-widest text-ink/45\">Months Supply</p>",
"target": [
"div:nth-child(3) > .text-ink\\/45.text-\\[11px\\].tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q1 '23</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(1) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q2</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(2) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q3</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(3) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q4</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(4) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q1 '24</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(5) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q2</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(6) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q3</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(7) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5b4a9",
"bgColor": "#f8f5ef",
"contrastRatio": 1.91,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] text-ink/45\">Q4</span>",
"target": [
".justify-end.flex-1.flex-col:nth-child(8) > .text-\\[10px\\].text-ink\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.91 (foreground color: #b5b4a9, background color: #f8f5ef, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a9a99e",
"bgColor": "#f8f5ef",
"contrastRatio": 2.17,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-8 lg:p-10 border border-sand shadow-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
".lg\\:p-10.rounded-3xl.shadow-sm"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.17 (foreground color: #a9a99e, background color: #f8f5ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ink/55 mt-6 leading-relaxed\">",
"target": [
".text-ink\\/55"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.17 (foreground color: #a9a99e, background color: #f8f5ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2ece1",
"bgColor": "#70766d",
"contrastRatio": 3.96,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold text-lg\">Open Houses This Weekend</h3>",
"target": [
".mb-6.gap-3.items-center > .text-lg"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2ece1",
"bgColor": "#70766d",
"contrastRatio": 3.96,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-sm\">The Juniper Bungalow</p>",
"target": [
".pb-5.border-b.border-cream\\/10:nth-child(1) > div > .font-semibold.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#aeb9ad",
"bgColor": "#70766d",
"contrastRatio": 2.29,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #aeb9ad, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-sage mt-0.5\">77 Alder Ct, Lake Oswego</p>",
"target": [
".pb-5.border-b.border-cream\\/10:nth-child(1) > div > .mt-0\\.5.text-sage.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #aeb9ad, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8bf91",
"bgColor": "#70766d",
"contrastRatio": 2.61,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.61 (foreground color: #d8bf91, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-brass mt-1.5 font-medium\">Sat \u00b7 11:00 AM \u2013 2:00 PM</p>",
"target": [
".pb-5.border-b.border-cream\\/10:nth-child(1) > div > .mt-1\\.5.font-medium.text-brass"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.61 (foreground color: #d8bf91, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2ece1",
"bgColor": "#70766d",
"contrastRatio": 3.96,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-sm\">The Maplewood Craftsman</p>",
"target": [
".pb-5.border-b.border-cream\\/10:nth-child(2) > div > .font-semibold.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#aeb9ad",
"bgColor": "#70766d",
"contrastRatio": 2.29,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #aeb9ad, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-sage mt-0.5\">418 Willow Bend Ln, Portland</p>",
"target": [
".pb-5.border-b.border-cream\\/10:nth-child(2) > div > .mt-0\\.5.text-sage.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #aeb9ad, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8bf91",
"bgColor": "#70766d",
"contrastRatio": 2.61,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.61 (foreground color: #d8bf91, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-brass mt-1.5 font-medium\">Sat \u00b7 1:00 \u2013 4:00 PM</p>",
"target": [
".pb-5.border-b.border-cream\\/10:nth-child(2) > div > .mt-1\\.5.font-medium.text-brass"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.61 (foreground color: #d8bf91, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2ece1",
"bgColor": "#70766d",
"contrastRatio": 3.96,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-sm\">Foundry Lofts #304</p>",
"target": [
".gap-4:nth-child(3) > div > .font-semibold.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#aeb9ad",
"bgColor": "#70766d",
"contrastRatio": 2.29,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #aeb9ad, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-sage mt-0.5\">1220 Ironworks Way, Portland</p>",
"target": [
".gap-4:nth-child(3) > div > .mt-0\\.5.text-sage.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #aeb9ad, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8bf91",
"bgColor": "#70766d",
"contrastRatio": 2.61,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.61 (foreground color: #d8bf91, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-brass mt-1.5 font-medium\">Sun \u00b7 12:00 \u2013 3:00 PM</p>",
"target": [
".gap-4:nth-child(3) > div > .mt-1\\.5.font-medium.text-brass"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.61 (foreground color: #d8bf91, background color: #70766d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2ece1",
"bgColor": "#70766d",
"contrastRatio": 3.96,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"reveal bg-ink text-cream rounded-3xl p-8 lg:p-10 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 20.7647px, 0px); opacity: 0.5674;\">",
"target": [
"aside"
]
},
{
"html": "<section id=\"market\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-sand/60\">",
"target": [
"#market"
]
},
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#contact\" class=\"mt-8 flex items-center justify-center gap-2 border border-cream/30 rounded-xl py-3.5 text-sm font-semibold hover:bg-cream hover:text-ink transition-colors\">",
"target": [
".border-cream\\/30"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #f2ece1, background color: #70766d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8bf91",
"bgColor": "#778277",
"contrastRatio": 2.24,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-pine rounded-2xl p-5\">",
"target": [
".p-5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #d8bf91, background color: #778277, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] uppercase tracking-[0.25em] text-brass mb-2\">Trend Watch</p>",
"target": [
".tracking-\\[0\\.25em\\].mb-2.text-\\[11px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #d8bf91, background color: #778277, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ece4d6",
"bgColor": "#778277",
"contrastRatio": 3.17,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-pine rounded-2xl p-5\">",
"target": [
".p-5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.17 (foreground color: #ece4d6, background color: #778277, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/80 leading-relaxed\">Rate buydowns are back: 2-1 buydowns now appear in 31% of accepted offers we negotiated this quarter.</p>",
"target": [
".text-sand\\/80.leading-relaxed.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.17 (foreground color: #ece4d6, background color: #778277, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9b285",
"bgColor": "#f5f0e6",
"contrastRatio": 1.81,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.81 (foreground color: #c9b285, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-brassd uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3\"><span class=\"w-8 h-px bg-brassd\"></span>Local Expertise</p>",
"target": [
"#neighborhoods > .max-w-7xl.mx-auto > .md\\:flex-row.md\\:items-end.mb-12 > div > .tracking-\\[0\\.3em\\].mb-4.gap-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.81 (foreground color: #c9b285, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9b285",
"bgColor": "#f5f0e6",
"contrastRatio": 1.81,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.81 (foreground color: #c9b285, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brassd\">know by heart.</em>",
"target": [
"#neighborhoods > .max-w-7xl.mx-auto > .md\\:flex-row.md\\:items-end.mb-12 > div > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.81 (foreground color: #c9b285, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a79f",
"bgColor": "#f5f0e6",
"contrastRatio": 2.14,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.14 (foreground color: #a5a79f, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 max-w-md leading-relaxed text-sm\">School boundaries, zoning changes, the caf\u00e9 that just signed a lease \u2014 context like this doesn't show up in an MLS feed. It shows up in our pricing.</p>",
"target": [
".max-w-md"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #a5a79f, background color: #f5f0e6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#656340",
"bgColor": "#1c352c",
"contrastRatio": 2.13,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #656340, background color: #1c352c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-brass uppercase tracking-[0.3em] text-xs mb-4 flex items-center gap-3\"><span class=\"w-8 h-px bg-brass\"></span>Why Havenmark</p>",
"target": [
"#about > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > .tracking-\\[0\\.3em\\].mb-4.gap-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #656340, background color: #1c352c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#656340",
"bgColor": "#1c352c",
"contrastRatio": 2.13,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #656340, background color: #1c352c, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brass\">Brokerage second.</em>",
"target": [
"#about > .max-w-7xl.mx-auto > .max-w-2xl.mb-14.reveal > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #656340, background color: #1c352c, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5e6c61",
"bgColor": "#1c352c",
"contrastRatio": 2.37,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.37 (foreground color: #5e6c61, background color: #1c352c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sand/75 mt-5 leading-relaxed\">We measure success in client outcomes, not transaction counts. Every engagement \u2014 whether a first condo or a ten-door investment portfolio \u2014 begins with strategy and ends with accountability.</p>",
"target": [
".text-sand\\/75.mt-5.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.37 (foreground color: #5e6c61, background color: #1c352c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#79857b",
"bgColor": "#1a3129",
"contrastRatio": 3.59,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(1)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mb-2\">Fiduciary-Grade Counsel</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(1) > .mb-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#55655a",
"bgColor": "#1a3129",
"contrastRatio": 2.24,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(1)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/65 leading-relaxed\">Licensed brokers held to a written duty of loyalty. We tell you when <em>not</em> to buy \u2014 and mean it.</p>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(1) > .text-sand\\/65.leading-relaxed.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#55655a",
"bgColor": "#1a3129",
"contrastRatio": 2.24,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(1)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em>not</em>",
"target": [
".text-sand\\/65.leading-relaxed.text-sm > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#79857b",
"bgColor": "#1a3129",
"contrastRatio": 3.59,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(2)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mb-2\">Proprietary Market Data</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(2) > .mb-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#55655a",
"bgColor": "#1a3129",
"contrastRatio": 2.24,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(2)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/65 leading-relaxed\">Zip-level absorption rates, off-market comps, and price-per-square-foot trends refreshed weekly.</p>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(2) > .text-sand\\/65.leading-relaxed.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#79857b",
"bgColor": "#1a3129",
"contrastRatio": 3.59,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(3)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mb-2\">Certified Negotiation</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(3) > .mb-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#55655a",
"bgColor": "#1a3129",
"contrastRatio": 2.24,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(3)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/65 leading-relaxed\">RNE-certified agents who treat every contingency, credit, and counter as leverage on your side.</p>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(3) > .text-sand\\/65.leading-relaxed.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#79857b",
"bgColor": "#1a3129",
"contrastRatio": 3.59,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(4)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-semibold mb-2\">Lifetime Relationship</h3>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(4) > .mb-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.59 (foreground color: #79857b, background color: #1a3129, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#55655a",
"bgColor": "#1a3129",
"contrastRatio": 2.24,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-ink/40 border border-cream/10 rounded-2xl p-8 hover:border-brass/50 transition-colors duration-500\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 27.4991px, 0px); opacity: 0.4271;\">",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(4)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-sand/65 leading-relaxed\">Annual equity reviews, contractor referrals, and refinance alerts long after you get the keys.</p>",
"target": [
".bg-ink\\/40.hover\\:border-brass\\/50.duration-500:nth-child(4) > .text-sand\\/65.leading-relaxed.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #55655a, background color: #1a3129, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#192f27",
"bgColor": "#89938a",
"contrastRatio": 4.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-cream text-ink rounded-2xl p-8\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.7842px, 0px); opacity: 0.5045;\">",
"target": [
"figure:nth-child(2)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #192f27, background color: #89938a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-ink/50\">Seller \u00b7 Old Town</p>",
"target": [
"figure:nth-child(2) > figcaption > div > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #192f27, background color: #89938a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#192f27",
"bgColor": "#89938a",
"contrastRatio": 4.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-cream text-ink rounded-2xl p-8\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 23.7842px, 0px); opacity: 0.5045;\">",
"target": [
"figure:nth-child(3)"
]
},
{
"html": "<section id=\"about\" class=\"py-24 lg:py-32 px-6 lg:px-12 bg-pine text-cream relative overflow-hidden\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #192f27, background color: #89938a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-ink/50\">Investor \u00b7 4 doors and counting</p>",
"target": [
"figure:nth-child(3) > figcaption > div > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #192f27, background color: #89938a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cdb88f",
"bgColor": "#f5f0e6",
"contrastRatio": 1.7,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #cdb88f, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-brassd uppercase tracking-[0.3em] text-xs mb-4\">Straight Answers</p>",
"target": [
".text-center.mb-14.reveal > .tracking-\\[0\\.3em\\].mb-4.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #cdb88f, background color: #f5f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cdb88f",
"bgColor": "#f5f0e6",
"contrastRatio": 1.7,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.7 (foreground color: #cdb88f, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-brassd\">questions</em>",
"target": [
".text-center.mb-14.reveal > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #cdb88f, background color: #f5f0e6, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d837b",
"bgColor": "#faf8f3",
"contrastRatio": 3.66,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl border border-sand overflow-hidden\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(1) > .faq-toggle.text-left.py-6"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d837b",
"bgColor": "#faf8f3",
"contrastRatio": 3.66,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl border border-sand overflow-hidden\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(2) > .faq-toggle.text-left.py-6"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d837b",
"bgColor": "#faf8f3",
"contrastRatio": 3.66,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl border border-sand overflow-hidden\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(3) > .faq-toggle.text-left.py-6"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d837b",
"bgColor": "#faf8f3",
"contrastRatio": 3.66,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl border border-sand overflow-hidden\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(4) > .faq-toggle.text-left.py-6"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d837b",
"bgColor": "#faf8f3",
"contrastRatio": 3.66,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl border border-sand overflow-hidden\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-toggle w-full flex items-center justify-between gap-4 text-left px-7 py-6 font-semibold\">",
"target": [
".faq-item.bg-white.border-sand:nth-child(5) > .faq-toggle.text-left.py-6"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.66 (foreground color: #7d837b, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9996
},
{
"y": 576,
"height": 9996
},
{
"y": 1152,
"height": 9996
},
{
"y": 1728,
"height": 9996
},
{
"y": 2304,
"height": 9996
},
{
"y": 2880,
"height": 9996
},
{
"y": 3456,
"height": 9996
},
{
"y": 4032,
"height": 9996
},
{
"y": 4608,
"height": 9996
},
{
"y": 5184,
"height": 9996
},
{
"y": 5760,
"height": 9996
},
{
"y": 6336,
"height": 9996
},
{
"y": 6912,
"height": 9996
},
{
"y": 7488,
"height": 9996
},
{
"y": 8064,
"height": 9996
},
{
"y": 8640,
"height": 9996
},
{
"y": 9216,
"height": 9996
},
{
"y": 9276,
"height": 9996
}
],
"scans": 19,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Real Estate" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Real Estate"
- Description: Property listings, real estate agencies, home buying, rentals, and mortgage resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Real Estate" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Calculator", "Contact", "Market".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Real Estate" category. Consider themes similar to: "Mortgage Options", "Investment Properties", "Seller Guide".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "pre-approval", "contingency", "square footage".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Save Search", "List Property", "View Details".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Real Estate" sector. Ideas similar but not limited to: "mortgage pre-qualifier".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "new listings", "open houses", "market trends".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.