Leantime Accessibility Improvements

Visual comparison of current issues and proposed fixes

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 StatusBacklogOn Hold Contrast: 2.3:1 - FAILS WCAG AA

AFTER (Proposed)

Grey StatusBacklogOn 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 ProgressWarningPending Contrast: 2.1:1 - FAILS WCAG AA

AFTER (Match Default Theme)

In ProgressWarningPending 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)

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

AFTER (Proposed)

DesignUX 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)

Dashboard

Projects (hover)

Timesheets

Reports

Hover text: 3.4:1 - Hard to read

AFTER (Proposed)

Dashboard

Projects (hover)

Timesheets

Reports

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)

LT

Leantime Core Development

MK

Marketing Website Design Team

CL

Client Portal Q1 2024

Hover state text nearly invisible (3.4:1)

AFTER (Proposed)

LT

Leantime Core Development

MK

Marketing Website Design Team

CL

Client Portal Q1 2024

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 ModeDark Mode

Light Mode - Before & After

BEFORE

Dark RedRedGreenDark GreenYellowBlueDark BluePurplePink ❌BrownGrey ❌Dark Grey

AFTER

Dark RedRedGreenDark GreenYellowBlue ✓Dark BluePurplePink ✓BrownGrey ✓Dark Grey

Dark Mode - Before & After

BEFORE

Dark RedRedGreen ⚠️Dark GreenYellowBlueDark BluePurplePinkBrownGreyDark Grey

AFTER

Dark RedRedGreen ✓Dark GreenYellowBlueDark BluePurplePinkBrownGreyDark 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

Button

2px dark outline
Hard to see on dark bg

OPTION A: Bold

Button

3px + glow
Maximum visibility

OPTION B: Soft ★

Button

2px bright, no glow
Recommended

OPTION C: Minimal

Button

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

Button

OPTION A: Bold

Button

OPTION B: Soft ★

Button

OPTION C: Minimal

Button

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%