Digital A11y

color

Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility

Last Modified on by 1 Comment

It is a sunny day. The sun is so dazzling in your eyes as you are walking in to your office from lunch. You want to finish up an email so quickly but your eyes are not so obedient to look at the computer screen as it has just entered a contrastive suddenness and they need some time to settle. They just scream for a contrastive screen or color inversion. As a common man, we all must have encountered a similar unsettling, if not the same scenario at any point in time.

Now, What to do?

Whether you are designing, developing, testing or auditing a user- interface component, The first step you can take to make sure that their product is accessible is to make sure that it passes the color contrast requirements of Web Content Accessibility Guidelines. Making sure that your design passes the color contrast requirements help low vision users, color blind users & people who have situational disabilities. This is one of the easy fix to approach from the accessibility standpoint & there are a great number of tools that will help us determine the color contrast requirements which we will take a peak into below.

WCAG Requirements for Color Contrast

Before diving into the tools, let’s get to know what WCAG says on color contrast! According to SC 1.4.3 Color Contrast of WCAG2.0, there are set of requirements for AA & AAA conformance levels & they are:

To meet the level AA success criteria text smaller than 18 point (or 14 point if bold) must have a 4.5:1 contrast ratio. All larger text must have a contrast ratio of 3:1 or greater.

The more stringent AAA criteria the requires text under 18 point (or 14 point if bold) to exceed a contrast ratio of 7:1. All larger text must have a contrast ratio of at least 4.5:1. Remember, all these numbers are the result of well-researched user study and they fit the requirement most people if not all.

How to check for accessible colors

Color Contrast Analyzers & Checkers

  • Color Contrast Checker by Level Access
  • Contrast Ratio Easily calculate color contrast ratios. Passing WCAG was never this easy! by Lea Verou.
  • Accessible Colors | WCAG 2.0 AA and AAA color contrast checker evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility. If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness. We modify the lightness value only, in order to stay as true to the original color as possible.
  • Contrast Checker by Courtesy of Acart Communication This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.
  • Check My Colours Check My Colours is a web-based tool for checking your website’s foreground and background colors. It’ll check all stacked web page elements based on W3C’s WCAG recommended luminosity contrast ratio and color brightness. It’s easy to use: just plug in your web page’s URL, press “Check!”, and it outputs a nice tabular report for all elements.
  • Color Oracle Color Oracle is a desktop tool available for Mac, Windows, and Linux operating systems: it simulates color vision deficiencies. The creators of the tool also have a Design Tips section on their site that shares a couple of useful whitepapers on color accessibility. Note that Windows and Linux users require Java 6.
  • Colour Contrast Visualiser This tool is an Adobe AIR desktop application for visualizing appropriate color combinations. It’s a wonderful tool for picking your website color palette. If you’re concerned about web accessibility, it’d be a good idea to have this tool around during the design phase of your projects.
  • Accessibility Color Wheel This tool is a convenient way to experiment with various color combinations: it helps you rapidly envisage what color schemes look like. To test and tweak color choices, simply move your mouse around the color wheel and evaluate for readability. At the bottom of the tool’s web page, you’ll see simulations for particular forms of color blindness.
  • GrayBit One way to check if a design has sufficient color contrast is by converting it to grayscale and seeing which parts are hard to read. Use GrayBit to convert a web page to grayscale; it will even convert web images on that page. It’s a great tool for visualizing a web design’s color contrast and readability.
  • Sim Daltonism
    Sim Daltonism is a vision deficiency simulator for the Mac OS X. The tool allows you to simulate one of the eight supported color blindness conditions such as Monochromacy and Protanopia (a dichromat condition). Please note that Sim Daltonism requires Mac OS X 10.2.8 (or later versions).
  • Color Laboratory This uncomplicated web tool allows you to discover color combinations and how they might look like to a person with color blindness. Color Laboratory is very easy to utilize and only requires three basic steps, all of which are outlined in their quick start guide.
  • Colour Contrast Analyser This desktop application (for Windows) is designed for examining your foreground and background color combos for color contrast and brightness. There’s a user guide on the site to help you get started with it quickly, as well as downloads available in several languages.
  • Luminosity Colour Contrast Ratio Analyser Juicy Studio has a nifty web tool for analyzing background and foreground color contrast ratio. All you need to do is key in your background and foreground color values in hexadecimal units (for example, a white background is #ffffff) and it will subsequently tell you whether the combination passes WCAG 2.0 contrast recommendations.
  • Colour Contrast Check The first really intuitive online tool for checking colours that I know of, Jonathan Snook’s Colour Contrast Check lets you input foreground and background colours either by entiering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.
  • Color Safe Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
  • Accessible Color Palette Evaluator When creating color palettes for Web sites it’s useful to know which color combinations will pass accessibility requirements for color contrast. WCAG 2 defines a formula for determining if two particular colors provide enough contrast. The NC State Accessible Color Palette Evaluator allows you to enter a color palette and easily analyze all of the color combinations to test for accessibility.
  • Color Extractor Bookmarklet This is a tool that extracts all of the colors defined in the CSS of a given page and puts those colors in the Color Palette Accessibility Checker.
  • WebAIM: Color Contrast Checker An online color Contrast analyzer from WebAIM.
  • Contrast-Finder Contrast-Finder is a tool which computes the contrast between two colors (background, foreground) and checks if the contrast is valid.
  • Color Palette by
    A11y Rocks     Color is important to any design. However, sometimes the contrast between background and foreground colors are difficult to read, especially for people with a vision impairment.  This tool should help you visualize an entire palette of all color combinations with accessibility in mind. The combinations are ordered by color contrast ratio.
  • Accessible Color Generator by Learn UI Design
  • Contrast A macOS app for quick access to WCAG color contrast ratios by Nothing Magical, Inc.
  • ColorBox by Lyft Design
  • contrast-checker by GOV.UK

Conclusion

When there are so many tools to tell us the contrast ratio of our contents and user interface components, let’s not dissipate the need for an inclusive visual real-estate for our diverse user groups! Rather, let’s build a colorful but contrastive web!

More Articles On Color Contrast

More Accessibility Tools

Continue reading Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility

Understanding SC 1.3.3 Sensory Characteristics

Last Modified on by Leave a Comment

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)

