Sites to Test Your Sites Accessibility

Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities, and it is extremely important to consider when designing a webspace or application. Color blindness, hearing disabilities, or other factors might play part in many people’s web viewing experience. Being weary of color and font choices, as well as providing alternatives to images or text, are simple ways to make sure that your site is viewable by many. While it is possible to determine accessibility yourself, there is a variety of sources that can do it for you.

  1. https://wave.webaim.org/

The WAVE web accessibility tool is a simple website that creates a side-by-side layout of your website and a menu of issues, strong points, etc. You simply enter the URL of your site and WAVE finds points that need help that are marked with color coded indicators. The markers can be clicked on to show further explanation of why it is an error or could be fixed.

  1. http://romeo.elsevier.com/accessibility_checklist/

This accessibility checklist doesn’t check for accessibility for you, but instead gives you the guidelines to check this for yourself. Each list item can be expanded to show further information and what to look for to make sure that your site is compliant to accessibility standards. Since the checklist requires the user to find issues themselves, it leaves a more lasting impact.

  1. https://www.webaccessibility.com/

Webaccessibility.com asks for the site URL and your email address before searching for issues. Once a scan has been done, a summary and percentage is shown for how well your site accommodates. For more information on things that need improvement, a detailed report can be downloaded and sent to your email.

Tools to Test Your Site Accessibility

 

Sites to Test Your Sites Accessibility

Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities, and it is extremely important to consider when designing a webspace or application. Color blindness, hearing disabilities, or other factors might play part in many people’s web viewing experience. Being weary of color and font choices, as well as providing alternatives to images or text, are simple ways to make sure that your site is viewable by many. While it is possible to determine accessibility yourself, there is a variety of sources that can do it for you.

  1. https://wave.webaim.org/

The WAVE web accessibility tool is a simple website that creates a side-by-side layout of your website and a menu of issues, strong points, etc. You simply enter the URL of your site and WAVE finds points that need help that are marked with color coded indicators. The markers can be clicked on to show further explanation of why it is an error or could be fixed.

  1. http://romeo.elsevier.com/accessibility_checklist/

This accessibility checklist doesn’t check for accessibility for you, but instead gives you the guidelines to check this for yourself. Each list item can be expanded to show further information and what to look for to make sure that your site is compliant to accessibility standards. Since the checklist requires the user to find issues themselves, it leaves a more lasting impact.

  1. https://www.webaccessibility.com/

Webaccessibility.com asks for the site URL and your email address before searching for issues. Once a scan has been done, a summary and percentage is shown for how well your site accommodates. For more information on things that need improvement, a detailed report can be downloaded and sent to your email.

The clothing color suggestion

When I first started teaching writing in online spaces, I would say, about basic web pages, choose colors that might wear on a day when you’re trying to look professional. Enter any class room full of students, dressed up or in their mid-semester exam wear, and they’ll have blues, greys, creams, tans in large percentages. Rarely will you see anything other than muted colors in choices for pants, jeans, jeggings, leggings, or sweats.  Most of the jackets will also be muted color. Then, for emphasis, in shirts, or hats, or sweatshirts, you’ll see the color pop. Think of web pages similarly, at least at first, until you gather a sense of how to work with color as a writer.

Becoming more aware of color?
How might you, as a writer, become more confident with color choices? You certainly can read books and/or access youtube videos on color design, and you can study the design choices on web sites. The best strategy for me has been to select three sites that are in a specific industry, study their color choices, the amount of each color on various web site pages, and from those specific choices, learn something about how to bring color to sites that have a similar agenda.

Pull Quote

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Continuing Body

For this post, I want to start by looking at 3 banking websites. I know banking isn’t necessarily an obvious first example, but banks require a conservative approach. People must trust their online presence, or the online usage will be limited. The colors banks choose must convey messages about reliability, trustworthiness, and those colors can be culture – specific. Some color theorists might argue that many banks choose to wrap their sites in blue because that color conveys authority and trust. Who knows. It matters to understand not only the color, but the proportion.

I’ve chosen two national banks, and one regional bank: Chase Bank, Wells Fargo, and Union Bank. You can try this exercise with your own favorite banks, just to see if you find differences.  Open up three bank sites.  How many colors do you see?  Stay at the top of the page for a minute, and watch the images that scrolls. Be sure to note:

  • Background colors – even if white;
  • gradations of a font color—look for black turning to grey.
  • Small dividing lines/borders around text
  • Check roll over (particularly easy to see in the menu though roll overs are fading in the land of icons for menu options)
  • Notice the prominent colors in staged pictures – Photo content counts as part of their color palette.
Wells Fargo

  • Dominant color: Red
  • White, as font and background
  • Black
  • Shades of Grey
  • Cream / Beige/Taupe/Brown
  • Red (and variation on red),
  • Gold and variations that shift towards vibrant orange,)
  • Blue (often denim)
  • Light Green,
  • Green (for a themed secondary page)
  • Tealish Blue  (For a themed secondary page)
  • Orange/rust  (For a themed secondary page)
  • Purple (For a themed secondary page)
Union Bank and trust:

  • Dominant color: Green
  • Blue,
  • Red,
  • Beige/cream/brown
  • Yellow
  • Black font and degrees of grey
  • White (background/font)
Chase

  • Dominant color: Beige/grey/blue
  • Shades of Grey
  • Black
  • Blue (shades of blue)
  • Green (shades of Green)
  • White
  • Brown
  • Red
  • Green
  • Beige/cream
  • Black

Continuing Body

If I want to create a website, and I want it to be corporate in feel, I can look at the amount of color in each section of a page, and try to recreate the same proportions.  For example, in the Well’s fargo, the red portion is prominent in the header bar, but immediately below it, the background for the site is white or a very light cream, the images have very light backgrounds that are also cream or grey, and the person in any images may have just a small amount of red. I wouldn’t conclude, from this web site, that I should offer a background of red.  Instead, I might choose one button in red, the top bar in red, and I might choose an image that includes a small pop of red. I want similar proportions to the example I find. If I want the logic without the specific color, I might switch out the red bar, the red button, the red portion in the image, and shift, instead, to the color in my palette that is a strong, vivid color.

If you want to create a site that has the feel of an image you like, but you can’t find a web site that reflects the proportion of color emphasis. If you think about proportions that you like in paintings, or if you look at the proportions of colors in a photo, (say, image at the beach, where the main colors might be blue (sky), teal (ocean), and taupe/cream (sand), with the focus on people), can you recreate that image in your web site design?

Take this image from Wells Fargo, for example.

 

You can load that image into an online palette generator like http://www.cssdrive.com/imagepalette/index.php

Or to coolors.co/app (and then click on the little icon for a camera).

Curiously, when you drop that image into coolors, the orange color comes up, which is important for one point: if you study an image, trying to indicate how much of the screen is which color, you’ll find that the orange they recommend here is almost like a pin point on the image itself.

If you take an image and the color proportions as a guide, this small amount of orange in this color scheme can act as a guide for how much of your web site’s screen should include that color.  If you can see that much of the image is a kind of light blue-grey color, then you can imagine that a significant portion of your screen should be that color as well.

If you don’t like those colors, you can try again.  Or you can take some of those colors over to a site that helps you to see the possibilities for color choices.

  1. Get the proportion
  2. Practice seeing how others create the emphasis
  3. Look at how your contrast works
  4. Look at how the color blind simulator sees your colors
  5. Keep breaking sites down in terms of color.

Related Articles

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...