cancel
Showing results for 
Search instead for 
Did you mean: 
emoore50
Community Participant

System messages - color contrast insufficient (boostrap, canvas code)

Jump to solution

 

 

Hello! 

I note that Canvas system messages have insufficient color contrast for accessibility (by system messages, I mean the type that appear as alerts at the top of the screen in blue boxes, for example on group discussion boards).

Specifically, the colors are #2289c5 on #e5f2f8 or very similar. This has a contrast ratio of 3.37/1, which is considered inaccessible by all criteria except for at the WCAG AA level for large text (which doesn't apply to those messages, which are in standard size text). 

This is a system code, and it is the default HTML Boostrap coding. However, I would love to see this changed for accessibility. Doing so could be accomplished by changing the text from blue to black or at least navy... the contrast ratio should be at least 4.5/1. 

Any ideas?


Labels (1)
0 Kudos
1 Solution

Accepted Solutions
dsasaki
Instructure
Instructure

@emoore50  Thank you for sending this up. The color codes that we use for those messages are #0770A3 for the text color and #E6F1F7 for the background color which is 4.74:1 and meets WCAG AA contrast requirements. Please let us know if you have any questions.

View solution in original post

5 Replies
Stefanie
Community Team
Community Team

@emoore50  Can you confirm that you've done these tests with the High Contrast UI turned on in the user's settings?

emoore50
Community Participant

 

I didn't know about that UI setting. I have now turned it on, and it increased the contrast slightly, but still below WCAG threshold at 4.13/1. 

Screen Shot 2021-06-22 at 12.03.17 PM.png

dsasaki
Instructure
Instructure

@emoore50  Thank you for sending this up. The color codes that we use for those messages are #0770A3 for the text color and #E6F1F7 for the background color which is 4.74:1 and meets WCAG AA contrast requirements. Please let us know if you have any questions.

View solution in original post

emoore50
Community Participant

 

Thanks! Is that in high contrast mode? 

 

dsasaki
Instructure
Instructure

Yes, that is in high contrast mode