From bd2e293aa6bae74d9dd735dc2bf105dffe9979bd Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <7050295+marcleblanc2@users.noreply.github.com>
Date: Thu, 17 Sep 2026 02:50:39 -0600
Subject: [PATCH 1/2] a11y: Fix text colour contrast below WCAG AA

axe-core color-contrast violations (serious), with the ratio on the
page background before and after:

- Bold text in light mode: vermilion-08 #FF7867 (2.5:1) to a new
  vermilion-05 #B80000 (6.8:1). Dark mode keeps vermilion-08 (7.7:1)
- Active breadcrumb, TOC entry and sidebar link (link.light token):
  vermilion-07 #F34E3F (3.4:1) to vermilion-06 #DA251B (4.8:1)
- Breadcrumb links in dark mode: gray-500 (4.3:1) to gray-400 (8.2:1)
- Search button placeholder in dark mode: slate-500 (4.2:1) to
  slate-400 (7.8:1)
- Search shortcut hint: slate-400 (2.5:1) to slate-500 (4.7:1) in
  light mode, slate-600 (2.6:1) to slate-400 (7.8:1) in dark mode

Also corrects the link token comments, which said Teal for Vermilion
values.

Amp-Thread-ID: https://ampcode.com/threads/T-01a0ae7e-ae2c-7423-be36-eb9c5884b1e0
Co-authored-by: Amp <amp@ampcode.com>
---
 src/components/Breadcrumbs.tsx                      | 4 ++--
 src/components/Prose.tsx                            | 2 +-
 src/components/search/docsearch/DocSearchButton.tsx | 4 ++--
 tailwind.config.ts                                  | 5 +++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 83012438e..2d2d10952 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -45,7 +45,7 @@ export function Breadcrumbs({path}: {path: string[]}) {
 					<div>
 						<Link
 							href={prependVersion('/')}
-							className="text-sm font-medium text-gray-500 hover:text-link-light dark:hover:text-link"
+							className="text-sm font-medium text-gray-500 hover:text-link-light dark:text-gray-400 dark:hover:text-link"
 						>
 							Docs
 						</Link>
@@ -64,7 +64,7 @@ export function Breadcrumbs({path}: {path: string[]}) {
 									'ml-4 text-sm font-medium',
 									index === path.length - 1
 										? 'text-link-light hover:underline dark:text-link'
-										: 'text-gray-500 hover:text-link-light dark:hover:text-link'
+										: 'text-gray-500 hover:text-link-light dark:text-gray-400 dark:hover:text-link'
 								)}
 							>
 								{slug}
diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx
index 3f1b8eef6..8e13fdb52 100644
--- a/src/components/Prose.tsx
+++ b/src/components/Prose.tsx
@@ -31,7 +31,7 @@ export function Prose<T extends React.ElementType = 'div'>({
 				//table head alignment
 				'prose-th:table-cell',
 				// Strong
-				'prose-strong:text-vermilion-08 dark:prose-strong:text-vermilion-08',
+				'prose-strong:text-vermilion-05 dark:prose-strong:text-vermilion-08',
 				// Inline code block
 				'prose-code:before:content-none prose-code:after:content-none',
 				// Details blocks
diff --git a/src/components/search/docsearch/DocSearchButton.tsx b/src/components/search/docsearch/DocSearchButton.tsx
index 9dccfeaed..092be7731 100644
--- a/src/components/search/docsearch/DocSearchButton.tsx
+++ b/src/components/search/docsearch/DocSearchButton.tsx
@@ -40,12 +40,12 @@ export const DocSearchButton = React.forwardRef<
 				<div className="mt-1 flex items-center justify-center rounded-lg md:hidden">
 					<SearchIcon className="h-6 w-6 text-slate-400" />
 				</div>
-				<span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-500">
+				<span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400">
 					Search docs...
 				</span>
 
 				{modifierKey && (
-					<kbd className="ml-auto hidden font-medium text-slate-400 md:block dark:text-slate-600">
+					<kbd className="ml-auto hidden font-medium text-slate-500 dark:text-slate-400 md:block">
 						<kbd className="font-sans">{modifierKey}</kbd>
 						<kbd className="font-sans">K</kbd>
 					</kbd>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 882f51f71..0f876e89f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -37,6 +37,7 @@ export default {
 				'00': '#060000',
 				'01': '#200302',
 				'02': '#410604',
+				'05': '#B80000', // 6.7:1 on white, WCAG AA text
 				'07': '#F34E3F', // Hero color
 				'08': '#FF7867',
 				'11': '#FFF3F0'
@@ -64,8 +65,8 @@ export default {
 			'dark-bg': '#060000', // Vermilion-00
 			'light-bg': '#fffcfc',
 			link: {
-				light: '#F34E3F', // Teal-07
-				DEFAULT: '#FF7867' // Teal-08
+				light: '#DA251B', // Vermilion-06, 4.8:1 on light-bg
+				DEFAULT: '#FF7867' // Vermilion-08
 			},
 			'link-underline': '#606060', // Teal-02
 			'link-underline-light': '#EAFCFF', // Teal-11

From 1779a371e2af063c62e1064d938620bbcdc7975f Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <7050295+marcleblanc2@users.noreply.github.com>
Date: Thu, 17 Sep 2026 03:08:23 -0600
Subject: [PATCH 2/2] a11y: Add WCAG to the spelling allow list

Amp-Thread-ID: https://ampcode.com/threads/T-01a0ae7e-ae2c-7423-be36-eb9c5884b1e0
Co-authored-by: Amp <amp@ampcode.com>
---
 cspell-allow-list.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cspell-allow-list.txt b/cspell-allow-list.txt
index 13256d9ac..73fb24a78 100644
--- a/cspell-allow-list.txt
+++ b/cspell-allow-list.txt
@@ -592,6 +592,7 @@ VHDL
 Viktor
 vscodesourcegraph
 waitlist
+WCAG
 Weaveworks
 winsize
 workspacesin