cancel
Showing results for 
Search instead for 
Did you mean: 

Hyperlink Color Contrast

Hyperlink Color Contrast

(2)

The default color for hyperlinks is not compliant in terms of accessibility and WCAG 2.0 AA.

I understand users can use High Contrast mode, but I think accessibility should be the default, not the exception.

The Canvas Accessibility Checker flags color contrast errors for content creators. Why shouldn't the default Canvas styles be held to the same standards?  

21 Comments
Community Member

Aaand, this request was made on the anniversary of the ADA so I think it should get super special consideration. Smiley Wink 

Navigator

Today, your institution's (or sub-account's) Canvas admins can use Global Branding in the Theme Editor to change that default link color. A few years ago when that feature first became available, I did that for our business school, taking care to follow WebAIM: WCAG 2.0 and Link Colors advice when adapting our branding to our sub-account's theme.

Community Member

There are always workarounds, but I'd like to see Instructure be consistent in their support for and application of accessible practices. I'm also at the system level and not in a position to define our college's themes. Smiley Happy 

Community Team
Community Team

Thank you for sharing this idea, jess.thompson@sbctc.edu‌. As Jess noted in the idea description, the high contrast UI is currently a feature option that can be enabled at the user level, and instructions for turning it on are in What feature options can I enable in my user account as a student? 

Learner II

I agree with Jess! By making the low contrast colors available it sends a tacit message that they're okay to use. We have enough work to do to help profs remediate non-Canvas course content - I'd love it if the LMS was one layer we didn't have to worry about. I'd like to have my cake and eat it too: have Canvas content be visible/perceivable AND also still have my institution's branding be visible (which can't happen with high-contrast mode turned on).

Explorer

I really appreciate this request. I also appreciate the community’s attempt to help with workarounds. 

BUT it’s important to know that sometimes people use the workaround to reduce accessibility (like changing link color to #D00000... not that I know anywhere that would do that) and high contrast mode can be used to mitigate those choices.

But frequently users don’t know that setting is there. Why would you want your users to struggle, when the solution is such low-hanging fruit? AND it brings the system closer to standards compliance. How is that not a win-win? People shouldn’t have to hunt for access. We protect privacy by default—we don’t require students to opt into their FERPA protections. Accessibility should also be the default setting. 

And, because I’m a details geek: the problem is that the link text color does not have a contrast ratio of 4.5:1 with the background color on content pages. The ratio is only 3.52:1. It does meet the 3:1 contrast requirement for differentiation from surrounding text (that’s 3.27:1). Link text also fails to meet contrast ratio requirements for the background on index pages that use the striped table style. Contrast ratio is only 3.23:1 on the gray stripes. 

Colors used:

link=#008ee2

standard text=#2d3b45

background=#fff

table stripe=#f5f5f5 

Checked with WebAIM color contrast checker

Explorer III

I concur with all those requesting that compliant font color be used.  Workarounds are helpful but since this is a pretty basic item and will help all users (go UDL!), it should be changed by Instructure asap.  Easy (I think!) and great for improving the overall accessibility of Canvas.

Community Member

I agree with Tom, Jess and the others who suggest compliance proactively, making WCAG compliance the default, not the exception. That said, I note the color of links in this forum, are not compliant. The red of the Canvas logo, when placed on a white background, fails 3 of the 4 WCAG standards. 

Foreground:#D54F37
Background:#FFFFFF

The contrast ratio is: 4.2:1

Text failed at Level AA
Text failed at Level AAA
Large text passed at Level AA
Large text failed at Level AAA

(Results from Colour Contrast Analyser)

Explorer

Whoops.

Community Member

Frustrating to see this hasn't gotten anywhere...

We updated the color in our theme settings. But I couldn't help but notice this note in the theme editor: 

Important note: Educational institutions have an obligation to make their content as accessible as possible. Instructure recommends at least a 3:1 text-to-background-color ratio to keep your text readable. Easily test your contrast ratios with the WebAIM Color Contrast Checker.

Heh...