Accessibility Question (colorblindness)

Does anyone have trouble seeing the highlighted link text in this sample?

Screenshot 2018-06-17 13.46.28.png

I know there are different types of color-blindness with regard to which hues don’t register. Originally I was using light gray text with purple highlight links. Then at sunset f.lux kicked in on my monitor, warming the color temperature and removing most of the blue, and suddenly I was presented with a screen that had no visible links!

I’ve heard the most common form is not begin able to distinguish reds, so I switched up and made it purplish text with bright white highlights. Now I’m second-guessing and hoping the purple doesn’t disappear for someone. Does anyone have feedback on this or better combinations of colors?

For reference, there’s not an easy way to include a “colorblind” option that changes the theme on the fly for those who need it. Although I’m not good with CSS I suppose I could figure out how to make the highlighted text underlined?

There are extensions such as Stylish for the end user to program in their own CSS codes. (I use it even on this forum, to get rid of the large padding around everything and other annoyances.)

I am red-green colour-blind (as you say the most common form), and it is fine for me. That said, I may not be that severe; I cannot tell red and amber (orange) on traffic lights apart, but the green looks very different. My grandfather could not tell the green and red apart.

There is a software called Color Oracle that is supposed to show you how someone with colour blindness would see the screen. I have absolutely no idea how accurate it is, however.

My understanding is that everyone can detect differences in brightness OK, and you have a fairly significant difference there. So I think you’re fine. In general if you take a screenshot and convert it to grayscale and all the differences are still clear then AFAIK you should be totally safe.

Once brightness isn’t enough and you need different colors to be distinguishable then it gets more complicated, of course.

You could also use font weight (thin/bold) or other things (italics, underline, very different font faces) to distinguish different things if your tools support that. Those should be universally visible, I believe.

If you search around there are plenty of color blind simulators out there which attempt to show the effect so you can see where you might have trouble. I like this one which allows playing with a bunch of different forms of color blindness: … simulator/

There’s also (“color advice for cartography”) which has a bunch of color schemes for displaying various types of statistical data on a map, and many of their schemes are color-blind friendly. I’ll often browse through that as a starting point.

1 Like

Thanks, everyone for the suggestions and advice!

AXMA has a template selector where you can change certain things, then a “StoryStyle” passage which looks mostly like CSS, but I think I need to buckle down and learn what everything is. Perhaps I need to actually put the exported HTML it creates into one of those utilities that shows you in real time what the changes are instead of poking and guessing at the StoryStyle passage.