search

danny-avila / LibreChat

Enhanced ChatGPT Clone: Features Anthropic, AWS, OpenAI, Assistants API, Azure, Groq, o1, GPT-4o, Mistral, OpenRouter, Vertex AI, Gemini, Artifacts, AI model switching, message search, langchain, DALL-E-3, ChatGPT Plugins, OpenAI Functions, Secure Multi-User System, Presets, completely open-source for self-hosting. Actively in public development.
https://librechat.ai/
MIT License
17.75k stars 2.94k forks source link

Low contrast on the toggle buttons #4162

Open derekjackson-das opened 4 days ago

derekjackson-das commented 4 days ago

Issue Description: The low contrast on the toggle buttons in the Settings modal does not meet WCAG requirements. The toggle buttons in the "off" state do not have sufficient contrast for non-text elements. WCAG requires a minimum contrast of 3:1, but the contrast ratio is currently about 1.3:1. Since the buttons are not disabled but simply "off," they should meet the requirement for better accessibility. Low-vision users might find it difficult to identify and use the controls. This issue extends to other toggle buttons and some sliders in the application.

related to #4163

WCAG Criteria: 1.4.11 Non-text Contrast - AA

Screenshot:

toggle buttons with low contrast of 1.3:1 shown in the settings menu.

Notes: This issue also occurs on other toggle buttons and some sliders across the application. Adding an outline to the toggle button or the entire control should be sufficient to meet the success criteria. For example:

improved contrast on toggle with a 1 pixel black outline around the button improved contrast on toggle with a 1 pixel black outline around the button and the control
SailFlorve commented 1 day ago

Bro, I see that you brought up a bunch of a11y standards, involving issues like focus and contrast. If I were the repo author, I’d be super annoyed—you're nitpicking too much. Plus, the interface lost some aesthetics because of the contrast requirements. I have to commend the author for being very responsible, though, because no one is actually required to follow any so-called WCGA criteria.

danny-avila commented 1 day ago

@SailFlorve I understand your concerns but I am working closely with @derekjackson-das to improve accessibility and they are doing a huge service in pointing these issues out. It is my intention to make LibreChat the most accessible AI chat app there is, because as you said, there is no strict requirement to do this and even Claude.ai and ChatGPT have these shortcomings. This ultimately aligns with the mission of LibreChat to bring “Every AI for Everyone.”

I understand the concern for aesthetics but I think we’ve made some improvements in this regard. If there’s anything specific about the aesthetics you feel has changed negatively, please let me know. I personally am still learning how to make interfaces truly accessible and WCAG compliant and we don’t have to completely compromise on style in the process.

SailFlorve commented 1 day ago

I'm worried that this might introduce a huge amount of extra complexity, bring in bugs, and potentially take a long time to troubleshoot and fix a11y issues. But you're right, it's truly meaningful for LibreChat to become the most a11y-friendly chat application. I really appreciate your efforts.