Notes from the July 25 meeting of the AccessibleWeb@U interest group
- Presenter - Rick Ells UW-IT
- Vision
- Normal - Has red, green, and blue sensors
- Protanopia – Red/green color blindness, less sensitive to red light
- Deuteranopia – Red/green color blindness, less sensitive to green light
- Tritanopia – Blue/ yellow color blindness, confuse blue with green and yellow with light violet
- Cataracts
- http://www.color-blindness.com
- Color Combinations
- Use orange only for large text or highlight
- Avoid red on green or green red
- Avoid using red and green to convey information, such as red text is a warning, green text is a recommendation
- Avoid putting bright colors at the opposite end of the spectrum together
- Avoid putting text on textured backgrounds
- Contrast and Luminosity
- Contrast is the difference in brighness (luminosity) between two colors, such as between the color of text and the color of the background
- More contrast is needed for smaller text
- 4.5:1 for content text (Level AA)
- 3:1 for large text (Level AA)
- Guidelines
- 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
- Example Site
- http://staff.washington.edu/rells/accessibility/contrast/low.htm
- Evaluate the example site using the Colour Contrast Analyzer - http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages
- Maintaining Hue
- When you need to darken or lighten a hue, maintain the same relative ratios between the red, green and blue values.
- Example: The following are the same hue, but different luminosities
- RGB 50, 75, 100 - darkest
- RGB 75, 112, 150 - medium
- RGB 100, 150, 200 - lightest
- Tools
- Contrast-A http:// www.dasplankton.de/ContrastA/
- Color Oracle - http://colororacle.org
- WebAim Contrast Checker - http://webaim.org/ resources/contrastchecker/
- ColorHexa - http://www.colorhexa.com
- Colour Contrast Analyzer - http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages
