From dffa8e5870d9c38f5cfda5f313b92e77f2b7315a Mon Sep 17 00:00:00 2001
From: Daniel Castro <2968031+odanieldcs@users.noreply.github.com>
Date: Sun, 11 Oct 2026 12:33:06 -0300
Subject: [PATCH] fix(a11y): meet WCAG AA contrast for text and code (ENG-153)

Light opacities and the code theme sat under 4.5:1. Move them onto existing tokens and the Shiki high-contrast themes.
---
 app/globals.css                     | 14 +++++++++++---
 app/theme/colors.css                |  7 ++++---
 components/views/about-view.tsx     | 16 ++++++++--------
 components/views/alunos-view.tsx    |  6 +++---
 components/views/blog-view.tsx      |  4 ++--
 components/views/community-view.tsx |  4 ++--
 components/views/home-view.tsx      |  4 ++--
 components/views/privacy-view.tsx   |  4 ++--
 lib/content/mdx-components.tsx      |  2 +-
 lib/content/mdx.tsx                 |  4 ++--
 10 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 93e31ac..d1f74a0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -131,10 +131,10 @@ article :where(a, strong, :not(pre) > code) {
 
 /* Shiki dual-theme (next-themes `.dark`; token colors via shiki-transformers). */
 pre.shiki {
-  --code-block-bg: color-mix(in srgb, var(--muted) 5%, var(--background));
+  --code-block-bg: color-mix(in srgb, white 65%, var(--background));
   --code-line-highlight-wash: color-mix(
     in srgb,
-    var(--code-line-highlight-fill) 22%,
+    var(--code-line-highlight-fill) 5%,
     var(--code-block-bg)
   );
   position: relative;
@@ -158,6 +158,15 @@ pre.shiki {
   padding: 2rem 0;
 }
 
+.dark pre.shiki {
+  --code-block-bg: color-mix(in srgb, var(--muted) 5%, var(--background));
+  --code-line-highlight-wash: color-mix(
+    in srgb,
+    var(--code-line-highlight-fill) 22%,
+    var(--code-block-bg)
+  );
+}
+
 pre.shiki code {
   display: block;
   min-width: 100%;
@@ -234,7 +243,6 @@ pre.shiki[data-language]::after {
   line-height: 1;
   color: var(--code-line-highlight-bar);
   text-transform: lowercase;
-  opacity: 0.7;
   content: attr(data-language);
   pointer-events: none;
   user-select: none;
diff --git a/app/theme/colors.css b/app/theme/colors.css
index bf9060a..1c00c31 100644
--- a/app/theme/colors.css
+++ b/app/theme/colors.css
@@ -9,12 +9,13 @@
   /* Reference green: 6.78:1 as text on paper. */
   --accent: oklch(0.431 0.063 167.2);
   --accent-foreground: oklch(0.975 0.008 87.5); /* 7.30:1 on accent */
-  /* Eyebrows and pillar numbers. Reference terracotta. */
-  --label: oklch(0.53 0.073 56.4); /* 4.69:1 on background */
+  /* Eyebrows and pillar numbers. Reference terracotta.
+     Light: 5.22:1 on background, 4.81:1 on foreground/4. */
+  --label: oklch(0.5 0.073 56.4);
   --trail: var(--accent);
   --trail-foreground: var(--accent-foreground);
   /* Shiki line highlight — Kent pattern: gray wash + darker bar */
-  --code-line-highlight-bar: #7a8194;
+  --code-line-highlight-bar: #5e5e5e; /* 6.13:1 on the light code block, 5.97:1 on the highlight */
   --code-line-highlight-fill: #b8bcc6;
 }
 
diff --git a/components/views/about-view.tsx b/components/views/about-view.tsx
index d646cc4..bfd2174 100644
--- a/components/views/about-view.tsx
+++ b/components/views/about-view.tsx
@@ -26,7 +26,7 @@ const bandTitleClassName = 'font-display text-3xl font-medium'
 
 const sectionTitleClassName = `mt-4 ${bandTitleClassName}`
 
-const subtitleClassName = 'mt-4 text-sm leading-relaxed text-foreground/55'
+const subtitleClassName = 'mt-4 text-sm leading-relaxed text-muted'
 
 const ctaLinkClassName = [
   'group mt-8 inline-flex items-center gap-2 text-sm font-normal text-accent',
@@ -112,7 +112,7 @@ function Intro({
           {copy.blogCta}
           <ArrowRightIcon />
         </Link>
-        <div className="mt-8 flex flex-wrap gap-x-5 gap-y-2 text-sm font-medium text-foreground/55">
+        <div className="mt-8 flex flex-wrap gap-x-5 gap-y-2 text-sm font-medium text-muted">
           {copy.pillars.map((pillar) => (
             <span key={pillar}>{pillar}</span>
           ))}
@@ -156,7 +156,7 @@ function Experience({ copy }: { copy: AboutCopy }) {
                     aria-hidden="true"
                     className="absolute -left-1.25 top-1.5 size-2.25 rounded-full bg-accent ring-4 ring-background"
                   />
-                  <p className="text-xs font-medium uppercase text-foreground/45">
+                  <p className="text-xs font-medium uppercase text-foreground/65">
                     {entry.period}
                   </p>
                   <h3 className="mt-2 font-display text-xl font-medium">
@@ -171,7 +171,7 @@ function Experience({ copy }: { copy: AboutCopy }) {
                         <span className="text-foreground/30" aria-hidden="true">
                           /
                         </span>
-                        <span className="text-foreground/55">{org.meta}</span>
+                        <span className="text-muted">{org.meta}</span>
                       </>
                     ) : null}
                   </p>
@@ -211,10 +211,10 @@ function Repertoire({ copy }: { copy: AboutCopy }) {
               <h3 className="border-b border-border pb-4 font-display text-xl font-medium">
                 {group.title}
               </h3>
-              <p className="mt-4 text-sm font-normal leading-relaxed text-foreground/60">
+              <p className="mt-4 text-sm font-normal leading-relaxed text-muted">
                 {group.description}
               </p>
-              <ul className="mt-4 flex list-none flex-wrap gap-x-4 gap-y-2 text-xs font-light text-foreground/45">
+              <ul className="mt-4 flex list-none flex-wrap gap-x-4 gap-y-2 text-xs font-light text-foreground/65">
                 {group.skills.map((skill) => (
                   <li key={skill}>{skill}</li>
                 ))}
@@ -226,7 +226,7 @@ function Repertoire({ copy }: { copy: AboutCopy }) {
           <h3 className="font-display text-xl font-medium">
             {copy.stackLabel}
           </h3>
-          <p className="mt-4 max-w-3xl text-sm leading-relaxed text-foreground/60">
+          <p className="mt-4 max-w-3xl text-sm leading-relaxed text-muted">
             {copy.stackValue}
           </p>
         </div>
@@ -265,7 +265,7 @@ function Contact({ copy }: { copy: AboutCopy }) {
         {rest.map((paragraph) => (
           <p
             key={paragraph}
-            className="mt-5 max-w-xl text-sm leading-relaxed text-foreground/60"
+            className="mt-5 max-w-xl text-sm leading-relaxed text-muted"
           >
             {paragraph}
           </p>
diff --git a/components/views/alunos-view.tsx b/components/views/alunos-view.tsx
index 128fb00..56c746e 100644
--- a/components/views/alunos-view.tsx
+++ b/components/views/alunos-view.tsx
@@ -38,7 +38,7 @@ function CertificateGroupSection({ group }: { group: CertificateGroup }) {
         <Description parts={group.description} />
       </p>
       {'emptyMessage' in group ? (
-        <p className="mt-8 text-sm leading-relaxed text-foreground/55">
+        <p className="mt-8 text-sm leading-relaxed text-muted">
           {group.emptyMessage}
         </p>
       ) : (
@@ -50,7 +50,7 @@ function CertificateGroupSection({ group }: { group: CertificateGroup }) {
                 key={certificate.number}
                 className="grid grid-cols-[9.5rem_minmax(0,1fr)] gap-3"
               >
-                <span className="font-mono text-foreground/55">
+                <span className="font-mono text-muted">
                   {certificate.number}
                 </span>
                 <span>{certificate.name}</span>
@@ -70,7 +70,7 @@ export function AlunosView() {
         <h1 className="font-display text-3xl font-medium">
           {certificatePage.title}
         </h1>
-        <p className="mt-4 text-sm leading-relaxed text-foreground/55">
+        <p className="mt-4 text-sm leading-relaxed text-muted">
           {certificatePage.intro}
         </p>
         <nav aria-label="Treinamentos e eventos" className="mt-8">
diff --git a/components/views/blog-view.tsx b/components/views/blog-view.tsx
index 5172263..b250876 100644
--- a/components/views/blog-view.tsx
+++ b/components/views/blog-view.tsx
@@ -79,7 +79,7 @@ function ListItem({
         </h2>
         <time
           dateTime={post.date}
-          className="shrink-0 text-xs font-medium uppercase tabular-nums text-foreground/45"
+          className="shrink-0 text-xs font-medium uppercase tabular-nums text-foreground/65"
         >
           {formatDate(post.date, language, { style: 'monthYear' })}
         </time>
@@ -261,7 +261,7 @@ export function BlogView({
           {copy.intro}
         </p>
         {!hasPosts ? (
-          <p className="mt-10 text-base text-foreground/60">{copy.empty}</p>
+          <p className="mt-10 text-base text-muted">{copy.empty}</p>
         ) : null}
       </Container>
       {hasPosts ? (
diff --git a/components/views/community-view.tsx b/components/views/community-view.tsx
index d1504ef..80479b1 100644
--- a/components/views/community-view.tsx
+++ b/components/views/community-view.tsx
@@ -72,7 +72,7 @@ function EntryBody({
 }) {
   return (
     <>
-      <p className="text-xs font-medium uppercase text-foreground/45">
+      <p className="text-xs font-medium uppercase text-foreground/65">
         <time dateTime={entry.date}>
           {formatDate(entry.date, language, { style: 'full' })}
         </time>
@@ -292,7 +292,7 @@ export function CommunityView({ entries }: { entries: CommunityEntryView[] }) {
           {copy.intro}
         </p>
         {groups.length === 0 ? (
-          <p className="mt-10 text-base text-foreground/60">{copy.empty}</p>
+          <p className="mt-10 text-base text-muted">{copy.empty}</p>
         ) : null}
       </Container>
       {groups.length > 0 ? (
diff --git a/components/views/home-view.tsx b/components/views/home-view.tsx
index 9a001eb..6e88adb 100644
--- a/components/views/home-view.tsx
+++ b/components/views/home-view.tsx
@@ -34,7 +34,7 @@ const articleCardClassName = [
 ].join(' ')
 
 const quietCtaClassName = [
-  'group inline-flex w-fit items-center gap-1.5 text-sm font-normal text-foreground/55',
+  'group inline-flex w-fit items-center gap-1.5 text-sm font-normal text-muted',
   'rounded-sm transition-colors hover:text-foreground',
   'outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 ].join(' ')
@@ -151,7 +151,7 @@ function RecentWriting({
               data-cta-location="home"
               data-cta-target={post.slug}
             >
-              <p className="text-xs font-semibold uppercase text-foreground/45">
+              <p className="text-xs font-semibold uppercase text-foreground/65">
                 {post.tag ? (
                   <>
                     <span>{post.tag}</span>
diff --git a/components/views/privacy-view.tsx b/components/views/privacy-view.tsx
index db42c35..acbc2f3 100644
--- a/components/views/privacy-view.tsx
+++ b/components/views/privacy-view.tsx
@@ -32,10 +32,10 @@ export function PrivacyView({ language }: { language: InterfaceLanguage }) {
         <h1 className="mt-5 max-w-2xl font-display text-display">
           {privacyPage.title}
         </h1>
-        <p className="mt-4 text-sm text-foreground/55">
+        <p className="mt-4 text-sm text-muted">
           {privacyPage.lastUpdatedLabel}
         </p>
-        <p className="mt-4 text-base text-foreground/60">{privacyPage.intro}</p>
+        <p className="mt-4 text-base text-muted">{privacyPage.intro}</p>
 
         <div className="mt-16 space-y-14">
           {privacyPage.sections.map((section) => (
diff --git a/lib/content/mdx-components.tsx b/lib/content/mdx-components.tsx
index e20b9f1..c74c23c 100644
--- a/lib/content/mdx-components.tsx
+++ b/lib/content/mdx-components.tsx
@@ -45,7 +45,7 @@ function joinClasses(...parts: (string | undefined)[]) {
 export const articleTitleClassName =
   'text-center text-post-title font-semibold mb-2 break-words'
 export const articleDateClassName =
-  'mb-content-gap block text-center text-base font-semibold text-foreground/55'
+  'mb-content-gap block text-center text-base font-semibold text-muted'
 
 function isInternalHref(href: string | undefined): href is string {
   return (
diff --git a/lib/content/mdx.tsx b/lib/content/mdx.tsx
index df9ada9..6fa1669 100644
--- a/lib/content/mdx.tsx
+++ b/lib/content/mdx.tsx
@@ -19,8 +19,8 @@ export const shikiRehypePlugin = [
   rehypeShiki,
   {
     themes: {
-      light: 'github-light',
-      dark: 'github-dark',
+      light: 'github-light-high-contrast',
+      dark: 'github-dark-high-contrast',
     },
     transformers: shikiTransformers,
   },