Web Accessibility: Color and Typography

Posted by CynthiaL on Sunday, May 4, 2008 at 7:13 am. 1 Comment.

  • Accessibility Color Wheel Version 1.0 by Giacomo Mazzocato. When you hover over the color wheel, you’ll see text in colors for normal, Deuteranopia, Protanopia and Tritanopia color vision simultaneously. An "OK" message is displayed when you hover over an accessible color. By clicking on the color, you can copy the hex values. The tool may be used for foreground and background color contrasts. You may download the javascript if you want to use it offline.
  • British Telecommunications (BT) Age & Disability Action: "Safe web colours for colour-deficient vision" Information and design tools for designing sites so that color cues are not lost.
  • Color Blindness Types provides definitions and examples of type of color blindness. PDF format (.pdf)
  • Color Contrast Checker from WebAIM provides the ability to lighten and darken your color combinations slightly to find acceptable contrast levels.
  • Color Contrast Analyzer: The Luminosity Colour Contrast Ratio Analyser allows you to check the contrast of two colors using the WCAG 2.0′s luminosity contrast algorithm.
  • Color Laboratory The color laboratory allows you to select colors and see how they appear next to one another and in various foreground / background combinations. It also allows you to see those colors as they might appear to color-blind users.
  • Colour Vision Easy to use tool to quickly see color deficiencies with color palettes for Protanomaly (low red), Protanopia (no red), Deuteranomaly (low green), Deutanopia (no green), Tritanomaly (low blue), Tritanopia (no blue), Typical Monochromatic, ATypical Monochromatic.
  • "Computer Color Matters -Is your computer color blind?" from Color Matters® Computers
  • Design Evaluation provides three ways to see what your Web site’s colors look like to the color-blind. You can test pages at this site.
  • Fonts excellent resource for information about fonts from Webaim
  • Lighthouse International: Effective Color Contrast – Designing for People with Partial Sight and Color Deficiencies offers color guidelines for the Web.
  • Lighthouse International: Making Text Legible – Designing for People with Partial Sight offers basic guidelines for making effective legibility choices that work for nearly everyone.
  • Understanding web typography – an introduction an article by Jim Byrne
  • Vischeck Test your Web design for how it looks to various color blind impairments. Run Vischeck on your own image files or run Vischeck on a Web page: on your desktop or online.
  • Visibone Information about colour blindness, with colour cards simulating colour spectrums as they appear to those with colour deficient vision.
  • Web-Based Color Vision Test provides a movie that displays a moving “coloured” square that is buried in flickering luminance contrast noise.

    The square changes colour as the movie plays. You may be able to see the colour for some or all of the time. If you have some form of severe colour deficiency, you will have difficulty in seeing the “coloured” square moving all the time.

    The movie lasts for 90 seconds and all you need do is play it and remember if the “coloured” square disappeared at any time during the movie. The absence of the moving square may only last for 2 to 3 seconds, before you see it reappearing in a different colour. This temporary disappearance of the pattern is what you have to watch for in the test.

    If the colored square does disappear, discuss where it disappeared with your optometrist who may be able to help you with some tinted glasses. Be sure to run the test with the monitor in a dark room: The spectral characteristics of the pattern will be affected by ambient illumination and therefore this should be kept to a minimum.

  • Website Tips: Color provides several web-safe color charts by VisiBone’s Bob Stein, by Lynda Weinman, and Daxassist. There are also resources to many more charts, and articles and tips on color and design, color psychology and meanings.
  • Wellstyled Web-Safe Colors Tool incredibly helpful online color scheme tool to help select eye-stopping color schemes.

Tags: Internet Accessibility, , , , , , , , , , , , .

One Comment on “Web Accessibility: Color and Typography”

  1. assisted living maryland says:

    assisted living maryland…

    A Trackback is one of three types of Linkbacks, methods for Web authors to request notification when somebody links to one of their documents….

    Posted on February 1, 2009 at 7:00 pm.