Choosing Color for Accessibility

color palette from Coolors toolWhy we talk about color.

As we as a university acclimate to our new learning management system (LMS), Carmen Canvas, we now have the ability to alter the aesthetics of our courses, create custom content to insert, and make a variety of choices that were not possible in the old system. For some, this means adjusting the HTML code on “pages” or anywhere the Rich Content Editor is displayed. For others, it means creating videos and images to embed and display within the course. Creative use of the LMS spans all disciplines in appeal and utility: design is both a tool and an aesthetic, and we all want to convey our content in a way that is pleasing and effective. Overwhelmingly, we find that people universally want to affect the way their course looks. As we move toward more personal ability to make choices that ultimately affect the user experience, one of the key components that comes up both in terms of good design as well as universal design is color.

Why color? Well, as this web design article explains, color is foremost a utility, a way finding tool and a premise for basic visual accessibility. It’s also a signifier. Great color helps a user interact more efficiently with the digital course, identifying features and ensuring they see vital parts. Poor color choice not only creates confusion but can obscure visibility altogether. Removed from those context, color is a key determinant in how easily our eyes see and read signs, letters, numbers, and so on.

Consider the value of contrast. Foremost, contrast — or the varied hues of color as they interplay together — determines the readability of text. This is crucial for those with low vision, cognitive, or communication differences. This piece does a great job walking through the color-picking process as you strive to achieve ideal contrast. We often see color choices that are inaccessible that can be fixed by going a shade or two darker or lighter. Thus, the importance of establishing an accessible palette cannot be overemphasized.

But how does an instructor know if their color combinations or choices are accessible? Contrasting enough? Quite a few new tools will allow you to play with the HEX codes of colors to test these out and find ratings.

  • Favorite palette maker: Coolor.co It’s easy to use. Load the site and follow the quick tutorial that pops up. You’ll have your own tutorial in no time. Or, upload a photo and get a palette generated from that. Save palettes, export them to software, revisit as needed.
  • What is this one color from a photo? Don’t know the HEX code for a color? Try uploading your image at this website designed to sample colors from a picture.
  • Help me find a color! Need to find a color you like? There are many online palettes you can browse that will also provide the codes. This one is simple and straightforward. This one will let you browse many colors a few different ways.
  • Show me beautiful color schemes. Browse nicely designed sites to see how their colors interact.

shot of pantone's green color of the yearTry Your Colors

Ten years ago, there were not nearly as many fun, free tools for checking out color contrast for the everyday person. Now, there are a plethora of fantastic, user friendly tools.

First, let’s try out some basic text contrast. For this demo, I’m going to use Pantone’s color of the year, “Greenery.” According to their website, the closest match for that color code is #84BD00.

  1. Now that I have my color, my goal is to determine what other colors will contrast with it in a way that’s readable.
  2. First, I’m going to visit Colorable’s text demo site and enter the code for my color as the background.
  3. Colorable’s site, like other tools, offers the following text readability contrast scores:
    1. Fail. This one obviously means it fail accessibility guidelines.
    2.  AA large: This means it means accessibility needs if it’s being displayed in a very large font size, like a header. But it’s not adequate for paragraph text.
    3. AA: This indicates it means the basic needs of accessibility. It’s not the highest score, but a site that meets AA is adequate.
    4. AAA: This is the highest, most accessible score.
  4.  First I tried it with a white foreground text. Fail. Next I tried darkening the text. I was able to get something I didn’t love, but it worked. The darkest text — straight black — got a high score but wasn’t at all what I wanted.
  5. Ultimately, I decided I’d rather adjust my preferred background color to maintain a white font than image of final choiceadjust the font color. I played with the “lightness” and “saturation” sliders for the background color until I arrived at a combination that worked for my visual preference and got the score I wanted.
  6. Now I have my foreground/background HEX codes and can use them in Photoshop, Illustrator, web design, or my canvas course.

 

 

 

 

Now, test an entire palette.

When you first load Colorable’s matrix demo, it’s a bit jarring to the eye. But the brilliance of this tool is that you can try out a large number of colors in a single demo to see how they work together as an overall color scheme and how accessible they are for text contrast. You can adjust the colors via the left hand side sliders of hue, saturation, and lightness. Or, if you’ve already gleaned a palette from another source or crafted your own and have the HEX codes ready, you can enter them. I started with my dark woodsy green and chose some complementary vintage-looking colors.

a palette of color with acceptable contrasts shown in circles

In my first try above, check out the yellow circles and you see that while all of the colors look nice for aesthetic uses, for text, the top cream color is really only text safe with the navy blue for paragraph text — there it gets a “AAA” score. Headers can be achieved out of some other colors that get the score of “AA Large.” This isn’t actually a horrible outcome by any means, and I would feel confident designing a handout, site, page with this color scheme around those parameters. I would just need to accept that my text would mostly be navy on cream / cream on navy with a few other options for headers. Notably, none of the combos got a AA score, which would also be acceptable for paragraph text.

second palette with brighter white and better options

However, if I weren’t satisfied with this outcome and felt strongly that I wanted more text/background options, I could go one of two directions to increase contrast — darkening the saturated colors or lightening the unsaturated color. The clearest choice to me is to keep all my lovely mid-tones in the palette and sacrifice the warmth of the cream for a purer white. I take the lightness all the way up (or you could enter #FFFFFF, the easily memorable code for white). Now, I have way more options. You’ll see that the white now contrasts with ALL of the hues, wherein the first palette the cream did not contrast sufficiently with the last green. Further, in addition to the navy/white combination getting a “AAA” score, the red, dark green, and light blue now have an “AA” score, meaning they can be used with the white for accessible text as well. Looking at the top pink rectangle, now I have four combos instead of one to choose form with text, plus another for headers.

Ultimately, the choice between the two palettes is one of greatest priority: do I want to preserve the warmer, softer, more vintage feel with the cream and work with only one paragraph text color combo? Or would I rather prioritize multiple combo options and change the aesthetic a bit?  Either is fine.

I have one color — what’s the quickest way to find safe pairings?

Colorsafe Tool home pageAnother really wonderful tool is Colorsafe.co, a website where you enter the one color you have in mind and it will show you ALL of the accessible text colors that correspond. Once you click “Get Started,” you are prompted to setup your background color and text by selecting the size and font. To swap the background color, you click on the field for the HEX code and either paste in your own code or click around on the color picker until you find something.

For this example, I chose the vintage red from my palette and entered it. I then get many samples of colors that I can click to see in action. Or I can filter them by color groups using the circles at the top left.

 

Remember to think about color as an intentional choice

Ultimately, any effort you make to incorporate good design into your Canvas course is a win. Keep these resources in mind as you get creative with color, and don’t forget about contrast!

 

Resources:

Color Contrast for Better Readability 

Color as a Wayfinding Tool

Coolor.co Palette Generator

Colorable Text Demo

Colorable Matrix Testing

Designing for Accessibility: 3 Things to Watch For

Accessible Copywriting 

 

Tara Koger is an Educational Technologist with the Office of Distance Education and eLearning.