Contrast! Contrast! Contrast! Resources for making a website's contrast right.

Contrast! Contrast! Contrast! Resources for making a website's contrast right.

The contrast of the background and text is an essential part of the user interface (UI) of a website. People with low vision or vision disorders may not be able to access the information on a site with low contrast. Even people who have fine vision that is corrected or excellent vision with or without corrective lenses may experience frustration and difficulty viewing a site that lacks sufficient contrast. A coder recently shared a resource that they use for contrast evaluation. This person wanted to know what other programmers thought about the resource and whether or not they would use it. This programmer also wanted to know what resources are in use in the community.

One person wrote back with a suggestion to use the Web Aim website's contrast checker. This is a free online resource available to anyone. Another person replied with a statement that they use the online tool for contrast checking made by Contrast Ratio. They like this resource because it shows examples of different types of contrast.

An experienced coder who is familiar with overlays, shadows and opaque design elements wrote back with a lot of specific tips. If a website designer plans to use any of these features, then they need to be taken into account when evaluating contrast levels. If the coder does not take them into account, then there might be too little or too much contrast when those features are displayed.

One person goes to Color Review. This is a site that offers color palettes and a way to arrange colors side-by-side in order to see how they look together. It also has a contrast evaluation tool. Another person wrote back that they use Get Kontrast. This is a plugin for use in Firefox and Chrome web browsers. It allows the site designer to evaluate the contrast and ensure that there is enough of a difference between colors for the user to have a good experience browsing the site. One additional person recommended using the Chrome development tools, which are free resources available to anyone. These tips are all worth your consideration. For more information click here https://usecontrast.com/guide.

Web Design User interface