Colors & Contrast

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