Links page color contrast issue with dark mode

gordon-cs / gordon-360-ui

Gordon 360 User Interface

https://360.gordon.edu

15 stars 10 forks source link

Links page color contrast issue with dark mode #2270

Closed bennettforkner closed 2 weeks ago

bennettforkner commented 4 weeks ago

The text on some pages in dark mode does not follow requirements for web accessibility (and is difficult to read aside from that). Specifically, the links on the links page are not within regulation for appropriate color contrast ratios.

The colors in question are the dark mode values for --mui-palette-link-main and --mui-palette-background-paper. --mui-palette-primary-main is also a concern, but I haven't found places where it is actively used.

Color contrast details/checker: https://webaim.org/resources/contrastchecker/?fcolor=0260AD&bcolor=151515

Luke-W-Hart commented 4 weeks ago

@bennettforkner , Isaiah Diaz (@Dopey12) and I are going to possibly have a meeting with Stephen Dagley and his team to discuss possible ways to resolve this, as changing the color of these links affects links on all pages (Links, MyProfile, Involvements, Help, About).

Let us know if you have any thoughts or questions!

Luke-W-Hart commented 3 weeks ago

The idea for now is to change the main link color to the ScottieCyan which looks like this...

Dopey12 commented 3 weeks ago

On top of that I also not that secondary color was Gordon Blue, contrast wise it didn't do too well and overall it made certain things especially on Rec-Im is difficult to see. I believe the ScottieCyan with contrast text black looks better, it is the same as white mode but I think it fits dark mode good as well.