Axe reports 4 color violations on the program dashboard, but they are all because it can't understand the svg / text interactions with the progress circle on the right. (The circle that says X/ Y Earned Certificates.)
There is no actual problem right now, as long as the circle is not blue (the completed color) and the text in the circle does not overlap the circle. This does not happen currently in English or Spanish, but it might happen as we enable more languages.
Initial assessment: nothing is wrong in the common case. Axe is having difficulties automatically detecting contrast because we have an svg "underneath" the text (the progress circle surrounding the text).
If the circle is blue (completed vs gray incomplete) and the text is long enough to overlap, we do have a problem (there isn't an overlap in English, but I haven't tested Spanish and god help us if we ever add German).
Looking into what we should do for such a case...
Tested on Spanish, and there's no real overlap either (a few pixels at worst).
I think the real fix might be some CSS to either flip the color of the text that overlaps or make the circle larger if it needs to be to fit the translated text.
But since it doesn't actually affect either English or Spanish and the fix isn't trivial, I'm going to re-title & re-describe this bug, then unassign myself and put it back into the backlog to look at other bugs.
We need more context on the correct way to handle this issue.
Please review with UX team () and .
I am closing because I am not getting the described errors with the Lighthouse accessibility audit. Also I don't see the issue at https://courses.edx.org/dashboard/programs/98b7344e-cd44-4a99-9542-09dfdb11d31b/