Leantime Accessibility Improvements Mockup

Issue #1: Grey Status Label CRITICAL - 2.3:1 ratio

White text on grey background fails WCAG AA requirements (needs 4.5:1 minimum)

BEFORE (Current)

Grey Status Backlog On Hold

Contrast: 2.3:1 - FAILS WCAG AA

AFTER (Proposed)

Grey Status Backlog On Hold

Contrast: 7.0:1 - PASSES WCAG AAA

Issue #2: Yellow Status Label (Minimal Theme) CRITICAL - 2.1:1 ratio

Minimal theme uses white text on yellow, while Default theme correctly uses black

BEFORE (Minimal Theme)

In Progress Warning Pending

Contrast: 2.1:1 - FAILS WCAG AA

AFTER (Match Default Theme)

In Progress Warning Pending

Contrast: 8.5:1 - PASSES WCAG AAA

Issue #3: Pink Status Label MARGINAL - 3.1:1 ratio

White text on pink background barely fails WCAG AA for normal text

BEFORE (Current)

Design UX Review

Contrast: 3.1:1 - FAILS WCAG AA (needs 4.5:1)

AFTER (Proposed)

Design UX Review

Contrast: 5.5:1 - PASSES WCAG AA

Issue #4: Dark Mode Menu Hover Color MARGINAL - 3.4:1 ratio

The accent color (teal/blue) used for hover states is too dark against dark backgrounds

BEFORE (Current Dark Mode)

Hover text: 3.4:1 - Hard to read

AFTER (Proposed)

Hover text: 6.8:1 - Clear and readable

Issue #5: Dark Mode Project Dropdown YOUR REPORTED ISSUE

This is the menu dropdown issue you mentioned - project names are hard to read

BEFORE (Current)

Hover state text nearly invisible (3.4:1)

AFTER (Proposed)

All text clearly readable (11:1+)

Issue #6: Grayscale2 Color Scheme in Dark Mode CRITICAL - 1.4:1 ratio

The "Grayscale Reverse" color scheme uses nearly invisible colors in dark mode

BEFORE (Current Grayscale2 Dark)

This primary text is nearly invisible!

Links are impossible to see

Secondary text is fine though.

Primary: 1.4:1 - Completely unreadable!

AFTER (Proposed Fix)

Primary text is now clearly visible

Links are easy to find and read

Secondary text remains the same.

Primary: 5.0:1 - Meets WCAG AA

Complete Status Label Comparison

Comparing all status labels before and after fixes

Light Mode - Before & After

BEFORE

Dark Red Red Green Dark Green Yellow Blue Dark Blue Purple Pink ❌ Brown Grey ❌ Dark Grey

AFTER

Dark Red Red Green Dark Green Yellow Blue ✓ Dark Blue Purple Pink ✓ Brown Grey ✓ Dark Grey

Dark Mode - Before & After

BEFORE

Dark Red Red Green ⚠️ Dark Green Yellow Blue Dark Blue Purple Pink Brown Grey Dark Grey

AFTER

Dark Red Red Green ✓ Dark Green Yellow Blue Dark Blue Purple Pink Brown Grey Dark Grey

Neurodiverse Accessibility Enhancements

Additional improvements for ADHD, Autism, and Dyslexia

Focus on: Clear visual feedback, consistent patterns, reduced cognitive load, and readable text formatting.

Enhanced Focus Indicators (ADHD/Autism)

Three options ranging from bold to subtle:

CURRENT

2px dark outline
Hard to see on dark bg

OPTION A: Bold

3px + glow
Maximum visibility

OPTION B: Soft ★

2px bright, no glow
Recommended

OPTION C: Minimal

2px semi-transparent
For "Less" theme

Recommendation: Use Option B (Soft) as the default for the "More" theme, and Option C (Minimal) for the "Less" theme. This maintains accessibility while respecting the visual simplicity of each theme.

Light Mode Comparison

CURRENT

OPTION A: Bold

OPTION B: Soft ★

OPTION C: Minimal

Text Readability (Dyslexia)

BEFORE (Current)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line height: 1.5 | Letter spacing: 0 | No max-width | Justified text

AFTER (Dyslexia-Friendly)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line height: 1.8 | Letter spacing: 0.03em | Max-width: 65ch | Left-aligned

Summary of Changes

Issue	Current	Proposed	Impact
Grey label text	#fff (2.3:1)	#000 (7.0:1)	+204%
Yellow label (minimal)	#fff (2.1:1)	#000 (8.5:1)	+305%
Pink label text	#fff (3.1:1)	#000 (5.5:1)	+77%
Dark mode hover	#0052a3 (3.4:1)	#66b3ff (6.8:1)	+100%
Grayscale2 primary (dark)	#4a4a4a (1.4:1)	#a0a0a0 (5.0:1)	+257%