Fireworks Ember 1 – Pets
via Fireworks · Generated
- AIMAC Debt 10.61
- Cost $0.54
- Total Violations 129
- HTML Size 84 KB
- Em Dashes 27
Screenshot
View Live Page
Accessibility Issues Found
129 Serious
-
color-contrast serious 127 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#donate" class="inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-5 py-2.5 rounded-full shadow-card ... -
definition-list serious 1 instance
<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
Example HTML
<dl class="mt-10 flex flex-wrap gap-x-8 gap-y-3 text-sm text-ink/70"> -
link-in-text-block serious 1 instance
Links must be distinguishable without relying on color
Example HTML
<a href="tel:+15035550199" class="text-amber hover:underline">(503) 555-0199</a>
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>Pawhaven — Adoption, Veterinary Care & Lifelong Pet Support</title>
<meta name="description" content="Pawhaven is a full-circle pet welfare organization: rescue and adoption, veterinary care, behavior help, pet safety resources, and community events.">
<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:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
cream: '#FBF6ED',
sand: '#F3EADA',
ink: '#21312B',
pine: { DEFAULT: '#175E4C', dark: '#0E4034', soft: '#E2EFE6' },
coral: { DEFAULT: '#E8734A', dark: '#C9552F', soft: '#FBE3D8' },
amber: '#F2A93B'
},
fontFamily: {
display: ['Fraunces', 'serif'],
sans: ['Inter', 'sans-serif']
},
boxShadow: {
soft: '0 18px 45px -18px rgba(33,49,43,.25)',
card: '0 10px 30px -12px rgba(33,49,43,.18)'
}
}
}
}
</script>
<style>
html { scroll-padding-top: 96px; }
body {
background-color: #FBF6ED;
background-image: radial-gradient(rgba(23,94,76,.06) 1px, transparent 1px);
background-size: 26px 26px;
}
::selection { background:#E8734A; color:#fff; }
.font-display { font-family:'Fraunces', serif; }
.blob {
border-radius: 58% 42% 45% 55% / 55% 48% 52% 45%;
}
.blob-2 {
border-radius: 42% 58% 60% 40% / 50% 42% 58% 50%;
}
.eyebrow { letter-spacing:.18em; }
.nav-link { position:relative; }
.nav-link::after {
content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0;
background:#E8734A; transition:width .25s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { width:100%; }
/* Marquee */
.marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
/* Cards */
.pet-card img { transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pet-card:hover img { transform:scale(1.06); }
/* Chips */
.chip { transition:all .2s ease; }
.chip.active { background:#175E4C; color:#FBF6ED; border-color:#175E4C; }
/* FAQ */
.faq-panel { max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-chevron { transition:transform .3s ease; }
/* Name generator pop */
@keyframes popIn { 0%{opacity:0; transform:translateY(14px) scale(.96)} 100%{opacity:1; transform:translateY(0) scale(1)} }
.pop { animation:popIn .5s cubic-bezier(.2,.8,.3,1.2) both; }
/* Floaty hero cards */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.floaty { animation:floaty 5s ease-in-out infinite; }
.floaty-slow { animation:floaty 7s ease-in-out infinite; }
/* Focus */
a:focus-visible, button:focus-visible { outline:3px solid #F2A93B; outline-offset:2px; border-radius:6px; }
/* Header state */
#site-header.scrolled { box-shadow:0 8px 30px -12px rgba(33,49,43,.25); }
@media (prefers-reduced-motion: reduce) {
.marquee-track, .floaty, .floaty-slow { animation:none; }
html { scroll-behavior:auto; }
}
</style>
</head>
<body class="text-ink font-sans antialiased">
<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:bg-pine focus:text-cream focus:px-4 focus:py-2 focus:rounded-lg">Skip to main content</a>
<!-- ============ ANNOUNCEMENT BAR ============ -->
<div class="bg-pine-dark text-cream text-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex flex-wrap items-center justify-center gap-x-6 gap-y-1">
<p class="flex items-center gap-2">
<svg class="w-4 h-4 text-amber" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z"/></svg>
<span><strong class="font-semibold">24/7 Pet Emergency & Poison Line:</strong> <a href="tel:+15035550199" class="underline decoration-amber/70 underline-offset-2 hover:text-amber">(503) 555-0199</a></span>
</p>
<a href="#events" class="hidden sm:inline-flex items-center gap-1.5 text-cream/80 hover:text-amber transition">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
Low-Cost Vaccine Clinic · Wed, Jun 18
</a>
</div>
</div>
<!-- ============ HEADER ============ -->
<header id="site-header" class="sticky top-0 z-50 bg-cream/90 backdrop-blur-md transition-shadow">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Brand -->
<a href="#top" class="flex items-center gap-3 group">
<img src="https://placehold.co/56x56/175E4C/FBF6ED?text=PH&font=lato" alt="Pawhaven logo" width="48" height="48" class="rounded-2xl shadow-card group-hover:rotate-3 transition-transform">
<span class="leading-tight">
<span class="block font-display font-semibold text-2xl tracking-tight">Pawhaven</span>
<span class="hidden sm:block text-[11px] uppercase tracking-[.16em] text-pine font-semibold">Where pets & people thrive together</span>
</span>
</a>
<!-- Desktop nav -->
<nav class="hidden lg:flex items-center gap-7 text-[15px] font-medium" aria-label="Primary">
<a class="nav-link hover:text-pine" href="#adopt">Adopt a Pet</a>
<a class="nav-link hover:text-pine" href="#veterinary">Veterinary</a>
<a class="nav-link hover:text-pine" href="#behavior">Behavior</a>
<a class="nav-link hover:text-pine" href="#safety">Pet Safety</a>
<a class="nav-link hover:text-pine" href="#events">Events</a>
<a class="nav-link hover:text-pine" href="#faq">FAQ</a>
<a href="#donate" class="inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-5 py-2.5 rounded-full shadow-card transition">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7.5-4.7-9.6-9.2C.8 8.2 2.9 4.5 6.4 4.5c2 0 3.6 1.1 4.5 2.7.4.8 1.8.8 2.2 0 .9-1.6 2.5-2.7 4.5-2.7 3.5 0 5.6 3.7 4 7.3C19.5 16.3 12 21 12 21z"/></svg>
Donate
</a>
</nav>
<!-- Mobile toggle -->
<button id="menu-btn" class="lg:hidden inline-flex items-center justify-center w-11 h-11 rounded-xl border border-ink/15 bg-white/60" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu">
<svg id="menu-open-icon" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
<svg id="menu-close-icon" class="w-6 h-6 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="lg:hidden hidden border-t border-ink/10 bg-cream">
<nav class="px-4 py-4 flex flex-col gap-1 text-base font-medium" aria-label="Mobile">
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#adopt">Adopt a Pet</a>
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#veterinary">Veterinary</a>
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#behavior">Behavior & Training</a>
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#safety">Pet Safety</a>
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#names">Name Generator</a>
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#events">Events</a>
<a class="px-3 py-2.5 rounded-lg hover:bg-pine-soft" href="#faq">FAQ</a>
<a href="#donate" class="mt-2 inline-flex items-center justify-center gap-2 bg-coral text-white font-semibold px-5 py-3 rounded-full">Donate</a>
</nav>
</div>
</header>
<main id="main">
<!-- ============ HERO ============ -->
<section id="top" class="relative overflow-hidden">
<div class="absolute -top-24 -right-24 w-[420px] h-[420px] bg-pine-soft blob opacity-70" aria-hidden="true"></div>
<div class="absolute top-64 -left-32 w-[340px] h-[340px] bg-coral-soft blob-2 opacity-70" aria-hidden="true"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-16 lg:pt-20 lg:pb-24 grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
<!-- Copy -->
<div data-reveal>
<p class="eyebrow inline-flex items-center gap-2 text-xs font-bold uppercase text-coral-dark bg-coral-soft px-4 py-2 rounded-full">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 13.5c-2.7 0-5.5 2-5.5 4.4 0 1.5 1.1 2.6 2.7 2.6 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.6 0 2.7-1.1 2.7-2.6 0-2.4-2.8-4.4-5.5-4.4zM6.2 8.4c-1.1-.3-2.4.8-2.7 2.4-.3 1.5.3 2.9 1.4 3.2 1.1.3 2.4-.8 2.7-2.4.3-1.6-.3-3-1.4-3.2zm11.6 0c-1.1.3-1.7 1.7-1.4 3.2.3 1.6 1.6 2.7 2.7 2.4 1.1-.3 1.7-1.7 1.4-3.2-.3-1.6-1.6-2.7-2.7-2.4zM9 4.2c-1.2.2-1.9 1.7-1.6 3.3.3 1.6 1.4 2.7 2.6 2.5 1.2-.2 1.9-1.7 1.6-3.3-.3-1.6-1.4-2.7-2.6-2.5zm6 0c-1.2-.2-2.3.9-2.6 2.5-.3 1.6.4 3.1 1.6 3.3 1.2.2 2.3-.9 2.6-2.5.3-1.6-.4-3.1-1.6-3.3z"/></svg>
Nonprofit rescue, clinic & sanctuary since 2009
</p>
<h1 class="mt-6 font-display font-semibold text-5xl sm:text-6xl xl:text-7xl leading-[1.04] tracking-tight">
Every pet deserves a <em class="text-pine">haven</em>.
</h1>
<p class="mt-6 text-lg text-ink/75 leading-relaxed max-w-xl">
Pawhaven is a full-circle pet welfare organization. We rescue animals in crisis, match them with loving families, and then stay by your side for everything that follows — wellness exams and vaccination schedules, behavior help, training classes, and a 24/7 nurse line for the moments that can't wait.
</p>
<p class="mt-4 text-lg text-ink/75 leading-relaxed max-w-xl">
Whether you're ready to adopt, need a trusted veterinarian, or simply want to be a better pet parent, you'll find your people here.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#adopt" class="inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-7 py-3.5 rounded-full shadow-soft transition text-base">
Find a Pet
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="#veterinary" class="inline-flex items-center gap-2 bg-white/70 hover:bg-white border-2 border-pine text-pine font-semibold px-7 py-3.5 rounded-full transition text-base">
Make Appointment
</a>
</div>
<dl class="mt-10 flex flex-wrap gap-x-8 gap-y-3 text-sm text-ink/70">
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-coral"></span><span><strong class="text-ink font-semibold">12,400+</strong> adoptions</span></div>
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-amber"></span><span><strong class="text-ink font-semibold">96%</strong> live-release rate</span></div>
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-pine"></span><span><strong class="text-ink font-semibold">AAHA-aligned</strong> clinic care</span></div>
</dl>
</div>
<!-- Visual -->
<div class="relative" data-reveal>
<div class="blob overflow-hidden shadow-soft ring-8 ring-white/60">
<img src="https://picsum.photos/id/237/1000/1150" alt="A rescued black puppy looking up at the camera, waiting for adoption" width="1000" height="1150" class="w-full h-[420px] sm:h-[520px] lg:h-[600px] object-cover" fetchpriority="high">
</div>
<!-- Floating cards -->
<div class="floaty absolute -left-3 sm:-left-8 top-10 bg-white rounded-2xl shadow-soft px-5 py-4 flex items-center gap-3">
<span class="w-10 h-10 rounded-xl bg-pine-soft text-pine flex items-center justify-center">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7.5-4.7-9.6-9.2C.8 8.2 2.9 4.5 6.4 4.5c2 0 3.6 1.1 4.5 2.7.4.8 1.8.8 2.2 0 .9-1.6 2.5-2.7 4.5-2.7 3.5 0 5.6 3.7 4 7.3C19.5 16.3 12 21 12 21z"/></svg>
</span>
<div>
<p class="text-2xl font-display font-semibold leading-none">87</p>
<p class="text-xs text-ink/60 mt-1">pets adopted this month</p>
</div>
</div>
<div class="floaty-slow absolute -right-2 sm:-right-6 bottom-12 bg-pine-dark text-cream rounded-2xl shadow-soft px-5 py-4">
<p class="text-xs uppercase tracking-widest text-amber font-bold">Next vaccine clinic</p>
<p class="font-display text-lg mt-1">Wed, Jun 18 · 9am–1pm</p>
<a href="#events" class="text-sm underline underline-offset-4 decoration-amber hover:text-amber">Reserve a spot</a>
</div>
</div>
</div>
<!-- Marquee ribbon -->
<div class="marquee-wrap bg-pine text-cream py-3.5 overflow-hidden" aria-hidden="true">
<div class="marquee-track gap-0 text-sm font-semibold uppercase tracking-[.2em]">
<span class="flex items-center gap-8 pr-8">
<span>Adopt</span><span class="text-amber">✦</span><span>Foster</span><span class="text-amber">✦</span><span>Donate</span><span class="text-amber">✦</span><span>Volunteer</span><span class="text-amber">✦</span><span>Wellness Exams</span><span class="text-amber">✦</span><span>Vaccinations</span><span class="text-amber">✦</span><span>Force-Free Training</span><span class="text-amber">✦</span><span>24/7 Nurse Line</span><span class="text-amber">✦</span>
</span>
<span class="flex items-center gap-8 pr-8">
<span>Adopt</span><span class="text-amber">✦</span><span>Foster</span><span class="text-amber">✦</span><span>Donate</span><span class="text-amber">✦</span><span>Volunteer</span><span class="text-amber">✦</span><span>Wellness Exams</span><span class="text-amber">✦</span><span>Vaccinations</span><span class="text-amber">✦</span><span>Force-Free Training</span><span class="text-amber">✦</span><span>24/7 Nurse Line</span><span class="text-amber">✦</span>
</span>
</div>
</div>
</section>
<!-- ============ STATS ============ -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6" data-reveal>
<div class="bg-white rounded-3xl p-7 shadow-card text-center">
<p class="font-display text-4xl sm:text-5xl font-semibold text-pine"><span data-count="12400">0</span>+</p>
<p class="mt-2 text-sm text-ink/60 font-medium">Successful adoptions since 2009</p>
</div>
<div class="bg-white rounded-3xl p-7 shadow-card text-center">
<p class="font-display text-4xl sm:text-5xl font-semibold text-pine"><span data-count="38">0</span></p>
<p class="mt-2 text-sm text-ink/60 font-medium">Partner clinics & ER hospitals</p>
</div>
<div class="bg-white rounded-3xl p-7 shadow-card text-center">
<p class="font-display text-4xl sm:text-5xl font-semibold text-pine"><span data-count="96">0</span>%</p>
<p class="mt-2 text-sm text-ink/60 font-medium">Live-release rate, 11 years running</p>
</div>
<div class="bg-white rounded-3xl p-7 shadow-card text-center">
<p class="font-display text-4xl sm:text-5xl font-semibold text-pine">24/7</p>
<p class="mt-2 text-sm text-ink/60 font-medium">Registered-vet-nurse advice line</p>
</div>
</div>
</section>
<!-- ============ ADOPT ============ -->
<section id="adopt" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 scroll-mt-28">
<div class="grid lg:grid-cols-12 gap-10">
<div class="lg:col-span-4" data-reveal>
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">Adopt a Pet</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Meet your new <em class="text-pine">best friend</em></h2>
<p class="mt-5 text-ink/75 leading-relaxed">
Every animal below has been fully vetted by our medical team: spayed or neutered, microchipped, up to date on age-appropriate vaccinations, and cleared by a complete wellness exam. Just as importantly, each one has been behaviorally assessed by our certified trainers, so we can tell you honestly who loves cats, who needs a fenced yard, and who will try to share your pillow.
</p>
<p class="mt-4 text-ink/75 leading-relaxed">
Adoption isn't a transaction here — it's a matchmaking process. Our counselors get to know your household, your schedule, and your experience level before suggesting animals. Every adoption includes a two-week trial period, a free post-adoption wellness exam, and lifetime behavior support. If it ever doesn't work out, our doors are always open; a Pawhaven animal always has a haven.
</p>
<ol class="mt-7 space-y-4">
<li class="flex gap-4">
<span class="shrink-0 w-9 h-9 rounded-full bg-pine text-cream font-display font-semibold flex items-center justify-center">1</span>
<p class="text-sm text-ink/75 pt-1.5"><strong class="text-ink">Browse & apply.</strong> Fall in love below, then fill out a five-minute adoption application.</p>
</li>
<li class="flex gap-4">
<span class="shrink-0 w-9 h-9 rounded-full bg-pine text-cream font-display font-semibold flex items-center justify-center">2</span>
<p class="text-sm text-ink/75 pt-1.5"><strong class="text-ink">Meet & greet.</strong> Spend unhurried time together — bring the whole household, resident dogs included.</p>
</li>
<li class="flex gap-4">
<span class="shrink-0 w-9 h-9 rounded-full bg-pine text-cream font-display font-semibold flex items-center justify-center">3</span>
<p class="text-sm text-ink/75 pt-1.5"><strong class="text-ink">Go home supported.</strong> Food starter kit, medical records, and a trainer on call for the first month.</p>
</li>
</ol>
<a href="#donate" class="mt-8 inline-flex items-center gap-2 text-pine font-semibold underline underline-offset-4 decoration-coral hover:text-coral-dark">
Can't adopt? Sponsor a pet's care instead
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
</div>
<div class="lg:col-span-8">
<!-- Filters -->
<div class="flex flex-wrap gap-2 mb-7" role="group" aria-label="Filter pets by type" data-reveal>
<button class="chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold" data-filter="all">All Pets</button>
<button class="chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold" data-filter="dog">Dogs</button>
<button class="chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold" data-filter="cat">Cats</button>
<button class="chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold" data-filter="other">Sanctuary & Wildlife</button>
</div>
<div id="pet-grid" class="grid sm:grid-cols-2 xl:grid-cols-3 gap-6">
<!-- Card: Milo -->
<article class="pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col" data-species="dog" data-reveal>
<div class="relative overflow-hidden rounded-2xl">
<img src="https://picsum.photos/id/1025/600/700" alt="Milo, a fawn pug wrapped cozily in a blanket" width="600" height="700" loading="lazy" class="w-full h-56 object-cover">
<span class="absolute top-3 left-3 bg-cream/95 text-pine text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full">Dog</span>
</div>
<div class="pt-4 px-1 pb-1 flex flex-col grow">
<div class="flex items-baseline justify-between">
<h3 class="font-display text-2xl font-semibold">Milo</h3>
<span class="text-xs font-semibold text-ink/50">Pug · 4 yrs · M</span>
</div>
<p class="mt-2 text-sm text-ink/70 leading-relaxed">A professional couch companion who snores like a tiny freight train. Great with kids, cats, and anyone holding cheese.</p>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Good with kids</span>
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Apartment OK</span>
</div>
<a href="#faq" class="mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">Meet Milo</a>
</div>
</article>
<!-- Card: Junie -->
<article class="pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col" data-species="dog" data-reveal>
<div class="relative overflow-hidden rounded-2xl">
<img src="https://picsum.photos/id/659/600/700" alt="Junie, a young husky mix with bright eyes" width="600" height="700" loading="lazy" class="w-full h-56 object-cover">
<span class="absolute top-3 left-3 bg-cream/95 text-pine text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full">Dog</span>
</div>
<div class="pt-4 px-1 pb-1 flex flex-col grow">
<div class="flex items-baseline justify-between">
<h3 class="font-display text-2xl font-semibold">Junie</h3>
<span class="text-xs font-semibold text-ink/50">Husky Mix · 1 yr · F</span>
</div>
<p class="mt-2 text-sm text-ink/70 leading-relaxed">A bouncy, brilliant athlete looking for a hiking buddy. She's mastered "sit" and is working very hard on "not singing at 6 a.m."</p>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Active home</span>
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Needs yard</span>
</div>
<a href="#faq" class="mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">Meet Junie</a>
</div>
</article>
<!-- Card: Clementine -->
<article class="pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col" data-species="cat" data-reveal>
<div class="relative overflow-hidden rounded-2xl">
<img src="https://picsum.photos/id/40/600/700" alt="Clementine, a close-up of a curious cat's nose and whiskers" width="600" height="700" loading="lazy" class="w-full h-56 object-cover">
<span class="absolute top-3 left-3 bg-cream/95 text-pine text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full">Cat</span>
</div>
<div class="pt-4 px-1 pb-1 flex flex-col grow">
<div class="flex items-baseline justify-between">
<h3 class="font-display text-2xl font-semibold">Clementine</h3>
<span class="text-xs font-semibold text-ink/50">Domestic Shorthair · 3 yrs · F</span>
</div>
<p class="mt-2 text-sm text-ink/70 leading-relaxed">A dignified lap-warmer who inspects every grocery bag that enters the house. Purrs on contact; tolerates being wrong never.</p>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Calm home</span>
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Solo pet preferred</span>
</div>
<a href="#faq" class="mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">Meet Clementine</a>
</div>
</article>
<!-- Card: Waffles -->
<article class="pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col" data-species="cat" data-reveal>
<div class="relative overflow-hidden rounded-2xl">
<img src="https://picsum.photos/id/219/600/700" alt="Waffles, a young tabby kitten mid-adventure" width="600" height="700" loading="lazy" class="w-full h-56 object-cover">
<span class="absolute top-3 left-3 bg-cream/95 text-pine text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full">Cat</span>
</div>
<div class="pt-4 px-1 pb-1 flex flex-col grow">
<div class="flex items-baseline justify-between">
<h3 class="font-display text-2xl font-semibold">Waffles</h3>
<span class="text-xs font-semibold text-ink/50">Tabby · 6 mos · M</span>
</div>
<p class="mt-2 text-sm text-ink/70 leading-relaxed">Six months old and already a career criminal — crimes include sock theft and unauthorized countertop exploration. Endlessly entertaining.</p>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Playful</span>
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Loves other cats</span>
</div>
<a href="#faq" class="mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">Meet Waffles</a>
</div>
</article>
<!-- Card: Buttercup -->
<article class="pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col" data-species="other" data-reveal>
<div class="relative overflow-hidden rounded-2xl">
<img src="https://picsum.photos/id/200/600/700" alt="Buttercup, a gentle highland cow at the Pawhaven sanctuary" width="600" height="700" loading="lazy" class="w-full h-56 object-cover">
<span class="absolute top-3 left-3 bg-amber text-ink text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full">Sanctuary</span>
</div>
<div class="pt-4 px-1 pb-1 flex flex-col grow">
<div class="flex items-baseline justify-between">
<h3 class="font-display text-2xl font-semibold">Buttercup</h3>
<span class="text-xs font-semibold text-ink/50">Highland Cow · 7 yrs · F</span>
</div>
<p class="mt-2 text-sm text-ink/70 leading-relaxed">Rescued from a neglected hobby farm, Buttercup now lives permanently at our sanctuary. She isn't adoptable — but she is sponsorable, and she loves visitors with apples.</p>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="text-[11px] font-semibold bg-coral-soft text-coral-dark px-2.5 py-1 rounded-full">Sponsor me</span>
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Sanctuary resident</span>
</div>
<a href="#donate" class="mt-4 inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-full transition">Sponsor Buttercup</a>
</div>
</article>
<!-- Card: Sequoia -->
<article class="pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col" data-species="other" data-reveal>
<div class="relative overflow-hidden rounded-2xl">
<img src="https://picsum.photos/id/433/600/700" alt="Sequoia, a black bear in the care of Pawhaven's wildlife rehabilitation program" width="600" height="700" loading="lazy" class="w-full h-56 object-cover">
<span class="absolute top-3 left-3 bg-amber text-ink text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full">Wildlife Rehab</span>
</div>
<div class="pt-4 px-1 pb-1 flex flex-col grow">
<div class="flex items-baseline justify-between">
<h3 class="font-display text-2xl font-semibold">Sequoia</h3>
<span class="text-xs font-semibold text-ink/50">Black Bear · 2 yrs · M</span>
</div>
<p class="mt-2 text-sm text-ink/70 leading-relaxed">Orphaned as a cub, Sequoia is being raised by our licensed wildlife team with minimal human contact so he can return to the wild next spring. Symbolic adoptions fund his fish budget.</p>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="text-[11px] font-semibold bg-coral-soft text-coral-dark px-2.5 py-1 rounded-full">Symbolic adoption</span>
<span class="text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full">Release 2026</span>
</div>
<a href="#donate" class="mt-4 inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-full transition">Adopt Symbolically</a>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ============ VETERINARY ============ -->
<section id="veterinary" class="bg-pine-soft/60 py-16 lg:py-24 scroll-mt-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1" data-reveal>
<div class="blob-2 overflow-hidden shadow-soft ring-8 ring-white/70">
<img src="https://picsum.photos/id/237/900/700" alt="A dog receiving a gentle wellness exam at the Pawhaven clinic" width="900" height="700" loading="lazy" class="w-full h-[380px] sm:h-[460px] object-cover">
</div>
<div class="mt-6 bg-white rounded-2xl shadow-card p-6">
<h3 class="font-display text-xl font-semibold flex items-center gap-2">
<svg class="w-5 h-5 text-coral" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 8v5l3 2"/><circle cx="12" cy="12" r="9"/></svg>
Puppy & Kitten Vaccination Schedule
</h3>
<div class="mt-4 overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-left text-xs uppercase tracking-wider text-ink/50 border-b border-ink/10">
<th class="py-2 pr-3 font-semibold">Age</th>
<th class="py-2 pr-3 font-semibold">Dogs</th>
<th class="py-2 font-semibold">Cats</th>
</tr>
</thead>
<tbody class="text-ink/75">
<tr class="border-b border-ink/5"><td class="py-2.5 pr-3 font-semibold text-ink">6–8 wks</td><td class="py-2.5 pr-3">DHPP, deworming</td><td class="py-2.5">FVRCP, deworming</td></tr>
<tr class="border-b border-ink/5"><td class="py-2.5 pr-3 font-semibold text-ink">10–12 wks</td><td class="py-2.5 pr-3">DHPP booster, Bordetella</td><td class="py-2.5">FVRCP booster, FeLV</td></tr>
<tr class="border-b border-ink/5"><td class="py-2.5 pr-3 font-semibold text-ink">14–16 wks</td><td class="py-2.5 pr-3">Rabies, final DHPP</td><td class="py-2.5">Rabies, final FVRCP</td></tr>
<tr><td class="py-2.5 pr-3 font-semibold text-ink">Annual</td><td class="py-2.5 pr-3">Wellness exam, rabies, lifestyle vaccines</td><td class="py-2.5">Wellness exam, rabies, FVRCP booster</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="order-1 lg:order-2" data-reveal>
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">Veterinary Care</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Medicine that treats the <em class="text-pine">whole</em> animal</h2>
<p class="mt-5 text-ink/75 leading-relaxed">
Our nonprofit clinic practices fear-free, AAHA-aligned medicine, and every dollar of profit flows straight back into the rescue program. A routine wellness exam here isn't a five-minute glance — it's a nose-to-tail assessment of teeth, skin, heart, joints, weight, and behavior, plus honest conversation about nutrition and prevention. We'd rather keep your pet healthy than see them sick.
</p>
<p class="mt-4 text-ink/75 leading-relaxed">
Because Pawhaven serves both the public and our own rescued animals, our veterinarians see everything from kitten sniffles to complex shelter medicine — experience that makes them exceptionally good at calm, practical problem-solving. Sliding-scale pricing and payment plans mean cost is never the reason a pet goes without care.
</p>
<ul class="mt-7 grid sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
<li class="flex items-start gap-2.5"><svg class="w-5 h-5 mt-0.5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg><span><strong>Wellness exams</strong> & preventive care plans</span></li>
<li class="flex items-start gap-2.5"><svg class="w-5 h-5 mt-0.5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg><span>Full <strong>vaccination schedule</strong> management</span></li>
<li class="flex items-start gap-2.5"><svg class="w-5 h-5 mt-0.5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg><span><strong>Spay & neuter</strong> surgery suite</span></li>
<li class="flex items-start gap-2.5"><svg class="w-5 h-5 mt-0.5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg><span>Dental cleanings & digital X-ray</span></li>
<li class="flex items-start gap-2.5"><svg class="w-5 h-5 mt-0.5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg><span>Senior pet & chronic-condition care</span></li>
<li class="flex items-start gap-2.5"><svg class="w-5 h-5 mt-0.5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg><span>Same-day <strong>urgent care</strong> slots, 7 days a week</span></li>
</ul>
<div class="mt-8 flex flex-wrap gap-4">
<a href="tel:+15035550147" class="inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-7 py-3.5 rounded-full shadow-soft transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z"/></svg>
Make Appointment
</a>
<a href="#faq" class="inline-flex items-center gap-2 text-pine font-semibold underline underline-offset-4 decoration-coral hover:text-coral-dark py-3">New patient? Read our FAQ</a>
</div>
</div>
</div>
</section>
<!-- ============ BEHAVIOR ============ -->
<section id="behavior" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 scroll-mt-28">
<div class="max-w-3xl" data-reveal>
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">Behavior Help & Training</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Struggling? You're not a bad owner. <em class="text-pine">You need a plan.</em></h2>
<p class="mt-5 text-ink/75 leading-relaxed">
Behavior problems are the number-one reason pets are surrendered to shelters — and the vast majority are fixable. Our certified force-free trainers (CPDT-KA and IAABC-credentialed) never use fear, pain, or intimidation. Instead, we figure out what your pet is trying to tell you, change the environment, and teach new skills with positive reinforcement that actually sticks.
</p>
<p class="mt-4 text-ink/75 leading-relaxed">
Adopters get lifetime support at no cost; the public can book single sessions, six-week classes, or virtual consults. Nobody is judged here. If your dog barks at skateboards or your cat has opinions about the litter box, we've seen it — this week, probably.
</p>
</div>
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-3xl p-7 shadow-card hover:-translate-y-1.5 transition-transform" data-reveal>
<span class="w-12 h-12 rounded-2xl bg-coral-soft text-coral-dark flex items-center justify-center">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l9-8 9 8M5 10v10h14V10"/></svg>
</span>
<h3 class="mt-5 font-display text-xl font-semibold">Separation Anxiety</h3>
<p class="mt-2.5 text-sm text-ink/70 leading-relaxed">Destructive chewing, howling, and door-scratching when you leave. We build gradual alone-time plans that keep your dog under their panic threshold.</p>
</div>
<div class="bg-white rounded-3xl p-7 shadow-card hover:-translate-y-1.5 transition-transform" data-reveal>
<span class="w-12 h-12 rounded-2xl bg-pine-soft text-pine flex items-center justify-center">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="6" r="3"/><path d="M12 9v6m0 0l-4 6m4-6l4 6"/></svg>
</span>
<h3 class="mt-5 font-display text-xl font-semibold">Leash Reactivity</h3>
<p class="mt-2.5 text-sm text-ink/70 leading-relaxed">Lunging and barking at dogs, bikes, or squirrels on walks. Counter-conditioning protocols turn meltdowns into manageable moments.</p>
</div>
<div class="bg-white rounded-3xl p-7 shadow-card hover:-translate-y-1.5 transition-transform" data-reveal>
<span class="w-12 h-12 rounded-2xl bg-amber/25 text-amber flex items-center justify-center">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16M6 16h12l-1.5-9h-9L6 16zM9 7V5m6 2V5"/></svg>
</span>
<h3 class="mt-5 font-display text-xl font-semibold">Litter Box Troubles</h3>
<p class="mt-2.5 text-sm text-ink/70 leading-relaxed">First we rule out medical causes with our clinic, then fix the setup — box style, litter type, placement, and multi-cat politics.</p>
</div>
<div class="bg-white rounded-3xl p-7 shadow-card hover:-translate-y-1.5 transition-transform" data-reveal>
<span class="w-12 h-12 rounded-2xl bg-coral-soft text-coral-dark flex items-center justify-center">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M12 13.5c-2.7 0-5.5 2-5.5 4.4 0 1.5 1.1 2.6 2.7 2.6 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.6 0 2.7-1.1 2.7-2.6 0-2.4-2.8-4.4-5.5-4.4zM6.2 8.4c-1.1-.3-2.4.8-2.7 2.4-.3 1.5.3 2.9 1.4 3.2 1.1.3 2.4-.8 2.7-2.4.3-1.6-.3-3-1.4-3.2zm11.6 0c-1.1.3-1.7 1.7-1.4 3.2.3 1.6 1.6 2.7 2.7 2.4 1.1-.3 1.7-1.7 1.4-3.2-.3-1.6-1.6-2.7-2.7-2.4zM9 4.2c-1.2.2-1.9 1.7-1.6 3.3.3 1.6 1.4 2.7 2.6 2.5 1.2-.2 1.9-1.7 1.6-3.3-.3-1.6-1.4-2.7-2.6-2.5zm6 0c-1.2-.2-2.3.9-2.6 2.5-.3 1.6.4 3.1 1.6 3.3 1.2.2 2.3-.9 2.6-2.5.3-1.6-.4-3.1-1.6-3.3z"/></svg>
</span>
<h3 class="mt-5 font-display text-xl font-semibold">Puppy & Kitten Foundations</h3>
<p class="mt-2.5 text-sm text-ink/70 leading-relaxed">Socialization windows close fast. Our six-week starter classes cover bite inhibition, handling, recall, and confident independence.</p>
</div>
</div>
<div class="mt-10 flex flex-wrap items-center gap-5" data-reveal>
<a href="#events" class="inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-7 py-3.5 rounded-full shadow-soft transition">Get Behavior Help</a>
<p class="text-sm text-ink/60">Free 15-minute triage call for adopters · Public consults from $45</p>
</div>
</section>
<!-- ============ SAFETY / EMERGENCY ============ -->
<section id="safety" class="bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12">
<div data-reveal>
<p class="eyebrow text-xs font-bold uppercase text-amber">Pet Safety & Emergency Info</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Know the risks <em class="text-amber">before</em> they happen</h2>
<p class="mt-5 text-cream/80 leading-relaxed">
Most pet emergencies we treat were preventable. The average home contains a dozen common toxins, and the average owner doesn't know half of them. Take five minutes to learn the big offenders, pet-proof one room at a time, and save our emergency number in your phone right now — future you, at 2 a.m., will be grateful.
</p>
<h3 class="mt-8 font-display text-xl font-semibold text-amber">Common household toxins</h3>
<ul class="mt-4 flex flex-wrap gap-2" aria-label="Common pet toxins">
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Chocolate</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Xylitol (sugar-free gum)</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Grapes & raisins</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Lilies (deadly to cats)</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Onions & garlic</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Human pain relievers</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Rodent bait</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Sago palm</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Antifreeze</li>
<li class="bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full">Essential oil diffusers</li>
</ul>
<p class="mt-6 text-cream/70 text-sm leading-relaxed">
Seasonal reminders: never leave pets in parked cars (interior temps can hit 120°F in minutes), check paws on hot pavement, keep fireworks-week pets indoors with ID tags current, and microchip — a chipped lost pet is more than twice as likely to make it home.
</p>
<a href="#faq" class="mt-8 inline-flex items-center gap-2 border-2 border-amber text-amber hover:bg-amber hover:text-ink font-semibold px-7 py-3.5 rounded-full transition">Save Our Emergency Guide</a>
</div>
<div data-reveal>
<div class="bg-cream text-ink rounded-3xl shadow-soft p-8 lg:p-10 h-full flex flex-col">
<div class="flex items-center gap-3">
<span class="w-12 h-12 rounded-2xl bg-coral text-white flex items-center justify-center">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 9v4m0 4h.01M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z"/></svg>
</span>
<h3 class="font-display text-2xl font-semibold">In an emergency, do this</h3>
</div>
<ol class="mt-6 space-y-5 grow">
<li class="flex gap-4">
<span class="shrink-0 w-8 h-8 rounded-full bg-coral text-white font-display font-semibold flex items-center justify-center text-sm">1</span>
<p class="text-sm text-ink/80 pt-1"><strong class="text-ink">Stay calm and move your pet away from danger.</strong> Injured animals may bite — use a towel as a sling, never a muzzle on a vomiting pet.</p>
</li>
<li class="flex gap-4">
<span class="shrink-0 w-8 h-8 rounded-full bg-coral text-white font-display font-semibold flex items-center justify-center text-sm">2</span>
<p class="text-sm text-ink/80 pt-1"><strong class="text-ink">Call before you drive.</strong> Our nurse line will tell you whether it's a true emergency, start first-aid guidance, and alert the nearest partner ER so they're ready for you.</p>
</li>
<li class="flex gap-4">
<span class="shrink-0 w-8 h-8 rounded-full bg-coral text-white font-display font-semibold flex items-center justify-center text-sm">3</span>
<p class="text-sm text-ink/80 pt-1"><strong class="text-ink">Bring the evidence.</strong> Packaging from anything ingested, a photo of the plant, or a sample of the vomit can save critical minutes of diagnosis.</p>
</li>
<li class="flex gap-4">
<span class="shrink-0 w-8 h-8 rounded-full bg-coral text-white font-display font-semibold flex items-center justify-center text-sm">4</span>
<p class="text-sm text-ink/80 pt-1"><strong class="text-ink">Never induce vomiting or give human medication</strong> unless a veterinarian explicitly tells you to. Well-meaning remedies cause real harm.</p>
</li>
</ol>
<a href="tel:+15035550199" class="mt-8 flex items-center justify-center gap-3 bg-coral hover:bg-coral-dark text-white font-bold text-lg px-6 py-4 rounded-2xl transition shadow-soft">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z"/></svg>
24/7 Nurse Line: (503) 555-0199
</a>
<p class="mt-3 text-center text-xs text-ink/50">Free for everyone, adopter or not. Se habla español.</p>
</div>
</div>
</div>
</section>
<!-- ============ NAME GENERATOR (INTERACTIVE) ============ -->
<section id="names" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 scroll-mt-28">
<div class="bg-white rounded-[2.5rem] shadow-soft overflow-hidden grid lg:grid-cols-2" data-reveal>
<div class="p-8 sm:p-12">
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">Interactive · Just for fun</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">The Perfect <em class="text-pine">Name</em> Generator</h2>
<p class="mt-5 text-ink/75 leading-relaxed">
Naming a rescue is a sacred art. Tell us a little about your new companion and our trainer-approved generator will suggest names with real personality — along with the story behind each one. Generate as many rounds as you like; nobody's judging how long this takes you.
</p>
<div class="mt-8">
<p class="text-xs font-bold uppercase tracking-widest text-ink/50 mb-2.5">Who are we naming?</p>
<div class="flex flex-wrap gap-2" role="group" aria-label="Choose species">
<button class="gen-chip chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="species" data-value="dog">A Dog</button>
<button class="gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="species" data-value="cat">A Cat</button>
<button class="gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="species" data-value="any">Surprise Me</button>
</div>
</div>
<div class="mt-6">
<p class="text-xs font-bold uppercase tracking-widest text-ink/50 mb-2.5">What's their vibe?</p>
<div class="flex flex-wrap gap-2" role="group" aria-label="Choose personality">
<button class="gen-chip chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="vibe" data-value="regal">Regal</button>
<button class="gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="vibe" data-value="silly">Silly</button>
<button class="gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="vibe" data-value="cozy">Cozy</button>
<button class="gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold" data-group="vibe" data-value="wild">Adventurous</button>
</div>
</div>
<button id="generate-btn" class="mt-8 inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-8 py-4 rounded-full shadow-soft transition text-base">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-2.6-6.4M21 4v5h-5"/></svg>
Generate Names
</button>
</div>
<div class="bg-pine-soft/70 p-8 sm:p-12 flex flex-col justify-center">
<p class="text-xs font-bold uppercase tracking-widest text-pine mb-4">Your suggestions</p>
<div id="name-results" class="space-y-4" aria-live="polite">
<div class="bg-white rounded-2xl p-6 shadow-card pop" style="animation-delay:.0s">
<p class="font-display text-2xl font-semibold text-pine">Barnaby</p>
<p class="mt-1 text-sm text-ink/65">"Son of consolation" — a name for a steadfast, soulful companion.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-card pop" style="animation-delay:.08s">
<p class="font-display text-2xl font-semibold text-pine">Duchess</p>
<p class="mt-1 text-sm text-ink/65">For the pup who runs the household with quiet, regal authority.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-card pop" style="animation-delay:.16s">
<p class="font-display text-2xl font-semibold text-pine">Winston</p>
<p class="mt-1 text-sm text-ink/65">Resolute, brave, and unmistakably distinguished at the dog park.</p>
</div>
</div>
<p class="mt-6 text-xs text-pine/70">Tip: live with a name for three days before committing. If the pet answers to it, it's theirs.</p>
</div>
</div>
</section>
<!-- ============ EVENTS ============ -->
<section id="events" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 lg:pb-24 scroll-mt-28">
<div class="flex flex-wrap items-end justify-between gap-6 mb-10" data-reveal>
<div class="max-w-2xl">
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">Events</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Come say hi <em class="text-pine">in person</em></h2>
<p class="mt-4 text-ink/75 leading-relaxed">From adoption fairs to low-cost clinics, our calendar is the heartbeat of the rescue. All events are family-friendly, and leashed, vaccinated pets are welcome unless noted.</p>
</div>
<a href="#donate" class="inline-flex items-center gap-2 border-2 border-pine text-pine hover:bg-pine hover:text-cream font-semibold px-6 py-3 rounded-full transition">Host a Fundraiser</a>
</div>
<div class="grid md:grid-cols-3 gap-6">
<article class="bg-white rounded-3xl shadow-card overflow-hidden flex flex-col hover:-translate-y-1.5 transition-transform" data-reveal>
<div class="relative">
<img src="https://picsum.photos/id/237/640/360" alt="Dogs and families gathering at a park adoption fair" width="640" height="360" loading="lazy" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 bg-cream rounded-2xl px-4 py-2 text-center shadow-card">
<p class="text-xs font-bold uppercase text-coral-dark">Jun</p>
<p class="font-display text-2xl font-semibold leading-none">14</p>
</div>
</div>
<div class="p-6 flex flex-col grow">
<h3 class="font-display text-xl font-semibold">Paws in the Park Adoption Fair</h3>
<p class="mt-1 text-xs font-semibold text-ink/50 uppercase tracking-wider">Sat · 10am–3pm · Meadowbrook Park</p>
<p class="mt-3 text-sm text-ink/70 leading-relaxed grow">Forty adoptable dogs and cats, food trucks, a kid's "junior vet" tent, and same-day adoptions with waived fees for senior pets.</p>
<a href="#donate" class="mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">RSVP Free</a>
</div>
</article>
<article class="bg-white rounded-3xl shadow-card overflow-hidden flex flex-col hover:-translate-y-1.5 transition-transform" data-reveal>
<div class="relative">
<img src="https://picsum.photos/id/1025/640/360" alt="A pug waiting patiently at a low-cost vaccination clinic" width="640" height="360" loading="lazy" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 bg-cream rounded-2xl px-4 py-2 text-center shadow-card">
<p class="text-xs font-bold uppercase text-coral-dark">Jun</p>
<p class="font-display text-2xl font-semibold leading-none">18</p>
</div>
</div>
<div class="p-6 flex flex-col grow">
<h3 class="font-display text-xl font-semibold">Low-Cost Vaccine & Microchip Clinic</h3>
<p class="mt-1 text-xs font-semibold text-ink/50 uppercase tracking-wider">Wed · 9am–1pm · Pawhaven Clinic</p>
<p class="mt-3 text-sm text-ink/70 leading-relaxed grow">Rabies, DHPP, and FVRCP for $15 each; microchips $10 including lifetime registration. No appointment needed — first come, first served.</p>
<a href="#veterinary" class="mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">Reserve a Spot</a>
</div>
</article>
<article class="bg-white rounded-3xl shadow-card overflow-hidden flex flex-col hover:-translate-y-1.5 transition-transform" data-reveal>
<div class="relative">
<img src="https://picsum.photos/id/40/640/360" alt="A curious kitten at a socialization hour" width="640" height="360" loading="lazy" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 bg-cream rounded-2xl px-4 py-2 text-center shadow-card">
<p class="text-xs font-bold uppercase text-coral-dark">Jun</p>
<p class="font-display text-2xl font-semibold leading-none">22</p>
</div>
</div>
<div class="p-6 flex flex-col grow">
<h3 class="font-display text-xl font-semibold">Puppy & Kitten Social Hour</h3>
<p class="mt-1 text-xs font-semibold text-ink/50 uppercase tracking-wider">Sun · 11am–12:30pm · Training Barn</p>
<p class="mt-3 text-sm text-ink/70 leading-relaxed grow">Supervised, trainer-led socialization for pets under six months. Proof of first vaccinations required. The cutest hour of your week, guaranteed.</p>
<a href="#behavior" class="mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition">RSVP Free</a>
</div>
</article>
</div>
</section>
<!-- ============ TESTIMONIALS ============ -->
<section id="stories" class="bg-sand/70 py-16 lg:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto" data-reveal>
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">Adoption Success Stories</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Happy tails, <em class="text-pine">told by their humans</em></h2>
</div>
<div class="mt-12 grid md:grid-cols-3 gap-6">
<figure class="bg-white rounded-3xl p-8 shadow-card flex flex-col" data-reveal>
<svg class="w-8 h-8 text-coral/40" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8v6a4 4 0 01-4 4H5v-2h1a2 2 0 002-2H5V8h5zm9 0v6a4 4 0 01-4 4h-1v-2h1a2 2 0 002-2h-3V8h5z"/></svg>
<blockquote class="mt-4 text-ink/80 leading-relaxed grow">"We walked in 'just to look' and walked out with Luna, a terrified senior beagle. Pawhaven's counselors called us weekly for a month, and their trainer helped her learn that the world is safe. Two years later she sleeps on her back with all four paws in the air. Best decision we ever made."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<img src="https://i.pravatar.cc/96?u=pawhaven-rachel" alt="Portrait of Rachel T." width="48" height="48" loading="lazy" class="w-12 h-12 rounded-full ring-2 ring-coral/40">
<div>
<p class="font-semibold text-sm">Rachel T.</p>
<p class="text-xs text-ink/50">Adopted Luna, 2023</p>
</div>
</figcaption>
</figure>
<figure class="bg-white rounded-3xl p-8 shadow-card flex flex-col" data-reveal>
<svg class="w-8 h-8 text-coral/40" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8v6a4 4 0 01-4 4H5v-2h1a2 2 0 002-2H5V8h5zm9 0v6a4 4 0 01-4 4h-1v-2h1a2 2 0 002-2h-3V8h5z"/></svg>
<blockquote class="mt-4 text-ink/80 leading-relaxed grow">"At a routine wellness exam, Dr. Okafor caught a heart murmur in our cat that two other clinics had missed. Because we caught it early, it's managed with cheap daily medication instead of an emergency. The sliding-scale pricing meant we could afford the follow-ups. These people genuinely care."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<img src="https://i.pravatar.cc/96?u=pawhaven-marcus" alt="Portrait of Marcus D." width="48" height="48" loading="lazy" class="w-12 h-12 rounded-full ring-2 ring-coral/40">
<div>
<p class="font-semibold text-sm">Marcus D.</p>
<p class="text-xs text-ink/50">Clinic client since 2021</p>
</div>
</figcaption>
</figure>
<figure class="bg-white rounded-3xl p-8 shadow-card flex flex-col" data-reveal>
<svg class="w-8 h-8 text-coral/40" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8v6a4 4 0 01-4 4H5v-2h1a2 2 0 002-2H5V8h5zm9 0v6a4 4 0 01-4 4h-1v-2h1a2 2 0 002-2h-3V8h5z"/></svg>
<blockquote class="mt-4 text-ink/80 leading-relaxed grow">"Our rescue dog went from hiding under the bed for a week to greeting guests at the door. The force-free behavior program never once made us feel judged — just equipped. When we hit a regression at month three, our trainer answered on a Sunday. That's not customer service; that's family."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<img src="https://i.pravatar.cc/96?u=pawhaven-priya" alt="Portrait of Priya S." width="48" height="48" loading="lazy" class="w-12 h-12 rounded-full ring-2 ring-coral/40">
<div>
<p class="font-semibold text-sm">Priya S.</p>
<p class="text-xs text-ink/50">Adopted Biscuit, 2024</p>
</div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section id="faq" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 scroll-mt-28">
<div class="text-center" data-reveal>
<p class="eyebrow text-xs font-bold uppercase text-coral-dark">FAQ</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Good questions, <em class="text-pine">honest answers</em></h2>
</div>
<div class="mt-10 space-y-4" data-reveal>
<div class="faq-item bg-white rounded-2xl shadow-card overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-7 py-5 font-semibold" aria-expanded="false">
<span>How does the adoption process work?</span>
<svg class="faq-chevron w-5 h-5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="faq-panel px-7">
<p class="pb-6 text-sm text-ink/70 leading-relaxed">Start with a five-minute online application — there's no fee and no obligation. Within 48 hours a counselor will call to chat about your household, then schedule a meet-and-greet where your whole family (including resident dogs) can spend unhurried time with your potential match. If everyone agrees it's right, the pet goes home on a two-week trial with a starter kit, medical records, and a trainer on call. About 4% of trials don't work out, and that's okay — the animal comes back to us, no judgment, and we keep looking together.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl shadow-card overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-7 py-5 font-semibold" aria-expanded="false">
<span>What's included in the adoption fee?</span>
<svg class="faq-chevron w-5 h-5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="faq-panel px-7">
<p class="pb-6 text-sm text-ink/70 leading-relaxed">Fees run $95–$350 depending on species and age, and they cover far more than they cost: spay or neuter surgery, a microchip with lifetime registration, all age-appropriate vaccinations, deworming and flea treatment, a complete wellness exam, a post-adoption vet visit within 30 days, and lifetime behavior support. Senior pets (8+) are always fee-waived, because the right home matters more than the receipt.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl shadow-card overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-7 py-5 font-semibold" aria-expanded="false">
<span>What vaccination schedule does my new puppy or kitten need?</span>
<svg class="faq-chevron w-5 h-5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="faq-panel px-7">
<p class="pb-6 text-sm text-ink/70 leading-relaxed">Core vaccines start at 6–8 weeks, with boosters every 3–4 weeks until about 16 weeks: DHPP for dogs (distemper, hepatitis, parvo, parainfluenza) and FVRCP for cats, plus rabies at 14–16 weeks as required by law. After that, annual wellness exams keep boosters current and catch problems early. Puppies and kittens adopted from us leave with their schedule started and a reminder card — and our clinic sends text reminders so nothing slips through the cracks.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl shadow-card overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-7 py-5 font-semibold" aria-expanded="false">
<span>What should I do in an after-hours emergency?</span>
<svg class="faq-chevron w-5 h-5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="faq-panel px-7">
<p class="pb-6 text-sm text-ink/70 leading-relaxed">Call our 24/7 nurse line at (503) 555-0199 first. A registered veterinary nurse will assess severity over the phone, walk you through immediate first aid, and — if needed — direct you to the nearest of our partner emergency hospitals, calling ahead so they're prepped on arrival. True red flags that always warrant an immediate ER visit: difficulty breathing, seizures lasting over two minutes, suspected toxin ingestion, bloat (a distended, hard abdomen in dogs), and any trauma from a vehicle.</p>
</div>
</div>
<div class="faq-item bg-white rounded-2xl shadow-card overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-7 py-5 font-semibold" aria-expanded="false">
<span>Can I foster before committing to adoption?</span>
<svg class="faq-chevron w-5 h-5 shrink-0 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="faq-panel px-7">
<p class="pb-6 text-sm text-ink/70 leading-relaxed">Yes — and honestly, we hope you will. Our foster-to-adopt program covers every expense: food, supplies, and all medical care. You provide the couch and the patience. Around 60% of fosters "fail" gloriously and adopt their guest, which we consider a feature, not a bug. Fosters are especially needed for bottle-baby kittens in spring, large dogs, and animals recovering from surgery who heal faster in a quiet home than in a kennel.</p>
</div>
</div>
</div>
</section>
<!-- ============ DONATE CTA ============ -->
<section id="donate" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20 lg:pb-28 scroll-mt-28">
<div class="relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream" data-reveal>
<div class="absolute -top-16 -right-16 w-72 h-72 bg-pine-dark blob opacity-60" aria-hidden="true"></div>
<div class="absolute -bottom-20 -left-10 w-64 h-64 bg-coral/30 blob-2" aria-hidden="true"></div>
<div class="relative grid lg:grid-cols-2 gap-10 items-center">
<div>
<p class="eyebrow text-xs font-bold uppercase text-amber">Give Back</p>
<h2 class="mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight">Your gift keeps <em class="text-amber">tails wagging</em></h2>
<p class="mt-5 text-cream/85 leading-relaxed max-w-xl">
Pawhaven receives no government funding. Every wellness exam for a stray, every vaccination series for a litter of kittens, every night of safe shelter is paid for by people like you. As a registered 501(c)(3), every dollar is tax-deductible — and 89 cents of it goes directly to animal care.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="tel:+15035550147" class="inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-bold px-8 py-4 rounded-full shadow-soft transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7.5-4.7-9.6-9.2C.8 8.2 2.9 4.5 6.4 4.5c2 0 3.6 1.1 4.5 2.7.4.8 1.8.8 2.2 0 .9-1.6 2.5-2.7 4.5-2.7 3.5 0 5.6 3.7 4 7.3C19.5 16.3 12 21 12 21z"/></svg>
Donate Now
</a>
<a href="#faq" class="inline-flex items-center gap-2 border-2 border-cream/60 hover:bg-cream hover:text-pine font-semibold px-8 py-4 rounded-full transition">Become a Foster</a>
</div>
</div>
<ul class="grid sm:grid-cols-2 gap-4">
<li class="bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm">
<p class="font-display text-3xl font-semibold text-amber">$35</p>
<p class="mt-1 text-sm text-cream/80">covers a full wellness exam for a newly rescued stray</p>
</li>
<li class="bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm">
<p class="font-display text-3xl font-semibold text-amber">$75</p>
<p class="mt-1 text-sm text-cream/80">funds a complete puppy or kitten vaccination series</p>
</li>
<li class="bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm">
<p class="font-display text-3xl font-semibold text-amber">$150</p>
<p class="mt-1 text-sm text-cream/80">sponsors a spay/neuter surgery that prevents a litter</p>
</li>
<li class="bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm">
<p class="font-display text-3xl font-semibold text-amber">$500</p>
<p class="mt-1 text-sm text-cream/80">underwrites an emergency rescue intake, start to finish</p>
</li>
</ul>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="bg-ink text-cream/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
<!-- Brand -->
<div>
<a href="#top" class="flex items-center gap-3">
<img src="https://placehold.co/56x56/FBF6ED/175E4C?text=PH&font=lato" alt="Pawhaven logo" width="44" height="44" class="rounded-xl">
<span class="leading-tight">
<span class="block font-display font-semibold text-xl text-cream">Pawhaven</span>
<span class="block text-[10px] uppercase tracking-[.16em] text-amber font-semibold">Where pets & people thrive</span>
</span>
</a>
<p class="mt-5 text-sm leading-relaxed text-cream/60">
A 501(c)(3) nonprofit rescue, veterinary clinic, training center, and wildlife rehabilitation program serving the greater Portland area since 2009. EIN 93-0847215.
</p>
<div class="mt-6 flex gap-3">
<a href="#" aria-label="Pawhaven on Instagram" class="w-10 h-10 rounded-xl bg-white/10 hover:bg-coral flex items-center justify-center transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2.5" y="2.5" width="19" height="19" rx="5"/><circle cx="12" cy="12" r="4.5"/><circle cx="17.3" cy="6.7" r="1.2" fill="currentColor" stroke="none"/></svg>
</a>
<a href="#" aria-label="Pawhaven on Facebook" class="w-10 h-10 rounded-xl bg-white/10 hover:bg-coral flex items-center justify-center transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M14 8.5h2.7V5H14c-2.5 0-4.5 2-4.5 4.5V11H7v3.5h2.5V21h3.5v-6.5h2.6l.6-3.5h-3.2V9.3c0-.5.3-.8.5-.8z"/></svg>
</a>
<a href="#" aria-label="Pawhaven on X" class="w-10 h-10 rounded-xl bg-white/10 hover:bg-coral flex items-center justify-center transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M17.7 3H21l-7.3 8.3L22.2 21h-6.8l-5.3-6.4L4 21H.8l7.8-8.9L1.5 3h7l4.8 5.8L17.7 3zm-1.2 16h1.9L6.9 4.9H4.9L16.5 19z"/></svg>
</a>
<a href="#" aria-label="Pawhaven on YouTube" class="w-10 h-10 rounded-xl bg-white/10 hover:bg-coral flex items-center justify-center transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12s0-3.8-.5-5.6c-.3-1-1.1-1.8-2.1-2C18.6 4 12 4 12 4s-6.6 0-8.4.4c-1 .3-1.8 1-2.1 2C1 8.2 1 12 1 12s0 3.8.5 5.6c.3 1 1.1 1.8 2.1 2 1.8.4 8.4.4 8.4.4s6.6 0 8.4-.4c1-.3 1.8-1 2.1-2 .5-1.8.5-5.6.5-5.6zM9.8 15.5v-7l6 3.5-6 3.5z"/></svg>
</a>
</div>
</div>
<!-- Explore -->
<nav aria-label="Explore">
<h3 class="font-display font-semibold text-cream text-lg">Explore</h3>
<ul class="mt-5 space-y-3 text-sm">
<li><a href="#adopt" class="hover:text-amber transition">Adopt a Pet</a></li>
<li><a href="#veterinary" class="hover:text-amber transition">Veterinary Services</a></li>
<li><a href="#behavior" class="hover:text-amber transition">Behavior & Training</a></li>
<li><a href="#safety" class="hover:text-amber transition">Pet Safety & Emergencies</a></li>
<li><a href="#events" class="hover:text-amber transition">Events Calendar</a></li>
<li><a href="#stories" class="hover:text-amber transition">Success Stories</a></li>
<li><a href="#faq" class="hover:text-amber transition">FAQ</a></li>
</ul>
</nav>
<!-- Get involved -->
<nav aria-label="Get involved">
<h3 class="font-display font-semibold text-cream text-lg">Get Involved</h3>
<ul class="mt-5 space-y-3 text-sm">
<li><a href="#donate" class="hover:text-amber transition">Donate</a></li>
<li><a href="#faq" class="hover:text-amber transition">Foster a Pet</a></li>
<li><a href="#events" class="hover:text-amber transition">Volunteer</a></li>
<li><a href="#adopt" class="hover:text-amber transition">Sponsor a Sanctuary Animal</a></li>
<li><a href="#events" class="hover:text-amber transition">Host a Fundraiser</a></li>
<li><a href="#names" class="hover:text-amber transition">Pet Name Generator</a></li>
</ul>
</nav>
<!-- Contact -->
<div>
<h3 class="font-display font-semibold text-cream text-lg">Visit Us</h3>
<address class="mt-5 not-italic text-sm space-y-3 text-cream/70">
<p>412 Meadowbrook Lane<br>Portland, OR 97205</p>
<p>General: <a href="tel:+15035550147" class="hover:text-amber transition">(503) 555-0147</a><br>
Emergency 24/7: <a href="tel:+15035550199" class="text-amber hover:underline">(503) 555-0199</a><br>
<a href="mailto:hello@pawhaven.org" class="hover:text-amber transition">hello@pawhaven.org</a></p>
<p>Adoption center: Tue–Sun, 10am–6pm<br>Clinic: Mon–Sat, 8am–7pm</p>
</address>
<form id="newsletter-form" class="mt-6">
<label for="newsletter-email" class="text-xs font-bold uppercase tracking-widest text-cream/50">Monthly rescue roundup</label>
<div class="mt-2 flex gap-2">
<input id="newsletter-email" type="email" required placeholder="you@email.com" class="w-full min-w-0 bg-white/10 border border-white/20 rounded-xl px-4 py-2.5 text-sm placeholder:text-cream/40 focus:outline-none focus:border-amber">
<button type="submit" class="shrink-0 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-xl transition">Join</button>
</div>
<p id="newsletter-msg" class="mt-2 text-xs text-amber hidden" role="status">Welcome to the pack! Check your inbox.</p>
</form>
</div>
</div>
<div class="mt-14 pt-7 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-cream/50">
<p>© <span id="year">2025</span> Pawhaven Animal Welfare Society. All rights reserved. Made with love and an unreasonable number of treats.</p>
<div class="flex gap-6">
<a href="#" class="hover:text-amber transition">Privacy Policy</a>
<a href="#" class="hover:text-amber transition">Terms of Use</a>
<a href="#" class="hover:text-amber transition">Accessibility</a>
</div>
</div>
</div>
</footer>
<!-- ============ SCRIPTS ============ -->
<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>
(function () {
'use strict';
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------- Mobile menu ---------- */
var menuBtn = document.getElementById('menu-btn');
var mobileMenu = document.getElementById('mobile-menu');
var openIcon = document.getElementById('menu-open-icon');
var closeIcon = document.getElementById('menu-close-icon');
function toggleMenu(force) {
var willOpen = typeof force === 'boolean' ? force : mobileMenu.classList.contains('hidden');
mobileMenu.classList.toggle('hidden', !willOpen);
openIcon.classList.toggle('hidden', willOpen);
closeIcon.classList.toggle('hidden', !willOpen);
menuBtn.setAttribute('aria-expanded', String(willOpen));
menuBtn.setAttribute('aria-label', willOpen ? 'Close menu' : 'Open menu');
}
menuBtn.addEventListener('click', function () { toggleMenu(); });
mobileMenu.querySelectorAll('a').forEach(function (a) {
a.addEventListener('click', function () { toggleMenu(false); });
});
/* ---------- Header shadow ---------- */
var header = document.getElementById('site-header');
function onScroll() { header.classList.toggle('scrolled', window.scrollY > 12); }
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
/* ---------- Pet filters ---------- */
var filterBtns = document.querySelectorAll('[data-filter]');
var petCards = document.querySelectorAll('.pet-card');
filterBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
filterBtns.forEach(function (b) { b.classList.remove('active'); });
btn.classList.add('active');
var f = btn.getAttribute('data-filter');
petCards.forEach(function (card) {
var show = f === 'all' || card.getAttribute('data-species') === f;
card.style.display = show ? '' : 'none';
if (show && !reduceMotion) {
card.classList.remove('pop');
void card.offsetWidth;
card.classList.add('pop');
}
});
});
});
/* ---------- FAQ accordion ---------- */
document.querySelectorAll('.faq-item').forEach(function (item) {
var btn = item.querySelector('.faq-btn');
var panel = item.querySelector('.faq-panel');
btn.addEventListener('click', function () {
var isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(function (other) {
other.classList.remove('open');
other.querySelector('.faq-panel').style.maxHeight = '0px';
other.querySelector('.faq-btn').setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
panel.style.maxHeight = panel.scrollHeight + 'px';
btn.setAttribute('aria-expanded', 'true');
}
});
});
/* ---------- Pet name generator ---------- */
var NAMES = {
dog: {
regal: [
{ n: 'Barnaby', m: '"Son of consolation" — a name for a steadfast, soulful companion.' },
{ n: 'Duchess', m: 'For the pup who runs the household with quiet, regal authority.' },
{ n: 'Winston', m: 'Resolute, brave, and unmistakably distinguished at the dog park.' },
{ n: 'Beatrice', m: '"Bringer of joy" — and she will, daily, at the door.' },
{ n: 'Augustus', m: 'Majestic and venerable, even while eating socks.' },
{ n: 'Eleanor', m: 'A shining light with excellent posture and better opinions.' }
],
silly: [
{ n: 'Noodle', m: 'For a wiggly, spaghetti-legged friend with zero bones.' },
{ n: 'Waffles', m: 'Golden, sweet, and best enjoyed on Sunday mornings.' },
{ n: 'Pickles', m: 'A little sour, a lot of fun, always in a jar of trouble.' },
{ n: 'Ziggy', m: 'Named for the zigzag zoomies down the hallway.' },
{ n: 'Mochi', m: 'Soft, squishy, and impossible to have just one of.' },
{ n: 'Beans', m: 'Tiny, mighty, and full of unpredictable energy.' }
],
cozy: [
{ n: 'Maple', m: 'Warm and sweet as syrup on a cold morning.' },
{ n: 'Cocoa', m: 'Best enjoyed curled up by the fire. Obviously.' },
{ n: 'Pumpkin', m: 'The roundest, softest soul in the patch.' },
{ n: 'Hazel', m: 'Gentle eyes, gentle heart, gentle snores.' },
{ n: 'Ember', m: 'A small warm glow that never quite fades.' },
{ n: 'Biscuit', m: 'Buttery, comforting, and gone far too fast.' }
],
wild: [
{ n: 'Scout', m: 'Always first down the trail, nose to the wind.' },
{ n: 'Juniper', m: 'Wild, evergreen, and gloriously free.' },
{ n: 'Atlas', m: 'Carries the whole world on very happy shoulders.' },
{ n: 'River', m: 'Never stops moving; occasionally stops to drink from puddles.' },
{ n: 'Summit', m: 'Born to climb every hill and every sofa.' },
{ n: 'Indie', m: 'Charts their own course, usually off-leash in spirit.' }
]
},
cat: {
regal: [
{ n: 'Reginald', m: 'Demands the good cushions. Will get the good cushions.' },
{ n: 'Ophelia', m: 'Dramatic, poetic, and flawless in every lighting.' },
{ n: 'Percival', m: 'A knight of the midnight hallway patrol.' },
{ n: 'Margot', m: 'Parisian elegance in feline form.' },
{ n: 'Bartholomew', m: '"Barty" to friends. He has few, by design.' },
{ n: 'Vivienne', m: 'Born for the spotlight and the sunny windowsill.' }
],
silly: [
{ n: 'Nimbus', m: 'A small gray storm cloud that rains on keyboards.' },
{ n: 'Tofu', m: 'Soft, mild, and goes with absolutely everything.' },
{ n: 'Sassafras', m: 'Maximum sass, minimum effort.' },
{ n: 'Beans', m: 'Named for the toe beans. Obviously.' },
{ n: 'Gouda', m: 'Sharp, beloved, and a little bit nutty.' },
{ n: 'Sprinkles', m: 'Pure chaos in a tiny, frosted package.' }
],
cozy: [
{ n: 'Miso', m: 'Warm, savory comfort in a small bowl-shaped cat.' },
{ n: 'Clover', m: 'Lucky to have, luckier to know.' },
{ n: 'Fig', m: 'Sweet, quiet, and perfectly ripe for cuddles.' },
{ n: 'Nutmeg', m: 'A dash of autumn, all year long.' },
{ n: 'Pudding', m: 'Officially the softest cat in the world.' },
{ n: 'Socks', m: 'Four white paws of pure cozy.' }
],
wild: [
{ n: 'Zephyr', m: 'A west wind with whiskers and attitude.' },
{ n: 'Sable', m: 'A sleek explorer of the midnight kitchen.' },
{ n: 'Comet', m: 'Streaks across the living room at 3 a.m. sharp.' },
{ n: 'Willow', m: 'Graceful climber of curtains and bookshelves.' },
{ n: 'Peregrine', m: 'The fastest couch falcon in the northern hemisphere.' },
{ n: 'Lyra', m: 'A whole constellation of mischief.' }
]
}
};
var genState = { species: 'dog', vibe: 'regal' };
document.querySelectorAll('.gen-chip').forEach(function (chip) {
chip.addEventListener('click', function () {
var group = chip.getAttribute('data-group');
document.querySelectorAll('.gen-chip[data-group="' + group + '"]').forEach(function (c) { c.classList.remove('active'); });
chip.classList.add('active');
genState[group] = chip.getAttribute('data-value');
});
});
var resultsBox = document.getElementById('name-results');
var genBtn = document.getElementById('generate-btn');
function pickThree(pool) {
var copy = pool.slice();
var out = [];
while (out.length < 3 && copy.length) {
var i = Math.floor(Math.random() * copy.length);
out.push(copy.splice(i, 1)[0]);
}
return out;
}
function generateNames() {
var pool = [];
if (genState.species === 'any') {
pool = NAMES.dog[genState.vibe].concat(NAMES.cat[genState.vibe]);
} else {
pool = NAMES[genState.species][genState.vibe];
}
var picks = pickThree(pool);
resultsBox.innerHTML = '';
picks.forEach(function (pick, idx) {
var card = document.createElement('div');
card.className = 'bg-white rounded-2xl p-6 shadow-card pop';
card.style.animationDelay = (idx * 0.08) + 's';
card.innerHTML = '<p class="font-display text-2xl font-semibold text-pine">' + pick.n + '</p>' +
'<p class="mt-1 text-sm text-ink/65">' + pick.m + '</p>';
resultsBox.appendChild(card);
});
}
genBtn.addEventListener('click', generateNames);
/* ---------- Newsletter ---------- */
var form = document.getElementById('newsletter-form');
var msg = document.getElementById('newsletter-msg');
form.addEventListener('submit', function (e) {
e.preventDefault();
msg.classList.remove('hidden');
form.reset();
});
/* ---------- Footer year ---------- */
document.getElementById('year').textContent = new Date().getFullYear();
/* ---------- GSAP animations ---------- */
if (window.gsap && window.ScrollTrigger && !reduceMotion) {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('[data-reveal]').forEach(function (el) {
gsap.fromTo(el, { y: 36, opacity: 0 }, {
y: 0, opacity: 1, duration: 0.9, ease: 'power3.out',
scrollTrigger: { trigger: el, start: 'top 88%', once: true }
});
});
document.querySelectorAll('[data-count]').forEach(function (el) {
var target = parseInt(el.getAttribute('data-count'), 10);
ScrollTrigger.create({
trigger: el, start: 'top 92%', once: true,
onEnter: function () {
var obj = { val: 0 };
gsap.to(obj, {
val: target, duration: 2, ease: 'power2.out',
onUpdate: function () { el.textContent = Math.floor(obj.val).toLocaleString('en-US'); }
});
}
});
});
} else {
// Fallback: ensure everything is visible if GSAP fails or motion is reduced
document.querySelectorAll('[data-reveal]').forEach(function (el) {
el.style.opacity = '1'; el.style.transform = 'none';
});
document.querySelectorAll('[data-count]').forEach(function (el) {
el.textContent = parseInt(el.getAttribute('data-count'), 10).toLocaleString('en-US');
});
}
})();
</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:46.316Z",
"url": "https://benchmark.aimac.invalid/ee56754ef9a9a55782b01c08bad7f589984d1db9d6c6ed0773790992dd8d8af0.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-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-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-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": "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": "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": "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": "select-name",
"impact": null,
"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": []
},
{
"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": "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": "<nav class=\"hidden lg:flex items-center gap-7 text-[15px] font-medium\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-7 text-[15px] font-medium\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"flex flex-wrap gap-2 mb-7\" role=\"group\" aria-label=\"Filter pets by type\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 0; transform: translate(0px, 36px);\">",
"target": [
".mb-7"
]
}
]
},
{
"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=\"text-ink font-sans 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 class=\"w-4 h-4 text-amber\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">",
"target": [
".gap-y-1 > .gap-2.items-center > .w-4.h-4[fill=\"currentColor\"]"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-7 text-[15px] font-medium\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"flex flex-wrap gap-2 mb-7\" role=\"group\" aria-label=\"Filter pets by type\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 0; transform: translate(0px, 36px);\">",
"target": [
".mb-7"
]
}
]
},
{
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"flex flex-wrap gap-2 mb-7\" role=\"group\" aria-label=\"Filter pets by type\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 0; transform: translate(0px, 36px);\">",
"target": [
".mb-7"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-7 text-[15px] font-medium\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-7 text-[15px] font-medium\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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=\"chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"all\">All Pets</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
]
},
{
"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=\"mt-6 font-display font-semibold text-5xl sm:text-6xl xl:text-7xl leading-[1.04] tracking-tight\">\n Every pet deserves a <em class=\"text-pine\">haven</em>.\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Meet your new <em class=\"text-pine\">best friend</em></h2>",
"target": [
".lg\\:col-span-4 > h2"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Milo</h3>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Junie</h3>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Clementine</h3>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Waffles</h3>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Buttercup</h3>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Sequoia</h3>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold flex items-center gap-2\">",
"target": [
".p-6.mt-6.rounded-2xl > .text-xl"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Medicine that treats the <em class=\"text-pine\">whole</em> animal</h2>",
"target": [
".order-1 > h2"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Struggling? You're not a bad owner. <em class=\"text-pine\">You need a plan.</em></h2>",
"target": [
".max-w-3xl > h2"
]
},
{
"html": "<h3 class=\"mt-5 font-display text-xl font-semibold\">Separation Anxiety</h3>",
"target": [
".hover\\:-translate-y-1\\.5.p-7.transition-transform:nth-child(1) > .text-xl.mt-5"
]
},
{
"html": "<h3 class=\"mt-5 font-display text-xl font-semibold\">Leash Reactivity</h3>",
"target": [
".hover\\:-translate-y-1\\.5.p-7.transition-transform:nth-child(2) > .text-xl.mt-5"
]
},
{
"html": "<h3 class=\"mt-5 font-display text-xl font-semibold\">Litter Box Troubles</h3>",
"target": [
".hover\\:-translate-y-1\\.5.p-7.transition-transform:nth-child(3) > .text-xl.mt-5"
]
},
{
"html": "<h3 class=\"mt-5 font-display text-xl font-semibold\">Puppy & Kitten Foundations</h3>",
"target": [
".hover\\:-translate-y-1\\.5.p-7.transition-transform:nth-child(4) > .text-xl.mt-5"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Know the risks <em class=\"text-amber\">before</em> they happen</h2>",
"target": [
".gap-12.lg\\:grid-cols-2.max-w-7xl > div[data-reveal=\"\"]:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"mt-8 font-display text-xl font-semibold text-amber\">Common household toxins</h3>",
"target": [
".mt-8.text-xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">In an emergency, do this</h3>",
"target": [
".gap-3.items-center.flex:nth-child(1) > .text-2xl"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">The Perfect <em class=\"text-pine\">Name</em> Generator</h2>",
"target": [
".sm\\:p-12.p-8:nth-child(1) > h2"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Come say hi <em class=\"text-pine\">in person</em></h2>",
"target": [
".items-end > .max-w-2xl > h2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold\">Paws in the Park Adoption Fair</h3>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(1) > .p-6.grow.flex-col > .text-xl"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold\">Low-Cost Vaccine & Microchip Clinic</h3>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(2) > .p-6.grow.flex-col > .text-xl"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold\">Puppy & Kitten Social Hour</h3>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(3) > .p-6.grow.flex-col > .text-xl"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Happy tails, <em class=\"text-pine\">told by their humans</em></h2>",
"target": [
".max-w-2xl.text-center.mx-auto > h2"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Good questions, <em class=\"text-pine\">honest answers</em></h2>",
"target": [
"#faq > .text-center[data-reveal=\"\"] > h2"
]
},
{
"html": "<h2 class=\"mt-3 font-display font-semibold text-4xl sm:text-5xl leading-tight\">Your gift keeps <em class=\"text-amber\">tails wagging</em></h2>",
"target": [
".gap-10.lg\\:grid-cols-2.relative > div > h2"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-cream text-lg\">Explore</h3>",
"target": [
"nav[aria-label=\"Explore\"] > .text-lg"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-cream text-lg\">Get Involved</h3>",
"target": [
"nav[aria-label=\"Get involved\"] > .text-lg"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-cream text-lg\">Visit Us</h3>",
"target": [
"div:nth-child(4) > .text-lg"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"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": "#fbf6ed",
"bgColor": "#0e4034",
"contrastRatio": 10.82,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.82"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<strong class=\"font-semibold\">24/7 Pet Emergency & Poison Line:</strong>",
"target": [
".gap-y-1 > .gap-2.items-center > span > strong"
]
}
]
},
{
"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": "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": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "mobile-menu",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div id=\"mobile-menu\" class=\"lg:hidden hidden border-t border-ink/10 bg-cream\">",
"target": [
"#mobile-menu"
]
}
]
},
{
"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": [
{
"html": "<label for=\"newsletter-email\" class=\"text-xs font-bold uppercase tracking-widest text-cream/50\">Monthly rescue roundup</label>",
"target": [
"label"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"newsletter-email\" type=\"email\" required=\"\" placeholder=\"you@email.com\" class=\"w-full min-w-0 bg-white/10 border border-white/20 rounded-xl px-4 py-2.5 text-sm placeholder:text-cream/40 focus:outline-none focus:border-amber\">",
"target": [
"#newsletter-email"
]
}
]
},
{
"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/56x56/175E4C/FBF6ED?text=PH&font=lato\" alt=\"Pawhaven logo\" width=\"48\" height=\"48\" class=\"rounded-2xl shadow-card group-hover:rotate-3 transition-transform\">",
"target": [
".group-hover\\:rotate-3"
]
}
]
},
{
"id": "label",
"impact": null,
"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": "explicit-label",
"data": {
"explicitLabel": "Monthly rescue roundup"
},
"relatedNodes": [
{
"html": "<label for=\"newsletter-email\" class=\"text-xs font-bold uppercase tracking-widest text-cream/50\">Monthly rescue roundup</label>",
"target": [
"label"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"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 id=\"newsletter-email\" type=\"email\" required=\"\" placeholder=\"you@email.com\" class=\"w-full min-w-0 bg-white/10 border border-white/20 rounded-xl px-4 py-2.5 text-sm placeholder:text-cream/40 focus:outline-none focus:border-amber\">",
"target": [
"#newsletter-email"
]
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"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": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span><strong class=\"font-semibold\">24/7 Pet Emergency & Poison Line:</strong> <a href=\"tel:+15035550199\" class=\"underline decoration-amber/70 underline-offset-2 hover:text-amber\">(503) 555-0199</a></span>",
"target": [
".gap-y-1 > .gap-2.items-center > span"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"tel:+15035550199\" class=\"underline decoration-amber/70 underline-offset-2 hover:text-amber\">(503) 555-0199</a>",
"target": [
".decoration-amber\\/70"
]
}
]
},
{
"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=\"#main\" class=\"sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:bg-pine focus:text-cream focus:px-4 focus:py-2 focus:rounded-lg\">Skip to main content</a>",
"target": [
".sr-only"
]
}
]
},
{
"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=\"mt-7 space-y-4\">",
"target": [
".lg\\:col-span-4 > 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-4\">",
"target": [
".lg\\:col-span-4 > ol > .gap-4: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/56x56/175E4C/FBF6ED?text=PH&font=lato\" alt=\"Pawhaven logo\" width=\"48\" height=\"48\" class=\"rounded-2xl shadow-card group-hover:rotate-3 transition-transform\">",
"target": [
".group-hover\\:rotate-3"
]
}
]
},
{
"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-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=\"#main\" class=\"sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:bg-pine focus:text-cream focus:px-4 focus:py-2 focus:rounded-lg\">Skip to main content</a>",
"target": [
".sr-only"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "td-headers-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The headers attribute is exclusively used to refer to other cells in the table"
}
],
"none": [],
"impact": null,
"html": "<table class=\"w-full text-sm\">",
"target": [
"table"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "th-has-data-cells",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "All table header cells refer to data cells"
}
],
"none": [],
"impact": null,
"html": "<table class=\"w-full text-sm\">",
"target": [
"table"
]
}
]
}
],
"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": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"site-header\" class=\"sticky top-0 z-50 bg-cream/90 backdrop-blur-md transition-shadow\">",
"target": [
"#site-header"
]
},
{
"html": "<body class=\"text-ink font-sans antialiased\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block font-display font-semibold text-2xl tracking-tight\">Pawhaven</span>",
"target": [
".tracking-tight.block.text-2xl"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"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": "#ffffff",
"bgColor": "#e8734a",
"contrastRatio": 3,
"fontSize": "11.3pt (15px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#donate\" class=\"inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-5 py-2.5 rounded-full shadow-card transition\">",
"target": [
".lg\\:flex > .hover\\:bg-coral-dark.text-white[href$=\"#donate\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#donate\" class=\"inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-5 py-2.5 rounded-full shadow-card transition\">",
"target": [
".lg\\:flex > .hover\\:bg-coral-dark.text-white[href$=\"#donate\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9552f",
"bgColor": "#fbe3d8",
"contrastRatio": 3.54,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<p class=\"eyebrow inline-flex items-center gap-2 text-xs font-bold uppercase text-coral-dark bg-coral-soft px-4 py-2 rounded-full\">",
"target": [
".bg-coral-soft.eyebrow.text-coral-dark"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #c9552f, background color: #fbe3d8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow inline-flex items-center gap-2 text-xs font-bold uppercase text-coral-dark bg-coral-soft px-4 py-2 rounded-full\">",
"target": [
".bg-coral-soft.eyebrow.text-coral-dark"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #c9552f, background color: #fbe3d8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a8380",
"bgColor": "#ffffff",
"contrastRatio": 3.89,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"floaty absolute -left-3 sm:-left-8 top-10 bg-white rounded-2xl shadow-soft px-5 py-4 flex items-center gap-3\">",
"target": [
".floaty"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.89 (foreground color: #7a8380, background color: #ffffff, 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/60 mt-1\">pets adopted this month</p>",
"target": [
".text-ink\\/60.mt-1.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.89 (foreground color: #7a8380, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#21312b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-ink text-cream/80\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label for=\"newsletter-email\" class=\"text-xs font-bold uppercase tracking-widest text-cream/50\">Monthly rescue roundup</label>",
"target": [
"label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e8734a",
"contrastRatio": 3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"shrink-0 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-xl transition\">Join</button>",
"target": [
"button[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"shrink-0 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-xl transition\">Join</button>",
"target": [
"button[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#21312b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-ink text-cream/80\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\u00a9 <span id=\"year\">2026</span> Pawhaven Animal Welfare Society. All rights reserved. Made with love and an unreasonable number of treats.</p>",
"target": [
".mt-14 > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#21312b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-ink text-cream/80\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"year\">2026</span>",
"target": [
"#year"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#21312b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-ink text-cream/80\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-amber transition\">Privacy Policy</a>",
"target": [
".hover\\:text-amber.transition[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#21312b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-ink text-cream/80\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-amber transition\">Terms of Use</a>",
"target": [
".hover\\:text-amber.transition[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#21312b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-ink text-cream/80\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-amber transition\">Accessibility</a>",
"target": [
".hover\\:text-amber.transition[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #8e948c, background color: #21312b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7ba192",
"bgColor": "#fdfbf7",
"contrastRatio": 2.76,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\"><span data-count=\"12400\">2,869</span>+</p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Successful adoptions since 2009</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.76 (foreground color: #7ba192, background color: #fdfbf7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span data-count=\"12400\">2,869</span>",
"target": [
"span[data-count=\"12400\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.76 (foreground color: #7ba192, background color: #fdfbf7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1b4ac",
"bgColor": "#fdfbf7",
"contrastRatio": 2.03,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\"><span data-count=\"12400\">2,869</span>+</p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Successful adoptions since 2009</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-ink/60 font-medium\">Successful adoptions since 2009</p>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(1) > .text-ink\\/60.mt-2.font-medium"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1b4ac",
"bgColor": "#fdfbf7",
"contrastRatio": 2.03,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\"><span data-count=\"38\">8</span></p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Partner clinics & ER hospitals</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-ink/60 font-medium\">Partner clinics & ER hospitals</p>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(2) > .text-ink\\/60.mt-2.font-medium"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7ba192",
"bgColor": "#fdfbf7",
"contrastRatio": 2.76,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\"><span data-count=\"96\">22</span>%</p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Live-release rate, 11 years running</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.76 (foreground color: #7ba192, background color: #fdfbf7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span data-count=\"96\">22</span>",
"target": [
"span[data-count=\"96\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.76 (foreground color: #7ba192, background color: #fdfbf7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1b4ac",
"bgColor": "#fdfbf7",
"contrastRatio": 2.03,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\"><span data-count=\"96\">22</span>%</p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Live-release rate, 11 years running</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-ink/60 font-medium\">Live-release rate, 11 years running</p>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(3) > .text-ink\\/60.mt-2.font-medium"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7ba192",
"bgColor": "#fdfbf7",
"contrastRatio": 2.76,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\">24/7</p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Registered-vet-nurse advice line</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.76 (foreground color: #7ba192, background color: #fdfbf7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\">24/7</p>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(4) > .text-4xl.sm\\:text-5xl.text-pine"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.76 (foreground color: #7ba192, background color: #fdfbf7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1b4ac",
"bgColor": "#fdfbf7",
"contrastRatio": 2.03,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-3xl p-7 shadow-card text-center\">\n <p class=\"font-display text-4xl sm:text-5xl font-semibold text-pine\">24/7</p>\n <p class=\"mt-2 text-sm text-ink/60 font-medium\">Registered-vet-nurse advice line</p>\n </div>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-ink/60 font-medium\">Registered-vet-nurse advice line</p>",
"target": [
".p-7.text-center.rounded-3xl:nth-child(4) > .text-ink\\/60.mt-2.font-medium"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #b1b4ac, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#91afa2",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"all\">All Pets</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"all\">All Pets</button>",
"target": [
"button[data-filter=\"all\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959a92",
"bgColor": "#fdfaf5",
"contrastRatio": 2.75,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"dog\">Dogs</button>",
"target": [
"button[data-filter=\"dog\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #959a92, background color: #fdfaf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"dog\">Dogs</button>",
"target": [
"button[data-filter=\"dog\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #959a92, background color: #fdfaf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959a92",
"bgColor": "#fdfaf5",
"contrastRatio": 2.75,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"cat\">Cats</button>",
"target": [
"button[data-filter=\"cat\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #959a92, background color: #fdfaf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"cat\">Cats</button>",
"target": [
"button[data-filter=\"cat\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #959a92, background color: #fdfaf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959a92",
"bgColor": "#fdfaf5",
"contrastRatio": 2.75,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"other\">Sanctuary & Wildlife</button>",
"target": [
"button[data-filter=\"other\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #959a92, background color: #fdfaf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"chip px-5 py-2 rounded-full border-2 border-ink/10 bg-white text-sm font-semibold\" data-filter=\"other\">Sanctuary & Wildlife</button>",
"target": [
"button[data-filter=\"other\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #959a92, background color: #fdfaf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91afa2",
"bgColor": "#eff3ea",
"contrastRatio": 2.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Good with kids</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Good with kids</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91afa2",
"bgColor": "#eff3ea",
"contrastRatio": 2.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Apartment OK</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Apartment OK</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#91afa2",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Milo</a>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Milo</a>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91afa2",
"bgColor": "#eff3ea",
"contrastRatio": 2.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Active home</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Active home</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91afa2",
"bgColor": "#eff3ea",
"contrastRatio": 2.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Needs yard</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Needs yard</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#91afa2",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Junie</a>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Junie</a>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91afa2",
"bgColor": "#eff3ea",
"contrastRatio": 2.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Calm home</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Calm home</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91afa2",
"bgColor": "#eff3ea",
"contrastRatio": 2.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Solo pet preferred</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Solo pet preferred</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.1 (foreground color: #91afa2, background color: #eff3ea, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#91afa2",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Clementine</a>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Clementine</a>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #fbf6ed, background color: #91afa2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#83a698",
"bgColor": "#eef2e9",
"contrastRatio": 2.35,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Playful</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Playful</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#83a698",
"bgColor": "#eef2e9",
"contrastRatio": 2.35,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Loves other cats</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Loves other cats</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#83a698",
"contrastRatio": 2.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Waffles</a>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.47 (foreground color: #fbf6ed, background color: #83a698, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Meet Waffles</a>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .hover\\:bg-pine-dark.bg-pine[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.47 (foreground color: #fbf6ed, background color: #83a698, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#888e87",
"bgColor": "#f6cd8f",
"contrastRatio": 2.24,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-3 left-3 bg-amber text-ink text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full\">Sanctuary</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .relative.overflow-hidden.rounded-2xl > .bg-amber.top-3.left-3"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #888e87, background color: #f6cd8f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-3 left-3 bg-amber text-ink text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full\">Sanctuary</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .relative.overflow-hidden.rounded-2xl > .bg-amber.top-3.left-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #888e87, background color: #f6cd8f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e1a189",
"bgColor": "#fbece2",
"contrastRatio": 1.88,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-coral-soft text-coral-dark px-2.5 py-1 rounded-full\">Sponsor me</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .bg-coral-soft.px-2\\.5.py-1"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #e1a189, background color: #fbece2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-coral-soft text-coral-dark px-2.5 py-1 rounded-full\">Sponsor me</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .bg-coral-soft.px-2\\.5.py-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #e1a189, background color: #fbece2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#83a698",
"bgColor": "#eef2e9",
"contrastRatio": 2.35,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Sanctuary resident</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Sanctuary resident</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf7",
"bgColor": "#f1b197",
"contrastRatio": 1.77,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#donate\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-full transition\">Sponsor Buttercup</a>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .hover\\:bg-coral-dark.text-white[href$=\"#donate\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.77 (foreground color: #fdfbf7, background color: #f1b197, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#donate\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-full transition\">Sponsor Buttercup</a>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .hover\\:bg-coral-dark.text-white[href$=\"#donate\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.77 (foreground color: #fdfbf7, background color: #f1b197, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#888e87",
"bgColor": "#f6cd8f",
"contrastRatio": 2.24,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-3 left-3 bg-amber text-ink text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full\">Wildlife Rehab</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .relative.overflow-hidden.rounded-2xl > .bg-amber.top-3.left-3"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #888e87, background color: #f6cd8f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-3 left-3 bg-amber text-ink text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full\">Wildlife Rehab</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .relative.overflow-hidden.rounded-2xl > .bg-amber.top-3.left-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #888e87, background color: #f6cd8f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e1a189",
"bgColor": "#fbece2",
"contrastRatio": 1.88,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-coral-soft text-coral-dark px-2.5 py-1 rounded-full\">Symbolic adoption</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .bg-coral-soft.px-2\\.5.py-1"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #e1a189, background color: #fbece2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-coral-soft text-coral-dark px-2.5 py-1 rounded-full\">Symbolic adoption</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .bg-coral-soft.px-2\\.5.py-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #e1a189, background color: #fbece2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#83a698",
"bgColor": "#eef2e9",
"contrastRatio": 2.35,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Release 2026</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[11px] font-semibold bg-pine-soft text-pine px-2.5 py-1 rounded-full\">Release 2026</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .gap-1\\.5.flex-wrap.mt-3 > .px-2\\.5.py-1.text-\\[11px\\]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #83a698, background color: #eef2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf7",
"bgColor": "#f1b197",
"contrastRatio": 1.77,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#donate\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-full transition\">Adopt Symbolically</a>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .hover\\:bg-coral-dark.text-white[href$=\"#donate\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.77 (foreground color: #fdfbf7, background color: #f1b197, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#donate\" class=\"mt-4 inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-dark text-white text-sm font-semibold px-4 py-2.5 rounded-full transition\">Adopt Symbolically</a>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .hover\\:bg-coral-dark.text-white[href$=\"#donate\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.77 (foreground color: #fdfbf7, background color: #f1b197, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#89948c",
"bgColor": "#f5f8f4",
"contrastRatio": 2.93,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold flex items-center gap-2\">",
"target": [
".p-6.mt-6.rounded-2xl > .text-xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bac3bb",
"bgColor": "#f5f8f4",
"contrastRatio": 1.68,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.68 (foreground color: #bac3bb, background color: #f5f8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<th class=\"py-2 pr-3 font-semibold\">Age</th>",
"target": [
"th:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.68 (foreground color: #bac3bb, background color: #f5f8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bac3bb",
"bgColor": "#f5f8f4",
"contrastRatio": 1.68,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.68 (foreground color: #bac3bb, background color: #f5f8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<th class=\"py-2 pr-3 font-semibold\">Dogs</th>",
"target": [
"th:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.68 (foreground color: #bac3bb, background color: #f5f8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bac3bb",
"bgColor": "#f5f8f4",
"contrastRatio": 1.68,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.68 (foreground color: #bac3bb, background color: #f5f8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<th class=\"py-2 font-semibold\">Cats</th>",
"target": [
"th:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.68 (foreground color: #bac3bb, background color: #f5f8f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#89948c",
"bgColor": "#f5f8f4",
"contrastRatio": 2.93,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3 font-semibold text-ink\">6\u20138 wks</td>",
"target": [
".border-ink\\/5.border-b:nth-child(1) > .pr-3:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3\">DHPP, deworming</td>",
"target": [
".border-ink\\/5.border-b:nth-child(1) > .pr-3:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5\">FVRCP, deworming</td>",
"target": [
".border-ink\\/5.border-b:nth-child(1) > td:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#89948c",
"bgColor": "#f5f8f4",
"contrastRatio": 2.93,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3 font-semibold text-ink\">10\u201312 wks</td>",
"target": [
".border-ink\\/5.border-b:nth-child(2) > .pr-3:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3\">DHPP booster, Bordetella</td>",
"target": [
".border-ink\\/5.border-b:nth-child(2) > .pr-3:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5\">FVRCP booster, FeLV</td>",
"target": [
".border-ink\\/5.border-b:nth-child(2) > td:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#89948c",
"bgColor": "#f5f8f4",
"contrastRatio": 2.93,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3 font-semibold text-ink\">14\u201316 wks</td>",
"target": [
".border-ink\\/5.border-b:nth-child(3) > .pr-3:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3\">Rabies, final DHPP</td>",
"target": [
".border-ink\\/5.border-b:nth-child(3) > .pr-3:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5\">Rabies, final FVRCP</td>",
"target": [
".border-ink\\/5.border-b:nth-child(3) > td:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#89948c",
"bgColor": "#f5f8f4",
"contrastRatio": 2.93,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3 font-semibold text-ink\">Annual</td>",
"target": [
"tr:nth-child(4) > .pr-3:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #89948c, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5 pr-3\">Wellness exam, rabies, lifestyle vaccines</td>",
"target": [
"tr:nth-child(4) > .pr-3:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a2aba3",
"bgColor": "#f5f8f4",
"contrastRatio": 2.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-6 bg-white rounded-2xl shadow-card p-6\">",
"target": [
".p-6.mt-6.rounded-2xl"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"py-2.5\">Wellness exam, rabies, FVRCP booster</td>",
"target": [
"tr:nth-child(4) > td:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #a2aba3, background color: #f5f8f4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3f4eb",
"bgColor": "#84aa9c",
"contrastRatio": 2.3,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"tel:+15035550147\" class=\"inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-7 py-3.5 rounded-full shadow-soft transition\">",
"target": [
".py-3\\.5.hover\\:bg-pine-dark[href=\"tel:+15035550147\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f3f4eb, background color: #84aa9c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15035550147\" class=\"inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-7 py-3.5 rounded-full shadow-soft transition\">",
"target": [
".py-3\\.5.hover\\:bg-pine-dark[href=\"tel:+15035550147\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f3f4eb, background color: #84aa9c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col\" data-species=\"dog\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-ink/50\">Pug \u00b7 4 yrs \u00b7 M</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(1) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col\" data-species=\"dog\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-ink/50\">Husky Mix \u00b7 1 yr \u00b7 F</span>",
"target": [
".pet-card.p-4[data-species=\"dog\"]:nth-child(2) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col\" data-species=\"cat\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-ink/50\">Domestic Shorthair \u00b7 3 yrs \u00b7 F</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(3) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col\" data-species=\"cat\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-ink/50\">Tabby \u00b7 6 mos \u00b7 M</span>",
"target": [
".pet-card.p-4[data-species=\"cat\"]:nth-child(4) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col\" data-species=\"other\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-ink/50\">Highland Cow \u00b7 7 yrs \u00b7 F</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(5) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"pet-card bg-white rounded-3xl p-4 shadow-card flex flex-col\" data-species=\"other\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-ink/50\">Black Bear \u00b7 2 yrs \u00b7 M</span>",
"target": [
".pet-card.p-4[data-species=\"other\"]:nth-child(6) > .pt-4.px-1.pb-1 > .items-baseline.justify-between.flex > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf7",
"bgColor": "#f0ac91",
"contrastRatio": 1.84,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#events\" class=\"inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-7 py-3.5 rounded-full shadow-soft transition\">Get Behavior Help</a>",
"target": [
".py-3\\.5.hover\\:bg-coral-dark[href$=\"#events\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.84 (foreground color: #fdfbf7, background color: #f0ac91, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\" class=\"inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-semibold px-7 py-3.5 rounded-full shadow-soft transition\">Get Behavior Help</a>",
"target": [
".py-3\\.5.hover\\:bg-coral-dark[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.84 (foreground color: #fdfbf7, background color: #f0ac91, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c7a38",
"bgColor": "#0e4034",
"contrastRatio": 2.75,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs font-bold uppercase text-amber\">Pet Safety & Emergency Info</p>",
"target": [
"#safety > .gap-12.lg\\:grid-cols-2.max-w-7xl > div[data-reveal=\"\"]:nth-child(1) > .eyebrow.font-bold.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c7a38",
"bgColor": "#0e4034",
"contrastRatio": 2.75,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em class=\"text-amber\">before</em>",
"target": [
".gap-12.lg\\:grid-cols-2.max-w-7xl > div[data-reveal=\"\"]:nth-child(1) > h2 > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#779086",
"bgColor": "#0e4034",
"contrastRatio": 3.39,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #779086, background color: #0e4034, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-5 text-cream/80 leading-relaxed\">",
"target": [
".text-cream\\/80.mt-5.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #779086, background color: #0e4034, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c7a38",
"bgColor": "#0e4034",
"contrastRatio": 2.75,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"mt-8 font-display text-xl font-semibold text-amber\">Common household toxins</h3>",
"target": [
".mt-8.text-xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Chocolate</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(1)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Chocolate</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Xylitol (sugar-free gum)</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(2)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Xylitol (sugar-free gum)</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Grapes & raisins</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(3)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Grapes & raisins</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Lilies (deadly to cats)</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(4)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Lilies (deadly to cats)</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Onions & garlic</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(5)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Onions & garlic</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Human pain relievers</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(6)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Human pain relievers</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(6)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Rodent bait</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(7)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Rodent bait</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(7)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Sago palm</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(8)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Sago palm</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(8)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Antifreeze</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(9)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Antifreeze</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(9)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91a59a",
"bgColor": "#1b4b3f",
"contrastRatio": 3.78,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Essential oil diffusers</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(10)"
]
},
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<li class=\"bg-white/10 border border-white/15 text-sm font-medium px-4 py-2 rounded-full\">Essential oil diffusers</li>",
"target": [
".border-white\\/15.border.font-medium:nth-child(10)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #91a59a, background color: #1b4b3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6a867c",
"bgColor": "#0e4034",
"contrastRatio": 2.94,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.94 (foreground color: #6a867c, background color: #0e4034, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-6 text-cream/70 text-sm leading-relaxed\">",
"target": [
".text-cream\\/70.mt-6.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.94 (foreground color: #6a867c, background color: #0e4034, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c7a38",
"bgColor": "#0e4034",
"contrastRatio": 2.75,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"safety\" class=\"bg-pine-dark text-cream py-16 lg:py-24 scroll-mt-28\">",
"target": [
"#safety"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" class=\"mt-8 inline-flex items-center gap-2 border-2 border-amber text-amber hover:bg-amber hover:text-ink font-semibold px-7 py-3.5 rounded-full transition\">Save Our Emergency Guide</a>",
"target": [
".border-amber"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.75 (foreground color: #8c7a38, background color: #0e4034, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#93aaa4",
"bgColor": "#875c40",
"contrastRatio": 2.34,
"fontSize": "13.5pt (18px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"tel:+15035550199\" class=\"mt-8 flex items-center justify-center gap-3 bg-coral hover:bg-coral-dark text-white font-bold text-lg px-6 py-4 rounded-2xl transition shadow-soft\">",
"target": [
".px-6.hover\\:bg-coral-dark[href=\"tel:+15035550199\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #93aaa4, background color: #875c40, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15035550199\" class=\"mt-8 flex items-center justify-center gap-3 bg-coral hover:bg-coral-dark text-white font-bold text-lg px-6 py-4 rounded-2xl transition shadow-soft\">",
"target": [
".px-6.hover\\:bg-coral-dark[href=\"tel:+15035550199\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #93aaa4, background color: #875c40, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#7fa396",
"contrastRatio": 2.57,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"species\" data-value=\"dog\">A Dog</button>",
"target": [
"button[data-value=\"dog\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #fbf6ed, background color: #7fa396, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"species\" data-value=\"dog\">A Dog</button>",
"target": [
"button[data-value=\"dog\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #fbf6ed, background color: #7fa396, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#858b84",
"bgColor": "#fbf6ed",
"contrastRatio": 3.23,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"species\" data-value=\"cat\">A Cat</button>",
"target": [
"button[data-value=\"cat\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"species\" data-value=\"cat\">A Cat</button>",
"target": [
"button[data-value=\"cat\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#858b84",
"bgColor": "#fbf6ed",
"contrastRatio": 3.23,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"species\" data-value=\"any\">Surprise Me</button>",
"target": [
"button[data-value=\"any\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"species\" data-value=\"any\">Surprise Me</button>",
"target": [
"button[data-value=\"any\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#7fa396",
"contrastRatio": 2.57,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"regal\">Regal</button>",
"target": [
"button[data-value=\"regal\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #fbf6ed, background color: #7fa396, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip active px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"regal\">Regal</button>",
"target": [
"button[data-value=\"regal\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #fbf6ed, background color: #7fa396, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#858b84",
"bgColor": "#fbf6ed",
"contrastRatio": 3.23,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"silly\">Silly</button>",
"target": [
"button[data-value=\"silly\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"silly\">Silly</button>",
"target": [
"button[data-value=\"silly\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#858b84",
"bgColor": "#fbf6ed",
"contrastRatio": 3.23,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"cozy\">Cozy</button>",
"target": [
"button[data-value=\"cozy\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"cozy\">Cozy</button>",
"target": [
"button[data-value=\"cozy\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#858b84",
"bgColor": "#fbf6ed",
"contrastRatio": 3.23,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"wild\">Adventurous</button>",
"target": [
"button[data-value=\"wild\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"gen-chip chip px-5 py-2 rounded-full border-2 border-ink/10 bg-cream text-sm font-semibold\" data-group=\"vibe\" data-value=\"wild\">Adventurous</button>",
"target": [
"button[data-value=\"wild\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.23 (foreground color: #858b84, background color: #fbf6ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#7fa396",
"contrastRatio": 2.57,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button id=\"generate-btn\" class=\"mt-8 inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-8 py-4 rounded-full shadow-soft transition text-base\">",
"target": [
"#generate-btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #fbf6ed, background color: #7fa396, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button id=\"generate-btn\" class=\"mt-8 inline-flex items-center gap-2 bg-pine hover:bg-pine-dark text-cream font-semibold px-8 py-4 rounded-full shadow-soft transition text-base\">",
"target": [
"#generate-btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #fbf6ed, background color: #7fa396, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7fa396",
"bgColor": "#fdfbf7",
"contrastRatio": 2.67,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-6 shadow-card pop\" style=\"animation-delay:.0s\">\n <p class=\"font-display text-2xl font-semibold text-pine\">Barnaby</p>\n <p class=\"mt-1 text-sm text-ink/65\">\"Son of consolation\" \u2014 a name for a steadfast, soulful companion.</p>\n </div>",
"target": [
".pop.p-6.rounded-2xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.67 (foreground color: #7fa396, background color: #fdfbf7, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-2xl font-semibold text-pine\">Barnaby</p>",
"target": [
".pop.p-6.rounded-2xl:nth-child(1) > .text-2xl.text-pine.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.67 (foreground color: #7fa396, background color: #fdfbf7, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#aeb0a9",
"bgColor": "#fdfbf7",
"contrastRatio": 2.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-6 shadow-card pop\" style=\"animation-delay:.0s\">\n <p class=\"font-display text-2xl font-semibold text-pine\">Barnaby</p>\n <p class=\"mt-1 text-sm text-ink/65\">\"Son of consolation\" \u2014 a name for a steadfast, soulful companion.</p>\n </div>",
"target": [
".pop.p-6.rounded-2xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.12 (foreground color: #aeb0a9, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-ink/65\">\"Son of consolation\" \u2014 a name for a steadfast, soulful companion.</p>",
"target": [
".pop.p-6.rounded-2xl:nth-child(1) > .text-ink\\/65.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.12 (foreground color: #aeb0a9, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7fa396",
"bgColor": "#fdfbf7",
"contrastRatio": 2.67,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-6 shadow-card pop\" style=\"animation-delay:.08s\">\n <p class=\"font-display text-2xl font-semibold text-pine\">Duchess</p>\n <p class=\"mt-1 text-sm text-ink/65\">For the pup who runs the household with quiet, regal authority.</p>\n </div>",
"target": [
".pop.p-6.rounded-2xl:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.67 (foreground color: #7fa396, background color: #fdfbf7, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-2xl font-semibold text-pine\">Duchess</p>",
"target": [
".pop.p-6.rounded-2xl:nth-child(2) > .text-2xl.text-pine.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.67 (foreground color: #7fa396, background color: #fdfbf7, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#aeb0a9",
"bgColor": "#fdfbf7",
"contrastRatio": 2.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-6 shadow-card pop\" style=\"animation-delay:.08s\">\n <p class=\"font-display text-2xl font-semibold text-pine\">Duchess</p>\n <p class=\"mt-1 text-sm text-ink/65\">For the pup who runs the household with quiet, regal authority.</p>\n </div>",
"target": [
".pop.p-6.rounded-2xl:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.12 (foreground color: #aeb0a9, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-ink/65\">For the pup who runs the household with quiet, regal authority.</p>",
"target": [
".pop.p-6.rounded-2xl:nth-child(2) > .text-ink\\/65.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.12 (foreground color: #aeb0a9, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7fa396",
"bgColor": "#fdfbf7",
"contrastRatio": 2.67,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-6 shadow-card pop\" style=\"animation-delay:.16s\">\n <p class=\"font-display text-2xl font-semibold text-pine\">Winston</p>\n <p class=\"mt-1 text-sm text-ink/65\">Resolute, brave, and unmistakably distinguished at the dog park.</p>\n </div>",
"target": [
".pop.p-6.rounded-2xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.67 (foreground color: #7fa396, background color: #fdfbf7, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-2xl font-semibold text-pine\">Winston</p>",
"target": [
".pop.p-6.rounded-2xl:nth-child(3) > .text-2xl.text-pine.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.67 (foreground color: #7fa396, background color: #fdfbf7, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#aeb0a9",
"bgColor": "#fdfbf7",
"contrastRatio": 2.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-6 shadow-card pop\" style=\"animation-delay:.16s\">\n <p class=\"font-display text-2xl font-semibold text-pine\">Winston</p>\n <p class=\"mt-1 text-sm text-ink/65\">Resolute, brave, and unmistakably distinguished at the dog park.</p>\n </div>",
"target": [
".pop.p-6.rounded-2xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.12 (foreground color: #aeb0a9, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-ink/65\">Resolute, brave, and unmistakably distinguished at the dog park.</p>",
"target": [
".pop.p-6.rounded-2xl:nth-child(3) > .text-ink\\/65.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.12 (foreground color: #aeb0a9, background color: #fdfbf7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e948c",
"bgColor": "#fbf6ed",
"contrastRatio": 2.88,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-cream text-ink rounded-3xl shadow-soft p-8 lg:p-10 h-full flex flex-col\">",
"target": [
".lg\\:p-10"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.88 (foreground color: #8e948c, background color: #fbf6ed, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-center text-xs text-ink/50\">Free for everyone, adopter or not. Se habla espa\u00f1ol.</p>",
"target": [
".text-center.text-ink\\/50.mt-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.88 (foreground color: #8e948c, background color: #fbf6ed, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9552f",
"bgColor": "#ffffff",
"contrastRatio": 4.35,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-[2.5rem] shadow-soft overflow-hidden grid lg:grid-cols-2\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".rounded-\\[2\\.5rem\\].lg\\:grid-cols-2.shadow-soft"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #c9552f, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs font-bold uppercase text-coral-dark\">Interactive \u00b7 Just for fun</p>",
"target": [
".sm\\:p-12.p-8:nth-child(1) > .eyebrow.text-coral-dark.font-bold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #c9552f, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-[2.5rem] shadow-soft overflow-hidden grid lg:grid-cols-2\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".rounded-\\[2\\.5rem\\].lg\\:grid-cols-2.shadow-soft"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs font-bold uppercase tracking-widest text-ink/50 mb-2.5\">Who are we naming?</p>",
"target": [
".mt-8:nth-child(4) > .mb-2\\.5.tracking-widest.text-ink\\/50"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-[2.5rem] shadow-soft overflow-hidden grid lg:grid-cols-2\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".rounded-\\[2\\.5rem\\].lg\\:grid-cols-2.shadow-soft"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs font-bold uppercase tracking-widest text-ink/50 mb-2.5\">What's their vibe?</p>",
"target": [
".mt-6 > .mb-2\\.5.tracking-widest.text-ink\\/50"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#578b7d",
"bgColor": "#ebf4ee",
"contrastRatio": 3.46,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-pine-soft/70 p-8 sm:p-12 flex flex-col justify-center\">",
"target": [
".bg-pine-soft\\/70"
]
},
{
"html": "<div class=\"bg-white rounded-[2.5rem] shadow-soft overflow-hidden grid lg:grid-cols-2\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".rounded-\\[2\\.5rem\\].lg\\:grid-cols-2.shadow-soft"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #578b7d, background color: #ebf4ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-6 text-xs text-pine/70\">Tip: live with a name for three days before committing. If the pet answers to it, it's theirs.</p>",
"target": [
".text-pine\\/70"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #578b7d, background color: #ebf4ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d78163",
"bgColor": "#fbf6ed",
"contrastRatio": 2.7,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute top-4 left-4 bg-cream rounded-2xl px-4 py-2 text-center shadow-card\">\n <p class=\"text-xs font-bold uppercase text-coral-dark\">Jun</p>\n <p class=\"font-display text-2xl font-semibold leading-none\">14</p>\n </div>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(1) > .relative > .top-4.left-4.text-center"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.7 (foreground color: #d78163, background color: #fbf6ed, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs font-bold uppercase text-coral-dark\">Jun</p>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(1) > .relative > .top-4.left-4.text-center > .text-coral-dark.font-bold.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.7 (foreground color: #d78163, background color: #fbf6ed, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#558878",
"contrastRatio": 3.76,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#donate\" class=\"mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">RSVP Free</a>",
"target": [
".hover\\:bg-pine-dark.bg-pine[href$=\"#donate\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #fbf6ed, background color: #558878, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#donate\" class=\"mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">RSVP Free</a>",
"target": [
".hover\\:bg-pine-dark.bg-pine[href$=\"#donate\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #fbf6ed, background color: #558878, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d78163",
"bgColor": "#fbf6ed",
"contrastRatio": 2.7,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute top-4 left-4 bg-cream rounded-2xl px-4 py-2 text-center shadow-card\">\n <p class=\"text-xs font-bold uppercase text-coral-dark\">Jun</p>\n <p class=\"font-display text-2xl font-semibold leading-none\">18</p>\n </div>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(2) > .relative > .top-4.left-4.text-center"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.7 (foreground color: #d78163, background color: #fbf6ed, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs font-bold uppercase text-coral-dark\">Jun</p>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(2) > .relative > .top-4.left-4.text-center > .text-coral-dark.font-bold.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.7 (foreground color: #d78163, background color: #fbf6ed, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#558878",
"contrastRatio": 3.76,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#veterinary\" class=\"mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Reserve a Spot</a>",
"target": [
".hover\\:bg-pine-dark.bg-pine[href$=\"#veterinary\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #fbf6ed, background color: #558878, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#veterinary\" class=\"mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">Reserve a Spot</a>",
"target": [
".hover\\:bg-pine-dark.bg-pine[href$=\"#veterinary\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #fbf6ed, background color: #558878, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d78163",
"bgColor": "#fbf6ed",
"contrastRatio": 2.7,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute top-4 left-4 bg-cream rounded-2xl px-4 py-2 text-center shadow-card\">\n <p class=\"text-xs font-bold uppercase text-coral-dark\">Jun</p>\n <p class=\"font-display text-2xl font-semibold leading-none\">22</p>\n </div>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(3) > .relative > .top-4.left-4.text-center"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.7 (foreground color: #d78163, background color: #fbf6ed, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs font-bold uppercase text-coral-dark\">Jun</p>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(3) > .relative > .top-4.left-4.text-center > .text-coral-dark.font-bold.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.7 (foreground color: #d78163, background color: #fbf6ed, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf6ed",
"bgColor": "#558878",
"contrastRatio": 3.76,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#behavior\" class=\"mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">RSVP Free</a>",
"target": [
".hover\\:bg-pine-dark.bg-pine[href$=\"#behavior\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #fbf6ed, background color: #558878, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#behavior\" class=\"mt-4 inline-flex items-center justify-center bg-pine hover:bg-pine-dark text-cream text-sm font-semibold px-4 py-2.5 rounded-full transition\">RSVP Free</a>",
"target": [
".hover\\:bg-pine-dark.bg-pine[href$=\"#behavior\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #fbf6ed, background color: #558878, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-3xl shadow-card overflow-hidden flex flex-col hover:-translate-y-1.5 transition-transform\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate3d(0px, 0px, 0px);\">",
"target": [
".md\\:grid-cols-3.gap-6.grid > .hover\\:-translate-y-1\\.5.transition-transform:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-xs font-semibold text-ink/50 uppercase tracking-wider\">Sat \u00b7 10am\u20133pm \u00b7 Meadowbrook Park</p>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(1) > .p-6.grow.flex-col > .tracking-wider.mt-1.text-ink\\/50"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-3xl shadow-card overflow-hidden flex flex-col hover:-translate-y-1.5 transition-transform\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate3d(0px, 0px, 0px);\">",
"target": [
".md\\:grid-cols-3.gap-6.grid > .hover\\:-translate-y-1\\.5.transition-transform:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-xs font-semibold text-ink/50 uppercase tracking-wider\">Wed \u00b7 9am\u20131pm \u00b7 Pawhaven Clinic</p>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(2) > .p-6.grow.flex-col > .tracking-wider.mt-1.text-ink\\/50"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-3xl shadow-card overflow-hidden flex flex-col hover:-translate-y-1.5 transition-transform\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate3d(0px, 0px, 0px);\">",
"target": [
".md\\:grid-cols-3.gap-6.grid > .hover\\:-translate-y-1\\.5.transition-transform:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-xs font-semibold text-ink/50 uppercase tracking-wider\">Sun \u00b7 11am\u201312:30pm \u00b7 Training Barn</p>",
"target": [
".hover\\:-translate-y-1\\.5.transition-transform:nth-child(3) > .p-6.grow.flex-col > .tracking-wider.mt-1.text-ink\\/50"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828982",
"bgColor": "#fdfbf7",
"contrastRatio": 3.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl shadow-card overflow-hidden\">",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>How does the adoption process work?</span>",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(1) > .faq-btn.py-5.text-left > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828982",
"bgColor": "#fdfbf7",
"contrastRatio": 3.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl shadow-card overflow-hidden\">",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>What's included in the adoption fee?</span>",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(2) > .faq-btn.py-5.text-left > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828982",
"bgColor": "#fdfbf7",
"contrastRatio": 3.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl shadow-card overflow-hidden\">",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>What vaccination schedule does my new puppy or kitten need?</span>",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(3) > .faq-btn.py-5.text-left > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828982",
"bgColor": "#fdfbf7",
"contrastRatio": 3.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl shadow-card overflow-hidden\">",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>What should I do in an after-hours emergency?</span>",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(4) > .faq-btn.py-5.text-left > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#828982",
"bgColor": "#fdfbf7",
"contrastRatio": 3.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item bg-white rounded-2xl shadow-card overflow-hidden\">",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Can I foster before committing to adoption?</span>",
"target": [
".faq-item.overflow-hidden.rounded-2xl:nth-child(5) > .faq-btn.py-5.text-left > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #828982, background color: #fdfbf7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf7",
"bgColor": "#f0ae93",
"contrastRatio": 1.81,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"tel:+15035550147\" class=\"inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-bold px-8 py-4 rounded-full shadow-soft transition\">",
"target": [
".px-8.hover\\:bg-coral-dark[href=\"tel:+15035550147\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.81 (foreground color: #fdfbf7, background color: #f0ae93, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15035550147\" class=\"inline-flex items-center gap-2 bg-coral hover:bg-coral-dark text-white font-bold px-8 py-4 rounded-full shadow-soft transition\">",
"target": [
".px-8.hover\\:bg-coral-dark[href=\"tel:+15035550147\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.81 (foreground color: #fdfbf7, background color: #f0ae93, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"bg-white rounded-3xl p-8 shadow-card flex flex-col\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
"figure:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, 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\">Adopted Luna, 2023</p>",
"target": [
"figure:nth-child(1) > figcaption > div > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"bg-white rounded-3xl p-8 shadow-card flex flex-col\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
"figure:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, 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\">Clinic client since 2021</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 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#909895",
"bgColor": "#ffffff",
"contrastRatio": 2.95,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"bg-white rounded-3xl p-8 shadow-card flex flex-col\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
"figure:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #909895, background color: #ffffff, 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\">Adopted Biscuit, 2024</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 2.95 (foreground color: #909895, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2a93b",
"bgColor": "#175e4c",
"contrastRatio": 3.83,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.83 (foreground color: #f2a93b, background color: #175e4c, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs font-bold uppercase text-amber\">Give Back</p>",
"target": [
".gap-10.lg\\:grid-cols-2.relative > div > .eyebrow.font-bold.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.83 (foreground color: #f2a93b, background color: #175e4c, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2a93b",
"bgColor": "#2e6e5e",
"contrastRatio": 2.99,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$35</p>\n <p class=\"mt-1 text-sm text-cream/80\">covers a full wellness exam for a newly rescued stray</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(1)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, 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 font-semibold text-amber\">$35</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(1) > .text-3xl.text-amber.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d2dbd0",
"bgColor": "#2e6e5e",
"contrastRatio": 4.21,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$35</p>\n <p class=\"mt-1 text-sm text-cream/80\">covers a full wellness exam for a newly rescued stray</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(1)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #d2dbd0, background color: #2e6e5e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-cream/80\">covers a full wellness exam for a newly rescued stray</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(1) > .text-cream\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #d2dbd0, background color: #2e6e5e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2a93b",
"bgColor": "#2e6e5e",
"contrastRatio": 2.99,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$75</p>\n <p class=\"mt-1 text-sm text-cream/80\">funds a complete puppy or kitten vaccination series</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(2)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, 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 font-semibold text-amber\">$75</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(2) > .text-3xl.text-amber.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2a93b",
"bgColor": "#2e6e5e",
"contrastRatio": 2.99,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$150</p>\n <p class=\"mt-1 text-sm text-cream/80\">sponsors a spay/neuter surgery that prevents a litter</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(3)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, 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 font-semibold text-amber\">$150</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(3) > .text-3xl.text-amber.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d2dbd0",
"bgColor": "#2e6e5e",
"contrastRatio": 4.21,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$150</p>\n <p class=\"mt-1 text-sm text-cream/80\">sponsors a spay/neuter surgery that prevents a litter</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(3)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #d2dbd0, background color: #2e6e5e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-cream/80\">sponsors a spay/neuter surgery that prevents a litter</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(3) > .text-cream\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #d2dbd0, background color: #2e6e5e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2a93b",
"bgColor": "#2e6e5e",
"contrastRatio": 2.99,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$500</p>\n <p class=\"mt-1 text-sm text-cream/80\">underwrites an emergency rescue intake, start to finish</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(4)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, 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 font-semibold text-amber\">$500</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(4) > .text-3xl.text-amber.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #f2a93b, background color: #2e6e5e, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d2dbd0",
"bgColor": "#2e6e5e",
"contrastRatio": 4.21,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"bg-white/10 border border-white/15 rounded-2xl p-5 backdrop-blur-sm\">\n <p class=\"font-display text-3xl font-semibold text-amber\">$500</p>\n <p class=\"mt-1 text-sm text-cream/80\">underwrites an emergency rescue intake, start to finish</p>\n </li>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(4)"
]
},
{
"html": "<div class=\"relative overflow-hidden bg-pine rounded-[2.5rem] shadow-soft px-8 sm:px-14 py-14 lg:py-20 text-cream\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">",
"target": [
".sm\\:px-14"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #d2dbd0, background color: #2e6e5e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-cream/80\">underwrites an emergency rescue intake, start to finish</p>",
"target": [
".p-5.backdrop-blur-sm.border-white\\/15:nth-child(4) > .text-cream\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #d2dbd0, background color: #2e6e5e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "definition-list",
"impact": "serious",
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-dlitems",
"data": {
"values": "div > span"
},
"relatedNodes": [
{
"html": "<span class=\"w-2 h-2 rounded-full bg-coral\"></span>",
"target": [
".w-2.h-2.bg-coral"
]
},
{
"html": "<span><strong class=\"text-ink font-semibold\">12,400+</strong> adoptions</span>",
"target": [
"dl > .gap-2.items-center.flex:nth-child(1) > span:nth-child(2)"
]
},
{
"html": "<span class=\"w-2 h-2 rounded-full bg-amber\"></span>",
"target": [
".w-2.h-2.bg-amber"
]
},
{
"html": "<span><strong class=\"text-ink font-semibold\">96%</strong> live-release rate</span>",
"target": [
".gap-2.items-center.flex:nth-child(2) > span:nth-child(2)"
]
},
{
"html": "<span class=\"w-2 h-2 rounded-full bg-pine\"></span>",
"target": [
".w-2.h-2.bg-pine"
]
},
{
"html": "<span><strong class=\"text-ink font-semibold\">AAHA-aligned</strong> clinic care</span>",
"target": [
".gap-2.items-center.flex:nth-child(3) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "dl element has direct children that are not allowed: div > span"
}
],
"impact": "serious",
"html": "<dl class=\"mt-10 flex flex-wrap gap-x-8 gap-y-3 text-sm text-ink/70\">",
"target": [
"dl"
],
"failureSummary": "Fix all of the following:\n dl element has direct children that are not allowed: div > span"
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"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": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 1.03,
"requiredContrastRatio": 3,
"nodeColor": "#f2a93b",
"parentColor": "#babbb3"
},
"relatedNodes": [
{
"html": "<p>",
"target": [
"address > p:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.03:1 with the surrounding text. (Minimum contrast is 3:1, link text: #f2a93b, surrounding text: #babbb3)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<p>",
"target": [
"address > p:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15035550199\" class=\"text-amber hover:underline\">(503) 555-0199</a>",
"target": [
".hover\\:underline"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.03:1 with the surrounding text. (Minimum contrast is 3:1, link text: #f2a93b, surrounding text: #babbb3)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9662
},
{
"y": 576,
"height": 9662
},
{
"y": 1152,
"height": 9662
},
{
"y": 1728,
"height": 9662
},
{
"y": 2304,
"height": 9662
},
{
"y": 2880,
"height": 9662
},
{
"y": 3456,
"height": 9662
},
{
"y": 4032,
"height": 9662
},
{
"y": 4608,
"height": 9662
},
{
"y": 5184,
"height": 9662
},
{
"y": 5760,
"height": 9662
},
{
"y": 6336,
"height": 9662
},
{
"y": 6912,
"height": 9662
},
{
"y": 7488,
"height": 9662
},
{
"y": 8064,
"height": 9662
},
{
"y": 8640,
"height": 9662
},
{
"y": 8942,
"height": 9662
}
],
"scans": 18,
"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 "Pets" 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: "Pets"
- Description: Pet care, adoption, veterinary resources, training, and animal rescue information.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Pets" 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: "Events", "Adopt a Pet", "Veterinary".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Pets" category. Consider themes similar to: "Behavior Help", "Emergency Info", "Pet Safety".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "wellness exam", "rescue", "vaccination schedule".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Find Pet", "Make Appointment", "Donate".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "pet name generator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "adoption success stories", "event calendar", "training advice".
- **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.