Current page is not visually indicated when users are using High Contrast Mode

This also happens on the top of the page of courses.edx.org/dashboard

Bolding would work, but I imagine we'd want the same user experience as the normal view here. (That is, in high contrast, there's only an underline underneath the current tab, not under the others.) I'll look into why that's not happening here.

that would be happening because all states have a bottom border, although you may not see it because its the same color as the background. Windows High Contrast mode overrides the author defined styles/colors for things like font foreground and background colors, and border colors. It happens to be choosing the exact same color for both the focus/hover, and default states. Authors (we devs) have no control over what color the OS chooses in HC mode, so another solution has to be found. One that would work, but could be a PITA to implement (not difficult, just annoying) would be to remove the bottom border and replace it with a bottom margin of the same thickness of the current border for the default states, then the focus/hover/active states could set that margin to 0 and implement the colored bottom border.

It looks like moving from a pattern of:

a {
border-bottom: solid transparent;
&.active {
border-bottom-color: $color;
}
}

to:

a {
border-bottom: hidden $color;
&.active {
border-bottom-style: solid;
}
}

will fix this. (i.e. instead of toggling the color, toggle the border style)

It seems aggressive of the browser to adjust a transparent color. But it seems to be doing so.

I'm not sure border-bottom: hidden is going to do what we want here since, according to the spec, hidden is the same as none, which has a width of zero. That means we have to replace that width somewhere else in the box model, like the margin, as I recommended above. Without replacing the width somewhere else, the text of the active/hover/focused state will be that much higher in the box, making the text appear to jump up on hover/focus/active.