Accessibility with Readability and Colors

accessibility

#1

I’m working on a project that allows users to create their own website page or “space”. Users are given a color picker to choose a color that will be their primary color. An issue I’m worried about is that in certain parts of the page, it is important for white text to be readable against that primary color and vice versa. So white, for example, cannot ever be a primary color. I’m not sure what kind of algorithm is required for the developer to use or how to best explain it so that he may implement into the page. I’ve read on some standards for accessibility but have had trouble really nailing a solution for this. Does anyone have any related experience with this?


#2

Those standards are called Web Content Accessibility Guide (WCAG) and they describe what contrast ratio is required from elements in your web product to pass on desired level (basically safe 7+:1 for AAA, 4.5+:1 for AA but it varies on font sizes).

this is implementation of those standards that could help your dev:


#3

kwedo,

That JS is probably what I’ll need and will share it soon–thank you! :champagne:


#4

You might check out Usability.Gov’s remarks on designing for colorblindness. There are some good practical suggestions there, including:

  • Use contrasting colors on opposite ends of the color spectrum
  • Create the site in grayscale
  • Never rely solely on color to convey information
  • Content areas should be monochromatic with the font color and background at the opposite ends of the color saturation poles

And a whole bunch more.


#5

Thanks @dougcollins! Most of those things are just good UX, but creating UI that is user-friendly for all audiences is also very important.


#6

You might also want to check to see if https://webaim.org/resources/contrastchecker/ has an API you could tap into that would let them pick better color combinations.


#7

Thanks @anne_dougherty!