contrast on progress bar

[Alex-Jordan]

A school has reported an accessibility contrast issue with the progress bar:

There are five background colors here to deal with, and it's possible for each of them to be adjacent to each of the others. It's not possible for them all to have contrast ratio above 3:1 in every combination. So I think more should be done with borders/outlines to separate the blocks.

Additionally, while hovering reveals a tooltip that explains each block, I wonder if more should be done. It's not clear to me how a non-mouse-user gets the explanation of what each block is saying. There are aria labels, but it's not clear how a user would naturally get to those and read them. It seems that we presently rely on the mouse-driven tooltip and the implication of the color to convey what these blocks mean.

[drgrice1]

Yes, the progress bar is not properly accessible. Reach block should probably be focusable, and the tooltips activate by focus.

[drgrice1]

I want to correct you on the color count. There are actually only four colors. There is the background color, the correct color, the incorrect color, and the in progress color. I think you are counting the unattempted progress as a fifth color, but that is transparent and is intended to be the same as the background color. So it is not in reality another color. I also think that the background/unattempted color does not necessarily need to have a 3:1 contrast ratio with the surrounding region. That is assuming that the border on the progress bar is sufficient.

This means that theoretically it is possible to find four colors that satisfy the 3:1 ratio with each other. I am not certain that this can be done with a green, yellow, red, and grayish color that work well for this though.

[Alex-Jordan]

The screenshot I posted has five background colors. The unattempted is #dddddd iirc, and it's not the same as the #f8f9fa that is the ambient background surrounding the progress bar.

I also think that the background/unattempted color does not necessarily need to have a 3:1 contrast ratio with the surrounding region.

Maybe. But there is something there that carries information. Even if it is 100% unattempted. So the situation to think about is a very colorblind user who doesn't see that there is a bar of any sort there when it's all unattempted. But I agree that using borders better can remedy this. We don't need 3:1 ratios with background colors at all if strong borders work to separate the regions. Note that with the nav links, we were dealing with an outline that dynamically came and went with focus, so there the background color ratios were more important.

This means that theoretically it is possible to find four colors that satisfy the 3:1 ratio

I don't think that's possible with even 4 colors. My understanding (which you can correct me on) is the contrast ratios are not exactly multiplicative, but they are close. If A:B is 3, and B:C is 3, then A:C is either close to 9 or close to 1. So you'd want to engineer it to be about 9. And then for C:D to be 3 you would either need B:D to be about 1 (but we don't want that) or A:D to be about 27. But the upper limit is 21 so it's impossible.

I am not certain that this can be done with a green, yellow, red, and grayish color that work well for this though.

I'm pretty sure even trying to get 3 colors to play together, it's not possible when one is some sort of yellow and another is like the overall background color (#f8f9fa). I tried this earlier today and I had to make the yellow so dark that it no longer resembled anything like "stoplight yellow" that was originally intended to be, between red and green.

[Alex-Jordan]

Unless I'm wrong about the above, I would like to start calling this "the WCAG four color theorem".

On Tue, Aug 8, 2023, 6:17 PM Glenn Rice @.***> wrote:

I want to correct you on the color count. There are actually only four colors. There is the background color, the correct color, the incorrect color, and the in progress color. I think you are counting the unattempted progress as a fifth color, but that is transparent and is intended to be the same as the background color. So it is not in reality another color. I also think that the background/unattempted color does not necessarily need to have a 3:1 contrast ratio with the surrounding region. That is assuming that the border on the progress bar is sufficient.

This means that theoretically it is possible to find four colors that satisfy the 3:1 ratio with each other. I am not certain that this can be done with a green, yellow, red, and grayish color that work well for this though.

— Reply to this email directly, view it on GitHub https://protect2.fireeye.com/v1/url?k=31323334-501d2dca-3132feb7-454455534531-1faa61147182419f&q=1&e=415c2104-615f-4431-bdf3-e7e1a872ae28&u=https%3A%2F%2Fgithub.com%2Fopenwebwork%2Fwebwork2%2Fissues%2F2164%23issuecomment-1670517204, or unsubscribe https://protect2.fireeye.com/v1/url?k=31323334-501d2dca-3132feb7-454455534531-15302d633bf047bd&q=1&e=415c2104-615f-4431-bdf3-e7e1a872ae28&u=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FABEDOAHPKJJB6MHKCQQVOV3XULQJJANCNFSM6AAAAAA3JFDADE . You are receiving this because you authored the thread.Message ID: @.***>

[Alex-Jordan]

One WCAG standard asks for a ratio of 3:1 and there is another that asks for 7:1. When you are balancing both of these with three colors, it's very frustrating. You basically have to use white and black, with something that is perfectly balanced at the 21:3:1 sweet spot in between. And probably relying on an automated checker's rounding error to make it happy. I wish the "7" in the standards had a little more give to it, like 6.5.

Note there are also standards that are 4.5:1, and 4.5^2 = 20.25, leaving a little wiggle room for three colors that all need a 4.5:1 ratio with each other.

[drgrice1]

I meant that there are four colors in the progress bar itself, and as I said with a sufficient border around the progress bar, you don't need to count what you are calling the ambient color. Although, It seems that you can't achieve four colors that pairwise have a 3:1 ratio.

[pstaabp]

This has been fixed.