fix(a11y): Correct color contrast for WCAG AA compliance (#3797)

frontend/__tests__/unit/components/CalendarButton.test.tsx

@@ -34,14 +34,14 @@ describe('CalendarButton', () => {
     jest.clearAllMocks()
     globalThis.URL.createObjectURL = jest.fn(() => 'mock-url')
     globalThis.URL.revokeObjectURL = jest.fn()
-    ;(getIcsFileUrl as jest.Mock).mockResolvedValue(mockUrl)
+      ; (getIcsFileUrl as jest.Mock).mockResolvedValue(mockUrl)
 
     appendSpy = jest.spyOn(document.body, 'appendChild')
     createSpy = jest.spyOn(document, 'createElement')
 
-    clickSpy = jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    clickSpy = jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => { })
 
-    jest.spyOn(globalThis, 'alert').mockImplementation(() => {})
+    jest.spyOn(globalThis, 'alert').mockImplementation(() => { })
   })
 
   afterEach(() => {
@@ -121,9 +121,9 @@ describe('CalendarButton', () => {
     })
 
     it('handles errors gracefully when generation fails', async () => {
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { })
       const errorMock = new Error('Failed to generate')
-      ;(getIcsFileUrl as jest.Mock).mockRejectedValueOnce(errorMock)
+        ; (getIcsFileUrl as jest.Mock).mockRejectedValueOnce(errorMock)
 
       render(<CalendarButton event={mockEvent} />)
       const button = screen.getByRole('button')
@@ -305,13 +305,13 @@ describe('CalendarButton', () => {
             startDate: '2025-12-02',
             endDate: '2025-12-03',
           }}
-          className="text-gray-600 hover:text-gray-800 dark:text-gray-400"
+          className="text-gray-800 hover:text-gray-800 dark:text-gray-200"
           iconClassName="h-4 w-4"
         />
       )
       const button = screen.getByRole('button')
-      expect(button).toHaveClass('text-gray-600')
-      expect(button).toHaveClass('dark:text-gray-400')
+      expect(button).toHaveClass('text-gray-800')
+      expect(button).toHaveClass('dark:text-gray-200')
     })
 
     it('works in poster page context with label', () => {
@@ -358,7 +358,7 @@ describe('CalendarButton', () => {
             title: 'Very Long Event Title That Could Potentially Cause Overflow Issues',
             startDate: '2025-12-01',
           }}
-          className="flex-shrink-0 text-gray-600"
+          className="flex-shrink-0 text-gray-800"
         />
       )
       const button = screen.getByRole('button')

frontend/__tests__/unit/components/Card.test.tsx

@@ -537,18 +537,20 @@ describe('Card', () => {
     expect(titleElement).toHaveClass(
       'text-base',
       'font-semibold',
-      'text-blue-400',
-      'hover:text-blue-600',
+      'text-blue-600',
+      'hover:text-blue-800',
       'sm:text-lg',
-      'lg:text-2xl'
+      'lg:text-2xl',
+      'dark:text-blue-300',
+      'dark:hover:text-blue-400'
     )
   })
 
   it('applies correct markdown styling', () => {
     render(<Card {...baseProps} />)
 
     const markdown = screen.getByTestId('markdown')
-    expect(markdown).toHaveClass('mt-2', 'w-full', 'text-gray-600', 'dark:text-gray-300')
+    expect(markdown).toHaveClass('mt-2', 'w-full', 'text-gray-800', 'dark:text-gray-300')
   })
 
   it('filters and passes icons correctly to DisplayIcon components', () => {

frontend/__tests__/unit/components/CardDetailsPage.test.tsx

@@ -94,7 +94,7 @@ jest.mock('components/ChapterMapWrapper', () => ({
 
 jest.mock('components/HealthMetrics', () => ({
   __esModule: true,
-  default: ({ data, ...props }: { data: unknown[]; [key: string]: unknown }) => (
+  default: ({ data, ...props }: { data: unknown[];[key: string]: unknown }) => (
     <div data-testid="health-metrics" {...props}>
       Health Metrics ({data.length} items)
     </div>
@@ -262,7 +262,7 @@ jest.mock('components/RecentPullRequests', () => ({
 
 jest.mock('components/MentorshipPullRequest', () => ({
   __esModule: true,
-  default: ({ pr, ...props }: { pr: PullRequest; [key: string]: unknown }) => (
+  default: ({ pr, ...props }: { pr: PullRequest;[key: string]: unknown }) => (
     <div data-testid="pull-request-item" {...props}>
       MentorshipPullRequest: {pr.title}
     </div>
@@ -957,7 +957,7 @@ describe('CardDetailsPage', () => {
         'min-h-screen',
         'bg-white',
         'p-8',
-        'text-gray-600',
+        'text-gray-800',
         'dark:bg-[#212529]',
         'dark:text-gray-300'
       )

frontend/__tests__/unit/components/ContributionStats.test.tsx

@@ -313,7 +313,7 @@ describe('ContributionStats', () => {
 
       // Verify icons have proper styling classes
       icons.forEach((icon) => {
-        expect(icon).toHaveClass('text-gray-600', 'dark:text-gray-400')
+        expect(icon).toHaveClass('text-gray-800', 'dark:text-gray-200')
       })
 
       // Verify specific viewBox attributes for different react-icons

frontend/__tests__/unit/components/ContributorsList.test.tsx

@@ -118,7 +118,7 @@ jest.mock('components/ShowMoreButton', () => ({
       <div className="mt-4 flex justify-start">
         <button
           onClick={handleClick}
-          className="flex items-center bg-transparent px-0 text-blue-400"
+          className="flex items-center bg-transparent px-0 text-blue-600 dark:text-blue-300"
         >
           {isExpanded ? (
             <>
@@ -727,8 +727,9 @@ describe('ContributorsList Component', () => {
           'text-ellipsis',
           'whitespace-nowrap',
           'font-semibold',
-          'text-blue-400',
-          'hover:underline'
+          'text-blue-700',
+          'hover:underline',
+          'dark:text-blue-300'
         )
       }
     })

frontend/__tests__/unit/components/DisplayIcon.test.tsx

@@ -288,13 +288,13 @@ describe('DisplayIcon', () => {
     it('applies correct icon classes', () => {
       render(<DisplayIcon item="starsCount" icons={mockIcons} />)
       const icon = screen.getByTestId('font-awesome-icon')
-      expect(icon).toHaveClass('text-gray-600', 'dark:text-gray-300', 'icon-rotate')
+      expect(icon).toHaveClass('text-gray-800', 'dark:text-gray-300', 'icon-rotate')
     })
 
     it('applies correct text span classes', () => {
       render(<DisplayIcon item="license" icons={mockIcons} />)
       const textSpan = screen.getByText('MIT')
-      expect(textSpan).toHaveClass('text-gray-600', 'dark:text-gray-300')
+      expect(textSpan).toHaveClass('text-gray-800', 'dark:text-gray-300')
     })
   })
 

frontend/__tests__/unit/components/LeadersList.test.tsx

@@ -156,7 +156,7 @@ describe('LeadersList Component', () => {
     it('applies correct CSS classes to links', () => {
       render(<LeadersList entityKey="test" leaders="John Doe" />)
       const link = screen.getByTestId('leader-link')
-      expect(link).toHaveClass('text-gray-600', 'hover:underline', 'dark:text-gray-400')
+      expect(link).toHaveClass('text-gray-800', 'hover:underline', 'dark:text-gray-200')
     })
 
     it('generates correct href for each leader', () => {

frontend/__tests__/unit/components/Milestones.test.tsx

@@ -272,8 +272,8 @@ describe('Milestones', () => {
       'flex-wrap',
       'items-center',
       'text-sm',
-      'text-gray-600',
-      'dark:text-gray-400'
+      'text-gray-800',
+      'dark:text-gray-200'
     )
   })
 
@@ -285,9 +285,9 @@ describe('Milestones', () => {
       'overflow-hidden',
       'text-ellipsis',
       'whitespace-nowrap',
-      'text-gray-600',
+      'text-gray-800',
       'hover:underline',
-      'dark:text-gray-400'
+      'dark:text-gray-200'
     )
   })