Color

When making course materials - documents, presentations, online materials, etc - most people want an attractive product, but... "people with color deficiencies" but not limited to partial sight, low vision, color-blindness, etc. (older people, too)

Also see another page on this site, Color Blindness, for additional information about this topic.

Key Points about Color

    • Probably the number one rule is to ensure that color is not the only method of communicating meaning. A simple example is that instead of just using red text to indicate a required item on a form, to also include an asterisk beside that field with a note that items with the asterisk are required.

    • The standards and guidelines also require sufficient color contrast of the text (and any images of text) with the background.

    • Be consistent with the colors throughout the material. Users should not have to re-focus (or adjust their monitor settings) when moving to a new slide or page. (This also applies to avoiding using too many different sizes and typefaces of letters on a page.)

    • (webinar recording and materials) Accessibility Basics Series #2: Use of Color (March 31, 2016) http://info.ssbbartgroup.com/Accessibility-Basics-2-Resources-Gateway.html?mkt_tok=eyJpIjoiWVRGaU1qVXdOR0prWm1WbSIsInQiOiIxK1lkOTBVNEl0T29PZHFrWnRcL0M3VWJDbXB0UUVRNWl3TThIWk8xK21GQXVJM0lBaFFXT1BMRVdRdHZMOE5zbTVGRFFIZkpvU2R4aU9xWERrUjRrUGFPZEVEamtFWE9GYlI1REFcL2p0SnhNPSJ9

Color Contrast

Typically, the best color choices to achieve a high color contrast are dark foreground colors [and text] and light background colors. It is considered a best practice to verify the color contrast using a color contrast checker to ensure accessibility. (from Access MOOC, April 2016)

WCAG 2.0 level AA rules state that there must be a contrast ratio of colors of at least 4.5 : 1 for most text. High color contrast requirements can vary somewhat depending on the size and style of the text and one commonly noted exception to this rule is that if the text is greater than 18 points or greater than 14 points AND is bold, the contrast ratio is only 3 : 1. (webinar from SSB March 2016)

    • W3C Understanding WCAG 2.0: Contrast (Minimum) http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Color Contrast Checkers & Image Correction Tools

    • Vischeck - information and an image correction tool http://www.vischeck.com/

      • Daltonize online image correction tool http://www.vischeck.com/daltonize/runDaltonize.php

    • Color Contrast Checker [WebAIM - online tool] http://webaim.org/resources/contrastchecker/

    • Colour Contrast Check [Snook] http://snook.ca/technical/colour_contrast/colour.html --- Cool. You can adjust the color here, too.

    • Check My Colours http://www.checkmycolours.com --- Put in the URL for the site to be checked.

    • Color Contrast Checker (Level Access) http://www.ssbbartgroup.com/reference/color-contrast-checker/

    • Colour Contrast Analyser [Paciello Group - requires download, but is free] https://www.paciellogroup.com/resources/contrastanalyser/

    • Luminosity Colour Contrast Ratio Analyser (Juicy Studio) http://juicystudio.com/services/luminositycontrastratio.php

    • Tanaguru Contrast Finder http://contrast-finder.tanaguru.com/

    • Colors on the Web Color Contrast Analyzer http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer - must download tool

    • Contrast Checker [Acart] http://contrastchecker.com/

    • [Firefox add on] WCAG Contrast checker https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker/ --- You can go to any website, right click anywhere on the site, and select the WCAG Contrast Checker to obtain a list of all color contrasts on the site.

Identify the Hexidecimal Value of Colors -- You need the 'hex code' to run most of the Color Contrast tools

    • HTML Color Codes: Color from Image https://html-color-codes.info/colors-from-image/ - Very cool! Upload the image file or put the URL for an online image.

    • Colorzilla [Firefox plugin] http://www.colorzilla.com/firefox/

    • HTML Color Picker [w3schools] https://www.w3schools.com/colors/colors_picker.asp

Miscellaneous

Vischeck

One site that has been around for many years and has a lot of information about color-blindness is Vischeck (new window) www.vischeck.com It has online color simulation tools where you can upload an image to check or type the URL of a web page. It also has a color correction tool called Daltonize.

Other similar sites:

    • Online Simulator Shows You What Photos Look Like to People With Color Blindness petapixel.com/2013/02/10/online-simulator-shows-you-what-your-photos-look-like-to-color-blind-people/

    • Colour Blindness Simulator [upload a file] http://www.etre.com/tools/colourblindsimulator/