Accessible design in New UI

Accessible design in New UI

I just switched to the new UI and found a number of issues related to accessibility with dark background on.

As a start, I am not visually impaired, however, the bright lime green default color washes out all white text.  Therefore, any item highlighted becomes effectively invisible. 

Here is a quick analysis by ChatGPT.

Uploaded Image for Color Analysis

Initial Findings:

  1. Color Use: The interface heavily uses dark backgrounds with bright highlights, such as cyan, green, and purple.
  2. Text Contrast: White text on black and bright-colored backgrounds is prevalent.

IDEA & Accessibility Feedback:

  1. Color Contrast:

    • Strength: The white text on a dark background generally provides good contrast and readability.
    • Concerns:
      • White text over the purple background in the main "Welcome" section might not meet WCAG contrast ratio standards (4.5:1 for small text). A further analysis is required to verify.
      • Sidebar icons and text use light green and white, which could be difficult for users with visual impairments (e.g., low vision or color blindness).
  2. Icons and Visuals:

    • Icons are distinguishable due to their size and sharpness.
    • Consider adding text alternatives or tooltips for users relying on screen readers.
  3. General Accessibility:

    • Ensure that the cyan highlights (like the Onboarding button) are not the only indicator of selection—use a border or underline for better clarity.
    • Test interactivity with assistive technologies to confirm that focus states are clear.

Recommendations:

  1. Improve Color Contrast:

    • Adjust the purple shade in the "Features to explore" section to achieve a higher contrast ratio.
    • Check the sidebar's green elements to ensure they meet contrast accessibility requirements.
  2. Visual Indicators:

    • Use visual markers (e.g., bold, underline) in addition to color for active or selected items.
  3. Further Testing:

    • Conduct a full WCAG 2.1 Level AA contrast check to identify other potential contrast issues.