cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
ditaleamor
Community Member

Text Color Contrast

Jump to solution

When I ran UDOIT, the report summary indicated the following: "Insufficient text color contrast with background" in some areas. I'm unclear about what I need to do exactly to resolve that accessibility issue.

0 Kudos
1 Solution

Accepted Solutions
chofer
Community Coach
Community Coach

Hello  @ditaleamor  Thank You for posting your question.  After you run UDOIT on your course, it may find some pages that have insufficient color contrast...as you've indicated.  This is really easy to fix most of the time.  Basically, what this means is that your text color may be too light to read against the background.  For example, if you have a really light yellow or light green text color against a white background, that will be pretty hard for people to read (not to mention hard on the eyes).  For example, take a look at this example from my own sandbox course:

UDOIT

The top paragraph tells us that the color contrast ratio needs to be 4.5:1 ratio or better for small text or 3:1 ratio for large text.  Right now, UDOIT tells me that my ratio is 1.37:1 ... much too low.  So, we need to fix this.  You can use either the "lighten" or "darken" links right below the green hex code (in my case #00ff00), or you can even choose a different color from the foreground color palette displayed.  The key is to get rid of that red "Ratio Invalid (1.37:1)" message.  Once the text color is dark enough, that message will go away.  But, you're not limited to just the color choices in the foreground color palette.  You can choose pretty much any color in the color spectrum...as long as it meets the proper ratio.  For example, you can go out to sites like:

https://htmlcolorcodes.com/

https://www.w3schools.com/colors/colors_picker.asp

...pick a color you like, and then grab the six-character hex code from the site and then paste it into the box in UDOIT.  Example:

UDOIT - Purple text

You'll notice that the red message from UDOIT has disappeared because the text is dark enough against a white background.

Once you find a good color to use, just click the "Submit" button, and UDOIT will update the HTML code for you.  You can then run UDOIT again to see if it finds that error again (hopefully not).  But, if it does find the error again after you've already changed the color, then there might be some additional code you'll need to look at on your page that is being caught by UDOIT.  (I've had that happen before...where it's code not even being used on the page...but it's still hanging around.)

I hope this information has been helpful to you, Johnny.  I will also share your question with the Accessibility‌ group here in the Canvas Community in hopes that your question will get some additional exposure.  If you are not yet following this group, please click on the link that I have provided, and then click on the "Follow" button at the top right corner of the page.  Next to this button you'll also find an "Actions" button.  Click on that button, and then click on "Join group".

Best of luck to you!  Please let the Community know if you have any questions about this...thanks!

View solution in original post

0 Kudos
1 Reply
chofer
Community Coach
Community Coach

Hello  @ditaleamor  Thank You for posting your question.  After you run UDOIT on your course, it may find some pages that have insufficient color contrast...as you've indicated.  This is really easy to fix most of the time.  Basically, what this means is that your text color may be too light to read against the background.  For example, if you have a really light yellow or light green text color against a white background, that will be pretty hard for people to read (not to mention hard on the eyes).  For example, take a look at this example from my own sandbox course:

UDOIT

The top paragraph tells us that the color contrast ratio needs to be 4.5:1 ratio or better for small text or 3:1 ratio for large text.  Right now, UDOIT tells me that my ratio is 1.37:1 ... much too low.  So, we need to fix this.  You can use either the "lighten" or "darken" links right below the green hex code (in my case #00ff00), or you can even choose a different color from the foreground color palette displayed.  The key is to get rid of that red "Ratio Invalid (1.37:1)" message.  Once the text color is dark enough, that message will go away.  But, you're not limited to just the color choices in the foreground color palette.  You can choose pretty much any color in the color spectrum...as long as it meets the proper ratio.  For example, you can go out to sites like:

https://htmlcolorcodes.com/

https://www.w3schools.com/colors/colors_picker.asp

...pick a color you like, and then grab the six-character hex code from the site and then paste it into the box in UDOIT.  Example:

UDOIT - Purple text

You'll notice that the red message from UDOIT has disappeared because the text is dark enough against a white background.

Once you find a good color to use, just click the "Submit" button, and UDOIT will update the HTML code for you.  You can then run UDOIT again to see if it finds that error again (hopefully not).  But, if it does find the error again after you've already changed the color, then there might be some additional code you'll need to look at on your page that is being caught by UDOIT.  (I've had that happen before...where it's code not even being used on the page...but it's still hanging around.)

I hope this information has been helpful to you, Johnny.  I will also share your question with the Accessibility‌ group here in the Canvas Community in hopes that your question will get some additional exposure.  If you are not yet following this group, please click on the link that I have provided, and then click on the "Follow" button at the top right corner of the page.  Next to this button you'll also find an "Actions" button.  Click on that button, and then click on "Join group".

Best of luck to you!  Please let the Community know if you have any questions about this...thanks!

View solution in original post

0 Kudos