conda-forge / conda-forge/conda-forge.github.io

Status page: revisit color scheme for the progress bar in the migration details page

Open
#2,275 2 comments 0 reactions 0 assignees View on GitHub
conda-forge.org Discussion
Dominant language
JavaScript
Stars
170
Forks
320
Avg merge
2d 10h
Merged PRs (30d)
5

Description

_Originally posted by @h-vetinari in https://github.com/conda-forge/conda-forge.github.io/issues/2137#issuecomment-2294793097_

> * [x] [Migration details table colors, tooltips and visibility](https://github.com/conda-forge/conda-forge.github.io/pull/2090#issuecomment-1979121823):
> * [x] https://github.com/conda-forge/conda-forge.github.io/pull/2239

I commented on the colour scheme changes [elsewhere](https://github.com/conda-forge/conda-forge.github.io/issues/2243#issuecomment-2266260967) already, but I wanted to reiterate here that I don't see how various shades of grey are more accessible (e.g. for vision-impaired people)

![image](https://github.com/user-attachments/assets/fd06e3b2-e141-4da2-9971-08ff1cb5410f)

than the much more distinct colours we had previously

![354756997-6d79c9d2-59fc-4e6d-95b4-9a36c788633c](https://github.com/user-attachments/assets/e22f510a-8c1e-4a81-bd11-10be17ae4e57)

I picked the colours from the bubbles[^1] and [put them](https://www.aremycolorsaccessible.com/palette?colors=%23648e66&colors=%238d949e&colors=%23ccd0d5&colors=%23ebedf0&colors=%23ffb74d&colors=%23fb565b) into aremycolorsaccessible (found by random googling as I was looking for turbo, more below), and while I can't vouch for their methodology, it has pretty clear opinions:

![image](https://github.com/user-attachments/assets/3d0338ff-fa0a-48db-9535-4aba8682f7c9)

I'm certainly not a web developer, nor expert for UX and accessibility, but I do remember how google [developed](https://research.google/blog/turbo-an-improved-rainbow-colormap-for-visualization/) a new colormap (called "turbo") with accessibility in mind a while back, and naïvely taking that as a reference would seem like we should if anything have starker colours rather than more subdued ones:

![image](https://github.com/user-attachments/assets/a67b000e-5a36-45a7-a89e-6b1682d47dcf)

Taking the values {0.0, 0.2, 0.4, 0.6, 0.8, 1.0} from their colourmap would give us 6 colours that are in some ways ideally spaced across various metrics (e.g. across various vision impairments, for details see article).

[^1]: because it's hard for me to tell where e.g. `--ifm-color-emphasis-600` is actually defined; some colours are defined in [`custom.css`](https://github.com/conda-forge/conda-forge.github.io/blob/main/src/css/custom.css), but not all

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.