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 Coach
Community Coach

Hi jess.thompson@sbctc.edu 

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

Community Member

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

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.

Insufficient color contrast ratio warning in DesignPLUS

Community Member

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.

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? 

Community Member

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.

Learner II

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.  

Explorer III

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.

Learner II

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

Surveyor II

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.