This success criterion requires that instructions or information to understand or operate the web content do not use only visual or auditory clues. Such clues include shape, size, location, orientation and sound clues. This doesn’t mean use of shape and/or location is discouraged altogether as using shape and/or size is an effective way of providing information. Similarly, in some of the languages, ‘above’ and ‘below’ mean the immediate ‘previous’ or ‘after’ contents. In such cases, if the reading order is correct, then it is fine with statements like “Choose one of the options below”.
Note that this success criterion applies only to digital content and not to physical devices such as ATMs or check-in kiosks where the shape of the physical buttons (tactile clues) must be understood in their form.

For Whom it benefits

  • People who are blind or low vision who cannot see the shape, size or location
  • People with cognitive disabilities who cannot understand shape, size or location as clues
  • People who are deaf and deaf-blind who cannot understand audio clues.

Examples that would fail

  • A calendar widget where the current date and the selected date have a diamond shaped glyph alone to indicate so
  • In a shopping flow, the completed steps have an (X) icon alone to indicate so
  • In an online learning site, while doing exercises, completion of steps is conveyed with a sound of the bell alone
  • In an online survey, the instruction says “click the triangle button at the bottom right to go to the next page”

How do I address this?

To address this, simply use more than one clue to instruct or inform the users. Using a combination of shape/size/location/orientation along with color/text would take care of all the users’ needs.

Points to ponder

Understanding SC 1.4.1 Use of Color

Last Modified on by Leave a Comment

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.

This success criterion requires that color should not be the sole method of conveying information to the users. People with low vision, color blind, elderly & people with situational disabilities depend on more than one way to find information on the page & if that information is represented in the form of color alone, then it fails this check point.

Some of the best examples of use of color are, marking input fields in red color to convey errors or ‘required’ information, a button marked in green that performs the essential action like submitting a form, a text prompt that says “click the green button to submit the form”, a graph that uses only color to indicate the growth/decline percentage, etc. In all the above examples user is being asked to refer to a particular color to find information & if they cannot get to that color or understand what that color represents, then it is a failure of this check point.

Points to Remember

  • Don’t use color as sole method to convey information.
  • Make sure instructions/prompts provided in text don’t refer to color alone.
  • Make sure instructions are provided in text for graphs & charts where color is used to convey information.
  • Provide more than one visual clue that include common icons and colors to differentiate texts and user interface elements.

References

Understanding Success Criterion 1.4.1

Continue reading Understanding SC 1.4.1 Use of Color