Accessibility with Readability and Colors

Rei_Hino · 27 September 2017 22:59

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?

kwedo · 28 September 2017 00:11

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:

github.com

LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js

function $(expr, con) {
	return typeof expr === 'string'? (con || document).querySelector(expr) : expr;
}

function $$(expr, con) {
	return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

// Make each ID a global variable
// Many browsers do this anyway (it’s in the HTML5 spec), so it ensures consistency
$$('[id]').forEach(function(element) { window[element.id] = element; });

var messages = {
	'semitransparent': 'The background is semi-transparent, so the contrast ratio cannot be precise. Depending on what’s going to be underneath, it could be any of the following:',
	'fail': 'Fails WCAG 2.0 :-(',
	'aa-large': 'Passes AA for large text (above 18pt or bold above 14pt)',
	'aa': 'Passes AA level for any size text and AAA for large text (above 18pt or bold above 14pt)',
	'aaa': 'Passes AAA level for any size text'
};

This file has been truncated. show original

Rei_Hino · 28 September 2017 05:26

kwedo,

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

dougcollins · 28 September 2017 19:13

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.

Rei_Hino · 28 September 2017 20:10

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

anne_dougherty · 3 October 2017 09:39

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.

Rei_Hino · 3 October 2017 18:17

Thanks @anne_dougherty!