github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-07-16 14:39:31 -05:00
Code Issues 2.4k Packages Projects Releases 129 Wiki Activity

[GH-ISSUE #15787] feat: Improve global UI color contrast for WCAG 2.1 AA compliance #104666

New Issue
Closed
opened 2026-05-18 02:23:39 -05:00 by GiteaMirror · 2 comments
GiteaMirror commented 2026-05-18 02:23:39 -05:00
Owner
Copy Link

Originally created by @christinajoslin on GitHub (Jul 16, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/15787

Check Existing Issues

  • I have searched the existing issues and discussions.

Problem Description

Although the latest 7/14 release updates High Contrast Mode (Beta), it does not update font colors across the entire application. This leaves much of the UI with contrast levels that do no meet WCAG 2.1 AA standards for accessibility.

Desired Solution you'd like

This issue proposes applying global color updates that improve contrast across both Light and Dark themes and not just within the High Contrast Mode setting. While many styles were tested and adjusted in a local branch, the following color pairings represent the most frequent and impactful contrast improvements:

Normal Text

  • Light Theme

    • text-gray-800 (#1F2937) on bg-white (#FFFFFF)
    • text-gray-800 (#1F2937) on bg-gray-100 (#F3F4F6)

  • Dark Theme

    • text-white (#FFFFFF) on bg-black (#000000)
    • text-gray-100 (#F3F4F6) on bg-black (#000000)
    • text-gray-100 (#F3F4F6) on bg-gray-850 (#1A1E2E)

Large Text / UI Components

  • Light Theme

    • text-gray-500 (#6B7280) on bg-white (#FFFFFF)

  • Dark Theme

    • text-gray-500 (#6B7280) on bg-black (#000000)

Contrast ratios were verified using the WebAIM Contrast Checker:

  • Normal text: ≥ 4.5:1
  • Large text / UI components: ≥ 3:1

Alternatives Considered

While these updates could be added to the existing High Contrast Mode, the preferred approach is to apply them by default to ensure the application is accessible without requiring users to toggle a setting.

Additional Context

Image

Image
Originally created by @christinajoslin on GitHub (Jul 16, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/15787 ### Check Existing Issues - [x] I have searched the existing issues and discussions. ### Problem Description Although the latest 7/14 release updates **High Contrast Mode (Beta)**, it does not update font colors across the entire application. This leaves much of the UI with contrast levels that do no meet WCAG 2.1 AA standards for accessibility. ### Desired Solution you'd like This issue proposes **applying global color updates** that improve contrast across both Light and Dark themes and not just within the High Contrast Mode setting. While many styles were tested and adjusted in a local branch, the following color pairings represent the most frequent and impactful contrast improvements: #### Normal Text - **Light Theme** - `text-gray-800` (`#1F2937`) on `bg-white` (`#FFFFFF`) - `text-gray-800` (`#1F2937`) on `bg-gray-100` (`#F3F4F6`) - **Dark Theme** - `text-white` (`#FFFFFF`) on `bg-black` (`#000000`) - `text-gray-100` (`#F3F4F6`) on `bg-black` (`#000000`) - `text-gray-100` (`#F3F4F6`) on `bg-gray-850` (`#1A1E2E`) #### Large Text / UI Components - **Light Theme** - `text-gray-500` (`#6B7280`) on `bg-white` (`#FFFFFF`) - **Dark Theme** - `text-gray-500` (`#6B7280`) on `bg-black` (`#000000`) Contrast ratios were verified using the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/): - **Normal text:** ≥ 4.5:1 - **Large text / UI components:** ≥ 3:1 ### Alternatives Considered While these updates could be added to the existing High Contrast Mode, the preferred approach is to apply them by default to ensure the application is accessible without requiring users to toggle a setting. ### Additional Context <img width="426" height="703" alt="Image" src="https://github.com/user-attachments/assets/9d089439-17fe-4174-b5fb-3e1d7d6eceb8" /> <br><br> <img width="429" height="618" alt="Image" src="https://github.com/user-attachments/assets/6d50106b-ac06-40f7-9fd4-1172f704737a" />
GiteaMirror commented 2026-05-18 02:23:41 -05:00
Author
Owner
Copy Link

@Classic298 commented on GitHub (Jul 16, 2025):

Damn why does this look comfortable to look at (the high contrast mode)

Like it

<!-- gh-comment-id:3079458327 --> @Classic298 commented on GitHub (Jul 16, 2025): Damn why does this look comfortable to look at (the high contrast mode) Like it
GiteaMirror commented 2026-05-18 02:23:42 -05:00
Author
Owner
Copy Link

@tjbck commented on GitHub (Jul 16, 2025):

We're receptive to high contrast mode PRs, PR welcome!

<!-- gh-comment-id:3079588167 --> @tjbck commented on GitHub (Jul 16, 2025): We're receptive to high contrast mode PRs, PR welcome!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#104666
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?