I plan to use a consistent set of navigation icons for the future Clear Helper Web site. My first attempt is represented by the “BACK” and the “NEXT” icons below. Others in the set will follow.
The development of them is not derived from research, which is beyond the scope of the project at this point. However, they were created following WebAIM’s “Creating Accessible Images” guidelines. In particular, they: are not animated; don’t use color alone to convey meaning; look okay even when enlarged to 500%; and use good color contrast between the text and the background.
Of these guidelines, the last can be objectively measured with the following tools. Each is based upon the latest Web Content Accessibility Guidelines (WCAG 2.0).
Accessibility Color Wheel created by Giacomo Mazzocato. This tool is used to choose a color pair, especially of foreground- and background colors, that is accessible to people with any of three color-blindness conditions. This tool rated the color contrast of the icons below as “13:1 ok”.
Luminosity Colour Contrast Ratio Analyser from Juicy Studio. This tool also rates color contrast. It reported the ratio as “12.96:1 … very good … ” and passing at WCAG 2.0 Level AAA, which is the highest standard.
I would appreciate any constructive feedback about these icons. They are being shown at the size I plan to use on the Web site.
