color-contrast serious
Elements must meet minimum color contrast ratio thresholds
Manual review required to confirm this issue.
nodes: 52
target .gap-2 > .font-semibold
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm font-semibold text-white">Build smarter. Move faster. Lead confidently.</p>
target h1
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h1 class="text-5xl font-bold tracking-tight text-white dark:text-white sm:text-6xl lg:text-7xl mb-6">Effective AI Built For<span class="block mt-2">Real-World Complexity</span></h1>
target .block
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<span class="block mt-2">Real-World Complexity</span>
target .text-white\/90
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mt-6 text-lg leading-8 text-white/90 dark:text-white/90 max-w-3xl mx-auto">Spruce is reshaping the way organizations approach AI by meeting them where they are. We help clients integrate AI with scalable, trustworthy, and mission-aligned solutions that deliver measurable value now.</p>
target .dark\:bg-black.sm\:py-32.py-24:nth-child(2) > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-16.max-w-2xl.text-center > .bg-orange-100.dark\:bg-orange-900\/50.inline-block
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="inline-block px-4 py-2 rounded-full bg-orange-100 dark:bg-orange-900/50 text-sm font-semibold text-orange-600 dark:text-orange-400 mb-4">WHAT WE OFFER</p>
target .dark\:bg-black.sm\:py-32.py-24:nth-child(2) > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-16.max-w-2xl.text-center > h2
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h2 class="text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 sm:text-5xl">Spruce AI Services</h2>
target a[href$="ai-advisory"] > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">AI Advisory</h3>
target .dark\:bg-neutral-900.flex-col.shadow-xl:nth-child(2) > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">AI Solutions Development</h3>
target .dark\:bg-neutral-900.flex-col.shadow-xl:nth-child(3) > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">AI-Driven Engineering</h3>
target a[href$="cloud-services"] > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">Cloud Services</h3>
target .dark\:bg-neutral-900.flex-col.shadow-xl:nth-child(5) > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">Cybersecurity Services</h3>
target .dark\:bg-neutral-900.flex-col.shadow-xl:nth-child(6) > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">Data Engineering & Analytics</h3>
target .dark\:bg-neutral-900.flex-col.shadow-xl:nth-child(7) > .h-64.overflow-hidden.relative > .bottom-0.left-0.right-0 > .min-h-\[3\.5rem\].items-end.text-xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-xl font-bold text-white min-h-[3.5rem] flex items-end">AI Staffing Solutions</h3>
target .dark\:bg-black.sm\:py-32.py-24:nth-child(2) > .max-w-7xl.sm\:px-6.lg\:px-8 > .mt-12.text-center > .hover\:text-orange-700.dark\:hover\:text-orange-300.text-base
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<a class="inline-flex items-center text-base font-semibold text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300 transition-colors group" href="/services">
target div:nth-child(2) > .bg-orange-100.dark\:bg-orange-900\/50.inline-block
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="inline-block px-4 py-2 rounded-full bg-orange-100 dark:bg-orange-900/50 text-sm font-semibold text-orange-600 dark:text-orange-400 mb-4">WHO WE ARE</p>
target div:nth-child(2) > h2
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h2 class="text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 sm:text-5xl mb-6">Your Partner for AI Success</h2>
target .leading-8.mb-8.text-neutral-700
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-lg leading-8 text-neutral-700 dark:text-neutral-300 mb-8">
target .items-start.p-4.bg-white\/60:nth-child(1) > .w-12.h-12.p-2 > .text-xl
Fix any of the following:
Element content contains only non-text characters
HTML snippet
<span class="text-xl text-white font-bold">✓</span>
target .items-start.p-4.bg-white\/60:nth-child(1) > div:nth-child(2) > .mb-1.text-neutral-900.dark\:text-neutral-100
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="font-bold text-neutral-900 dark:text-neutral-100 mb-1">Built for Compliance</h3>
target .items-start.p-4.bg-white\/60:nth-child(1) > div:nth-child(2) > .dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm text-neutral-600 dark:text-neutral-400">Security and regulatory requirements integrated from day one</p>
target .items-start.p-4.bg-white\/60:nth-child(2) > .w-12.h-12.p-2 > .text-xl
Fix any of the following:
Element content contains only non-text characters
HTML snippet
<span class="text-xl text-white font-bold">✓</span>
target .items-start.p-4.bg-white\/60:nth-child(2) > div:nth-child(2) > .mb-1.text-neutral-900.dark\:text-neutral-100
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="font-bold text-neutral-900 dark:text-neutral-100 mb-1">End-to-End Delivery</h3>
target .items-start.p-4.bg-white\/60:nth-child(2) > div:nth-child(2) > .dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm text-neutral-600 dark:text-neutral-400">From strategy and prototyping to deployment and optimization</p>
target .items-start.p-4.bg-white\/60:nth-child(3) > .w-12.h-12.p-2 > .text-xl
Fix any of the following:
Element content contains only non-text characters
HTML snippet
<span class="text-xl text-white font-bold">✓</span>
target .items-start.p-4.bg-white\/60:nth-child(3) > div:nth-child(2) > .mb-1.text-neutral-900.dark\:text-neutral-100
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="font-bold text-neutral-900 dark:text-neutral-100 mb-1">Expert Teams</h3>
target .items-start.p-4.bg-white\/60:nth-child(3) > div:nth-child(2) > .dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm text-neutral-600 dark:text-neutral-400">AI engineers, data scientists, and industry specialists working together</p>
target .shadow-orange-500\/50
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<a class="inline-flex items-center rounded-xl bg-gradient-to-r from-orange-600 to-red-600 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-orange-500/50 hover:shadow-xl hover:shadow-orange-500/50 transition-all duration-300 hover:scale-105" href="/services">
target .text-center.group:nth-child(1) > .text-6xl.mb-3.group-hover\:scale-110
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-6xl font-bold text-white mb-3 group-hover:scale-110 transition-transform duration-300">500+</div>
target .text-center.group:nth-child(1) > .text-orange-100.font-medium.text-base
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-base font-medium text-orange-100">Satisfied Clients</div>
target .text-center.group:nth-child(2) > .text-6xl.mb-3.group-hover\:scale-110
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-6xl font-bold text-white mb-3 group-hover:scale-110 transition-transform duration-300">600+</div>
target .text-center.group:nth-child(2) > .text-orange-100.font-medium.text-base
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-base font-medium text-orange-100">Finished Projects</div>
target .text-center.group:nth-child(3) > .text-6xl.mb-3.group-hover\:scale-110
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-6xl font-bold text-white mb-3 group-hover:scale-110 transition-transform duration-300">700+</div>
target .text-center.group:nth-child(3) > .text-orange-100.font-medium.text-base
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-base font-medium text-orange-100">Skilled Experts</div>
target .text-center.group:nth-child(4) > .text-6xl.mb-3.group-hover\:scale-110
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-6xl font-bold text-white mb-3 group-hover:scale-110 transition-transform duration-300">20+</div>
target .text-center.group:nth-child(4) > .text-orange-100.font-medium.text-base
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<div class="text-base font-medium text-orange-100">Years of Client Success</div>
target .to-white > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-16.max-w-2xl.text-center > .bg-orange-100.dark\:bg-orange-900\/50.inline-block
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="inline-block px-4 py-2 rounded-full bg-orange-100 dark:bg-orange-900/50 text-sm font-semibold text-orange-600 dark:text-orange-400 mb-4">HOW WE BUILD</p>
target .to-white > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-16.max-w-2xl.text-center > h2
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h2 class="text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 sm:text-5xl mb-4">AI Solutions Development Process</h2>
target .group.relative:nth-child(2) > .text-2xl.inline-flex.w-16
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-orange-500 to-red-500 text-white text-2xl font-bold shadow-lg mb-4 group-hover:scale-110 transition-transform duration-300">01</div>
target .group.relative:nth-child(2) > .group-hover\:text-orange-600.dark\:group-hover\:text-orange-400.mb-3
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Discovery & Requirements</h3>
target .group.relative:nth-child(2) > .leading-6.dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm leading-6 text-neutral-600 dark:text-neutral-400">We work with your team to understand business objectives, data landscape, and technical requirements for your AI solution.</p>
target .from-red-500.to-orange-500.text-2xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-red-500 to-orange-500 text-white text-2xl font-bold shadow-lg mb-4 group-hover:scale-110 transition-transform duration-300">02</div>
target .group.relative:nth-child(3) > .group-hover\:text-orange-600.dark\:group-hover\:text-orange-400.mb-3
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Design & Architecture</h3>
target .group.relative:nth-child(3) > .leading-6.dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm leading-6 text-neutral-600 dark:text-neutral-400">Our engineers design system architecture, select appropriate models and tools, and create prototypes to validate the approach.</p>
target .to-amber-500.text-2xl.inline-flex
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-orange-600 to-amber-500 text-white text-2xl font-bold shadow-lg mb-4 group-hover:scale-110 transition-transform duration-300">03</div>
target .group.relative:nth-child(4) > .group-hover\:text-orange-600.dark\:group-hover\:text-orange-400.mb-3
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">AI Engineering & Development</h3>
target .group.relative:nth-child(4) > .leading-6.dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm leading-6 text-neutral-600 dark:text-neutral-400">We build production systems using AI-accelerated development tools, ensuring speed, quality, and adherence to best practices.</p>
target .from-amber-500.to-orange-500.text-2xl
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 text-white text-2xl font-bold shadow-lg mb-4 group-hover:scale-110 transition-transform duration-300">04</div>
target .group.relative:nth-child(5) > .group-hover\:text-orange-600.dark\:group-hover\:text-orange-400.mb-3
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Deployment & Support</h3>
target .group.relative:nth-child(5) > .leading-6.dark\:text-neutral-400.text-neutral-600
Fix any of the following:
Element's background color could not be determined due to a background gradient
HTML snippet
<p class="text-sm leading-6 text-neutral-600 dark:text-neutral-400">Deploy to your environment, integrate with existing systems, and provide ongoing optimization and support.</p>
target .py-16.sm\:py-24.via-red-600:nth-child(8) > .max-w-7xl.sm\:px-6.lg\:px-8 > .max-w-2xl.text-center.mx-auto > h2
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<h2 class="text-4xl font-bold tracking-tight text-white sm:text-5xl mb-6">How May We Help You!</h2>
target .mt-6.leading-8.text-orange-100
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<p class="mt-6 text-lg leading-8 text-orange-100">Ready to transform your organization with AI? Let's discuss how Spruce AI can help you achieve your goals.</p>
target .gap-x-6 > .px-8.hover\:scale-105[href$="contact"]
Fix any of the following:
Element's background color could not be determined because it is overlapped by another element
HTML snippet
<a class="group relative inline-flex items-center justify-center rounded-xl bg-white px-8 py-4 text-base font-semibold text-orange-600 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105" href="/contact">