Jump to content

W3.CSS Color Schemes ("W3.CSS Colors" Section)

Larry ONeill

Recommended Posts

In the US the ADA (Americans with Disabilities Act) will threaten to shut down a website if a valid complaint is issued against the website. Most of the ADA's issues have to do with people being either blind or with poor vision, and not being able to successfully "read" (via screen reader) and / or navigate a website. I recently worked with a blind person to overcome the issues he was having on a website (I employed w3schools resources to achieve success.) There are several things involved, ranging from newer HTML5 tag usage, online forms, page structure, text/background contrast, etc. One of the issues I found in the W3.CSS Colors section was the varying use of #000 and #FFF text color over the background colors being presented. This was discovered when I used the "WAVE" browser addon (Firefox) to diagnose a page's content. The "WAVE" addon is a tool that developers can use to improve the content of a website. Anyway -- there were several "contrast" issues in the CSS "color class" files. I have made the necessary corrections to the files that I use, but highly suggest that W3Schools do the same. Needless to say I'm a big fan of W3Schools. For an example of what I mean, I put together a page of buttons using the default W3.CSS file and referencing the default color names. Then I used the "WAVE" addon to diagnose the color contrast. The attached screenshot shows the results of the test. The little red boxes indicate a color contrast issue. This is only for the default colors. The other color schemes also have contrast issues. I hope this helps.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...