[improve] Accessibility: link color #CC0000 fails WCAG AA contrast on dark background

[github-actions]

Problem

The site's link color (--NCSU_Wolfpack_Red: #CC0000) fails the WCAG 2.1 AA contrast requirement for normal-sized text when rendered on the dark gradient background.

The page background cycles through dark shades — the darkest being #0a0a0a. Against that shade, #CC0000 has a contrast ratio of approximately 3.5:1, well below the required 4.5:1 for AA compliance on body text.

#CC0000 on #0a0a0a ≈ 3.5:1   ❌ (AA requires 4.5:1)
#CC0000 on #0d1117 ≈ 3.4:1   ❌

Affected rule in src/App.vue:

#app a:any-link,
#app a:-webkit-any-link {
  color: var(--NCSU_Wolfpack_Red);   /* #CC0000 — fails AA contrast */
}

Files to change

• src/App.vue — update --NCSU_Wolfpack_Red usage for link color (or introduce a brighter dedicated --link-color variable)

Impact

• Links are hard to read for users with low vision or in bright-light environments
• Fails WCAG 2.1 SC 1.4.3 (Contrast Minimum, Level AA)
• Affects all links across the entire site (social, skills, inline text links)

Suggested fix

Introduce a brighter accessible link color variable while keeping the existing NCSU brand colors for decorative/background uses. A red like #FF4040 achieves roughly 5.6:1 on #0a0a0a, passing AA:

:root {
  /* existing brand colors unchanged */
  --NCSU_Wolfpack_Red: #CC0000;
  /* accessible link color — brighter variant for text on dark bg */
  --link-color: #FF4040;
}

#app a:any-link,
#app a:-webkit-any-link {
  color: var(--link-color);
  border-bottom: 1.5px solid var(--link-color);
}

Verification

• npm run build passes
• npm run lint passes
• All link colors pass WCAG AA (≥ 4.5:1) on the darkest gradient shade #0a0a0a
• NCSU brand colors retained for non-link decorative elements (h1 background, borders, etc.)
• No existing PR conflicts

Generated by Continuous Improvement — Portfolio Site · ● 14.5M · ◷