Hyperlink Color Contrast

[jess_thompson]

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?  

[jess_thompson]

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

[RobDitto]

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.

[jess_thompson]

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.  

[Stef_retired]

Thank you for sharing this idea,  @jess_thompson ‌. 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? 

[jenn_stevens]

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).

[tom_gibbons]

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

[arovner]

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.

[jlcrow]

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)

[tom_gibbons]

Whoops.

[jess_thompson]

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... 

[kmeeusen]

Hi  @jess_thompson  

I think that all of us who responded in here share your frustrations!

When I talk about accessibility at our school, I remind folks that it is not a destination; but rather, a journey. Unfortunately that journey could be shortened, and the path made much more comfortable if the corporate world made it a priority.  It is an uphill battle to get my faculty to make sure that their content in Canvas is accessible, and the hill is much steeper when the platform still includes accessibility issues.

Kelley

[eholtmann]

A link color which would meet the WCAG requirements is #6161ff = rgb(97,97 255). This has a contrast ratio of 4.5:1 against white, and 4.66:1 against black (so it is distinguishable from normal text).

[michelle_steven]

Recently, while answering some questions for an instructional designer on UDOIT, it came to my attention that red native to Canvas does not meet WCAG 2.0 standards. The ID ran UDOIT in a faculty member's course to find 300+ errors for insufficient contrast ratio because they had selected Canvas red as a text color on their pages. I found the same true when I checked the text color with #DesignPLUS. The ID was going through the tedious process of fixing them all. It seems that the native color selections in Canvas should be built with accessibility in mind.

[jlcrow]

Sadly, this is not a surprise. We have known this for quite a long time. Note the thread above.

Instead of the instructor changing the links individually, perhaps the institution's Canvas administrators chould change the Canvas theme to a red or another color that is WCAG 2.x compliant? Doing so would update all the links in the instructor's course as well as any other course using the default color.

[michelle_steven]

Thanks, John. Unfortunately, this was an instructor who was using the color for text emphasis only. I don't think there would be an easy way to change it in this case? 

[jlcrow]

Not if the link color was set by a style tage like this: style="color: #df2d27;". If that is the case, then yes, each would need to be updated seperately. If the institution uses designplus, you can use a custom css on each page. It will take a second or two to show once the page is rendered but then you can modify the base color of all links on the page by redefining the CSS for links. I know you know this but it may be useful for others.

[jbeyer1]

Hi Stephanie,

As a person that sometimes needs accommodations, I do not really love that the response is to hold the students responsible for making Canvas accessible rather then just saying, "Hey, this is a great idea and we are on it!!". The system not working correctly.  It shouldn't take a feature idea to correct.  

[arovner]

And red, regardless of contrast, is about the worst color choice possible for emphasis in a class (w/o other ways of making that emphasis clear) as it's one of the most common colors that folks with color-blindness have trouble seeing.

[jonesn16]

I really like the comparison you make between accessibility and privacy. ADA compliance parallels FERPA compliance, yet FERPA compliance is taken as given. Interesting.

[syonker]

Inaccessible link text is unacceptable. Forcing students to make changes on their side is NOT okay, and there is no good reason for individual instructors or even individual schools to have to remediate a Canvas feature for accessibility. Making the problem worse, the Canvas course menu is the very same inaccessible blue. Can an individual instructor change that? It seems that changing the theme color for the whole institution is the best workaround, but I wholeheartedly agree that we should not need workarounds. It is always better to design for accessibility than remediate for it.