Bootstrap Academy username

Morpheus

Description

Task Description

This sub-ticket is focused on designing and implementing accessible themes to ensure that all users, regardless of their visual abilities, can comfortably use the platform. The themes will allow users to select a design that suits their needs by adjusting the following elements:

• Font size
• Background color
• Text color

Requirements

We will provide a set of predefined themes that users can select from in their /account settings. These themes must adhere to accessibility guidelines, including WCAG 2.1 AA standards, to ensure sufficient contrast, legibility, and usability.

Available Themes for now - please correct me, if this is not enough, since I'm no expert

1. Default Theme (Base Theme)

• as is

2. Inclusive Accessibility Theme

• Font Size: 20px
• Background Color: #FFFFFF (White)
• Text Color: #000000 (Black)
• Font Family: Use a dyslexia-friendly font such as OpenDyslexic or Lexend.
• High Contrast Elements: Ensure all interactive elements (buttons, links, etc.) have a contrast ratio of at least 7:1 against the background.
• Increased Line Spacing: Set line-height to 1.6 for better readability.
• Increased Letter Spacing: Slightly increase letter-spacing to improve readability for dyslexic users.
• Focus Indicators: Use a prominent focus outline color (#FFD700 - Gold) to ensure clear visibility during keyboard navigation.