April 18, 2019
Accessible Information Websites – Color and Graphics
Remember the definition of assume - makes an ass out of u and me when designing websites.
Do visitors to your website struggle, because of the color scheme and graphics? If you are designing an internal website for a company, you know the machines, browsers and users (intranet). If you are creating a website that will be viewed by anyone, anywhere, anyplace, this is a different matter. You may have the latest and greatest in computers. However, it is unlikely your users will rush out to buy a new computer just to use your website.
Do not forget the digital divide between those who grew up with computers and those who learned computers as a second language. People 65 and older will soon make up the largest single age group in the United States and are using the internet.  Are you building websites accessible to all, or are you facing possible legal action.
Many try to write informational websites containing the special effects of music videos such as: CSS, video, animation and graphic design. The latest and greatest design fad will not make a successful website.
When building a website for a health professional, a color scheme was chosen. I created the web pages and tested this color scheme using several different computer systems including multiple browsers. Everything seemed satisfactory; But then disaster! My client purchased new computers. One color a muted shade of pink (#ffcccc) now displayed as brilliant flamingo pink color somewhere between (#fc8eac) and (#ff6699) – a sad moment.
- Lesson Learned
- There are many versions of browsers and different brands of monitors. Browser updates may change the look of your website dramatically. A browser display is not set in stone. In addition, no set standard exists for monitor display and resolution. The resolution for a Mac is 72dpi. The resolution for PCs is 96dpi. Many browsers display at 96dpi. Remember this rule – Browsers do not coddle puny websites.
- Web Safe Colors
- Now we come to colors and the myths that abound. Yes, there are millions of colors available. In reality, if you want stable colors that can be read on any machine/device anywhere, you are limited to about 160. It is a sad moment when you have spent time creating a web color scheme that looks like trash on another machine/monitor. If you are not on an intranet where you know what each machine and browser is, you must take into account the many devices possible from the largest flat screen to mobile tablets and cell phones. Always choose colors that are web safe. Most color picker programs offer this option.
- You are asking why?
- The display resolution for Macintosh monitors is 72 pixels but for PC's it is 96 pixels. We warn you! Never, never use a color that ends in the hex number of 33.
Look at the two example squares. Compare the dark navy blue (#000033) square to the black (#000000) square. On a MAC you will see dark navy blue, but on a PC it will be black. Test this out for yourself.
Avoid the color of the year. Websites can be dated by the color schemes they use. The exciting color combo of today may look silly tomorrow.
- Color Vision Issues
- There are levels of color vision deficiency from slight to severe. The three common types are red/green, blue/yellow and absence of color. Usually more males than females inherit color vision issues.
Color perception may be changed by aging, optic nerve damage, retinal disorders, eye, metabolic or vascular diseases, trauma, prescription medications (including drug toxicity), glaucoma, diabetes, macular degeneration, Alzheimer’s disease, Parkinson’s disease, alcoholism, cancers and cancer therapy, sickle cell anemia, etc. [2, 3]
Of the general population, approximately 1 in 5 will have some form of visual impairment. 1 out of 12 men, or 1 out of 200 women, are partially color blind, i.e., unable to see this or that tint of red, blue, green or yellow. Is decorating your site with red or yellow underlines wise? If a page depends on red lettering to make its point, someone who cannot see red will see black/brown. Does it make sense to ignore color vision access?
- Be Aware
- Older users have difficulty with darker colors.
Some users will despise certain colors.
- Graphics Issues
- The term monitors includes: computer monitors, televisions, plasma televisions, CRT (Cathode Ray Tube) and LCD (Liquid Crystal Display), HD (high-definition) televisions, cell phones, laptops, tablets, car navigation systems, kiosks, etc. As monitors become larger, the resolution increases, which means that more pixels can be squeezed onto the screen than ever before and this is beginning to affect graphics (and consequently graphic web design). The graphics are rendered differently because graphics are measured by the screen in terms of pixels - the same measurement used to size monitor screens. If we can now fit more pixels on the screen, then graphics and images begin to appear smaller on larger screens because of the increased screen resolution even though the actual image size remains constant. Thus, graphics and images appear larger on smaller screens because of the decreased screen resolution even though the actual image size remains constant. To test this premise - open this article on a computer with a larger monitor then open it on a cell phone. You should see the difference,
You do not want your users make a cup of tea while waiting for your website to load, because it is bloated and wallowing like a beached ship. When creating a graphic for the web, the file size should be as small as possible.
Choosing the graphic format – Remember, resolution display cannot be controlled. Abandon the fantasy of webpages will look like static paper handouts.
Compare these three Lynx Kitten smaller, leaner graphics that load quickly, created with the GIMP (GNU Image Manipulation Program).
(Graphics Interchange Format)
Image dpi 72px/inch
file size 7197
(Portable Network Graphics)
Image dpi 72px/inch
file size 6512
(Joint Photographic Experts Group)
Image dpi 72px/inch
file size 4045
In terms of file size the jpg is the winner.
The PNG (Portable Network Graphics) option is great, if you are certain about your users, platforms, browsers and OS (operating system) - an intranet. Not all devices support the PNG option. Thus for the largest audience view, the older graphic extensions of JPEG (Joint Photographic Experts Group) and GIF (Graphics Interchange Format) are safest
- Graphics Reminders
- Always remember to write alternative (alt) descriptive tags for each graphic. These are important for both screen readers and if your user has blocked irritating graphics.
If you are using PDF(portable document format)s is there an alternate version in either text or HTML? You must have the alternate version for the PDFs to meet Section508.gov 
- Graphics and Navigation Accessibility Barrier
- Graphics and Physical Issues
- Why are there many flashing pictures on a web site? The programmer may be counting the number of Hits versus Page views. When a page is viewed, each graphic is counted as a Hit. The actual number of times that web page has been viewed is not the same as the number of hits on that page.  For example, when someone with 20 graphics on their page says, I had 100 hits today, in reality this means the page was actually viewed 5 times. Many sites use this count to make them more attractive to advertisers or investors.
- Some sites present flashing lights, fluttering butterflies, waving flags, scrolling news headlines, advertisements, in a never ending loop. Here the problem is boredom. How many times will users endure the same moving graphic, animation or advertisement before leaving the site in annoyance?
- Resist the lure of gadgetry and trickery. People literally can get motion sickness with nausea from sites with moving pictures. There is nothing like puking your guts up, because of looking at bouncing bunny rabbits.
- Be aware flashing lights, and graphics may trigger migraine attacks. Is this the goal of your website?
- Accessibility not only refers to a website that is accessible to persons with physical disabilities but also refers to a website that is accessible to all individuals regardless of the browser they are using, the computer platform they are using, the screen resolution of that computer, and their Internet connection. Providing access to all despite vision limitations, physical disabilities, or out-of-date equipment, may sound limiting, but it really isn't (unless you don't want a larger audience). Findable content and easy usability make a website great.
- Do not assume anything.
Check your site for accessibility errors using the Lynx text browser. 
- Articles in this Series
Accessible Information Websites - Overview
Accessible Information Websites – Text and Fonts
Links Of Interest
- 1. The Graying of America: More Older Adults Than Kids by 2035
- 2. American Academy of Ophthalmology
- 3. Facts About Color Blindness | National Eye Institute
- 4. Section508.gov
- 5. Americans with Disabilities Act (ADA)
- 6. Website Accessibility Under Title II of the ADA
- 7. Beyoncé's Parkwood Entertainment sued over website accessibility
- 8. Hits vs Pages
- 9. Lynx is the text web browser