Repository navigation
[a11y] Filter labels across Studio, Knowledge, Agents and Skills fail WCAG AA contrast #44600
Description
Self Checks
- I have read the Contributing Guide and Language Policy.
- This is only for bug report, if you would like to ask a question, please head to Discussions.
- I have searched for existing issues search for existing issues, including closed ones.
- I confirm that I am using English to submit this report, otherwise it will be closed.
- 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
- Please do not modify this template :) and fill in all the required fields.
Dify version
1.18.0 release candidate, commit 720d8489453cea51c26382e43f4b8ba7024a6dca, tested during #44546 release verification on 2026-10-23.
Cloud or Self Hosted
Self Hosted (Source). Production web build on macOS with Chromium; isolated local API/worker and Docker infrastructure.
Steps to reproduce
- Sign in to a workspace with Studio apps, Classic Knowledge, Agent v2, and Skills enabled.
- Use the default light appearance and open Studio.
- Wait for page loading and control animations to settle; inspect the Types, Tags, Creators, and Sort by labels.
- Repeat on Knowledge, Agents, and Skills, checking the labels listed below.
- Run an axe
color-contrastscan after the page is stable, or inspect the computed text/background colors. The enabled filter controls use#676f83text over#e8ebf0.
Reproduced with a 1440×900 viewport. These failures persisted in separate settled-page scans, rather than only during dialog animations.
Reproduction video — 11.2 seconds
bug-03-filter-contrast.mp4
The recording shows the four affected pages. The measurements below establish the contrast failure.
✔️ Expected Behavior
Normal-size text on enabled filter controls should meet the WCAG AA minimum contrast ratio of 4.5:1 against its effective background.
❌ Actual Behavior
The affected labels are 13 px, normal weight, and have 4.2:1 contrast. The stable axe scan reports a serious color-contrast violation.
| Page | Affected labels | Failing nodes |
|---|---|---|
| Studio | Types, Tags, Creators, Sort by | 4 |
| Knowledge | Tags, Creators | 2 |
| Agents | Created by me, Sort by | 2 |
| Skills | Tags | 1 |
Representative diagnostic:
Element has insufficient color contrast of 4.2
foreground color: #676f83
background color: #e8ebf0
font size: 9.8pt (13px)
font weight: normal
Expected contrast ratio of 4.5:1
Representative affected markup:
<span class="text-text-tertiary">Types</span>
<span class="min-w-0 grow truncate text-[13px] leading-4.5 text-text-tertiary">Tags</span>
<span class="p-1 system-sm-regular text-text-tertiary">Created by me</span>The controls function, but their labels do not meet the contrast threshold. This report groups the shared contrast problem across the four surfaces.
Related: #44563 already covers accessibility/layout problems in the shared Sort control, including its prefix contrast. This issue additionally records the non-Sort Types, Tags, Creators, and Created by me labels across the four pages.
This was verified on the stated release candidate; it does not establish which commit introduced the contrast problem.
Activity
dosubot commentedon Oct 23, 2026
The Tags failures have a shared implementation point: Studio, Knowledge, and Skills all use
features/tag-management/components/tag-filter.tsx, so they should not need three separate label fixes. [1] [2] [3]That component applies
text-text-tertiaryto both the placeholder and the selected tag name, and separately to the+Ncount. Regression scans should therefore include selected and multi-selected Tags states, not just the empty filter. [4]Agents’ “Created by me” label sets its own
text-text-tertiaryinsideRosterCreatedByMeFilter, so changing the shared Tags component alone will not cover it. [5]To reply, just mention @dosu.
Share context across your team and agents. Try Dosu.
[-][Bug] Filter labels across Studio, Knowledge, Agents and Skills fail WCAG AA contrast[/-][+][a11y] Filter labels across Studio, Knowledge, Agents and Skills fail WCAG AA contrast[/+]