Insufficient contrast throughout GitLab.com
Summary
There are a number of places in which text content does not meet WCAG AA minimum contrast requirements as per https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Steps to reproduce
-
In the top Navigation bar after logging in as someone with issues listed, the number of issues does not have enough contrast, especially with the navigation bar collapsed. (I do not currently have any listed issues, so cannot provide a screenshot)
-
In Project->Cycle Analytics: the labels for New Issues, Commits, and Deploys don’t have enough contrast.
-
In Repository->Branches: the default and protected badges do not have enough contrast.
-
In Repository->Tags, the “Protected” badges do not have enough contrast.
-
In Repository->Branches->Active, Stale, and All; “Prev” - which is disabled - doesn’t have enough contrast. Nor does the number in the highlighted value (in the case shown, ‘1’), and the (disabled?) ellipse between the 5 and the Next. I imagine this is the case anywhere this pattern is used.
-
In Repository->Contributors, the email addresses listed next to the graphs do not have enough contrast.
-
In Repository->Compare, the Compare button doesn’t have enough contrast.
-
In Issues->List, Issues->Service Desk, and Issues->Milestones, the numbers of issues for the unselected tab (default “Closed” and “All”) do not have enough contrast.
-
Location as above, but referring to the "New Issue" button, badges throughout the page, and the empty comments icon indicator:
-
In Issues->Boards, the “In Dev” and “In Review” badges do not have enough contrast.
-
In CI/CD->Pipelines, the number values of non-selected pipelines, the Latest badges, and the Passed statuses do not have enough contrast.
-
In CI/CD->Jobs, the counts of the non-selected jobs, the badges for docker & gitlab-org, the Passed states, and the times in the table do not have enough contrast.
-
In CI/CD->Schedules: The non-active numbers for “Active” and ”Inactive” do not have enough contrast. (I cannot open this page for some reason, so I cannot provide a screenshot)
What is the current bug behavior?
Insufficient contrast to fulfill WCAG 2.0 AA compliance of less than 4.5:1 for text against background.
What is the expected correct behavior?
For WCAG 2.0 AA compliance, most text requires a contrast ratio of at least 4.5:1.
Possible fixes
(If you can, link to the line of code that might be responsible for the problem)