Preparing for Good Color Contrast

Hi! Guess what? For two decades, I’ve known about the need for good color contrast in web content, especially text you want people to actually read. I’ve known that one of the first guidelines for charts, graphs, and infographics is to “never rely on color alone” to convey important information. You’re supposed to add pattern or placement as a secondary means to convey information. I’ve known that there are a large handful of types of color vision deficiencies out there, and that the Adobe Creative Cloud programs have simulators you can use to soft proof your contrast. For instance, in Illustrator, you can go to View > Proof Setup > Color blindness – Protanopia-type or -Deuteranopia-type.

I do have a hard time with these medical terms, and so, for the last twenty years, I’ve been unable to memorize what Protanopia and Deuteranopia mean, and I was assuming one was for the red/green color vision deficiency and the other was for the blue/yellow deficiency. But I was wrong.

I made a vector pattern in a blue and yellow color palette, and I tested it with both of Adobe’s presets, but neither one changed the color values very much. Turns out that both of these simulators are for different versions of the red/green one.

In the following screenshot, I’m previewing my pattern inside Illustrator with a third-party app that ChatGPT suggested: Sim Daltonism. I’ve opened the menu path for you to learn where the colorblindess simulators are, but I’m using the CMYK profile during this screenshot.

screenshot of an adobe illustrator file, showing the user interface. open menus point to the color blindness protanopia simulator. also an overlay labelled Tritanopia is showing that a yellow pattern has turned pink.
Sim Daltonism overlay shows the Tritanopia preview over a yellow pattern.

I turned to ChatGPT. I asked about the Adobe simulator and why it didn’t seem that my yellow-blue pattern changed much. Here is the response.

CHAT GPT on Color Vision Deficiency

Yes, this is an excellent question and a common point of confusion. There are indeed different types of color vision deficiency (CVD), but not all affect blue and yellow perception equally.

Adobe Illustrator includes two color blindness simulation modes:

  • Protanopia (red-blind)
  • Deuteranopia (green-blind)

These are the two most common types of red-green color blindness, and they primarily affect the ability to distinguish between red and green hues. Blue and yellow usually remain distinguishable in these cases, which is why you didn’t see much difference in your pattern when previewing with those simulators.

But what about blue-yellow color blindness?

The condition you’re referring to is called Tritanopia, which is a blue-yellow color vision deficiency. It affects the S-cones (short-wavelength cones), which are responsible for blue light detection.

In Tritanopia:

  • Blues can appear greenish
  • Yellows can look pinkish or faded
  • It can cause confusion between blues and greens or yellows and violets

Why didn’t Illustrator show it?

Adobe Illustrator does not currently include Tritanopia simulation in its color blindness proofing tools. This is likely why your blue and yellow pattern didn’t show noticeable changes. Illustrator’s built-in preview is limited to Protanopia and Deuteranopia only.

Recommendations:

To check for blue-yellow contrast issues, you’ll need to use third-party tools or plugins.

Tools like Color Oracle (free desktop application), Sim Daltonism (for macOS), or Stark (a plugin for Adobe apps and Figma) offer Tritanopia simulation.

You can also manually test your design by converting it to grayscale or viewing it with Tritanopia filters from accessibility checking software.

Accessibility Laws and Guidelines

Since January, 2025, I have been studying for the certification called CPACC – (Certified Professional in Accessibility Core Competencies) from the IAAP (International Association of Accessibility Professionals). I’ve studied their body of knowledge document, plus I’ve enrolled in the Office of Information Technology at Princeton University – EduNext companion study guide.

Let me tell you, just because I’ve worked on making websites accessible for decades doesn’t mean I was automatically ready for this certification. Studying for it provides me with a much broader perspective on disability rights, human rights declarations, and models for which to understand disability.

While studying, I realized I needed much more depth of knowledge when it comes to laws, charters, and declarations. I was quite confused when I got to the “Domain 3” of the outline about laws. (National Instrument? What’s that???) I read it a couple times, worked with Chat GPT to get some basic knowledge which seemed to be inferred in the EduNext course, then I decided I needed to see all this information in a timeline format.

So, I made my own interactive timeline from the study materials. Go check it out for yourself. Because it is probably a bit inaccessible, I put it on a page by itself so it can be viewed without a sidebar.

PDF Accessibility

colorful stripes

I found a fantastic blog post by Adobe about accessibility champion Dax Castro’s business CHAX Training and Consulting. I’ve been aware of Dax for about five years now, due to his free tutorials about PDF accessibility via InDesign during the livestreams of the Adobe Max conference. I encourage everybody who makes PDFs that get posted on the web to learn from Dax and his business partner Chad Celius. I have watched and re-watched several of their recorded training videos, and I find them so valuable!

Read the blog post: An accessibility champion’s journey to digital inclusion using Adobe’s transformative solutions

WordPress Accessibility Day

I watched a few of the talks during the previous livestream of WordPress Accessibility Day, and I found them so intriguing that I volunteered to emcee at the October 2024 event. I’ve been approved for a shift, and I have to say I’m pretty excited about the T-Shirt this year.

The T-Shirt says “:focus – It’s a feature, not a bug,” and it is meant to educate content creators that the highlight on elements that happens when one tabs through a webpage are meant to be there, so one should not remove the :focus element from one’s CSS.

Read the WordPress Accessibility Day News Feed.

Metaverse Presentation at Web3 Leaders Summit

I booked a sponsor booth at a metaverse-based leadership summit on August 22, 2024. I gave a 15-minute talk about usability and the building blocks of accessibility to a group of people’s avatars live, and it was simultaneously live-streamed to a handful of re-streaming platforms such as Kick and Youtube. Hosted by CreativeOwls.io, there were panel discussions, and presentations on situational leadership and web3 wallet safety. You can still check out the Spatial.io space for the Web3 Leaders Summit. I had a great time!

Check out my own recording of my presentation. I focused on improving digital literacy through usability and inclusion. Yolantis is my artist name and business name.

I presented my five building blocks for accessibility, and will go deeper on these concepts in my webinar. Color contrast, heading hierarchy, alt text for images, descriptive link text, and keyboard-only navigation.

Please consider registering for my Zoom webinar on Aug 29, 2024 to hear more about the building blocks and see my accessibility bot in action. If you cannot make it during that time, and you register, I’ll email you with the link to the recording afterwards.

Global Accessibility Awareness Day

May 16, 2019 is the eighth Global Accessibility Awareness Day (GAAD). If you post stuff on the web, I’d like to bring your attention to accessibility.

via GIPHY

Some Terms:

Assistive Technology: Literally, technology to assist people with different disabilities. People with low vision use screen magnifiers, people with vision impairment use screen readers or refreshable braille displays. People with hearing impairments depend on closed captions in videos with audio. People with motor impairments may not be able to use a mouse or sometimes even a keyboard. There is one other class of disability with the label cognitive disabilities. Assistive tech for this group includes things like fonts specialized for dyslexia, and uber-clear writing and placement in form labels, plus the use of plain language all throughout the site.

Accessibility: In this usage of the word, we refer to the ability of web users with all sorts of disabilities to access content on the web. Access to content on the web can be blocked or limited for assistive technologies depending on many factors.

WCAG or Section 508: These terms are used with the phrase “compliance with,” since Section 508 is actually a part of the Americans With Disabilities Act, and WCAG is a set of guidelines published by the Web Accessibility Initiative to help content producers and developers to code better stuff for the web.

It’s All About Awareness

GAAD is an awareness day. What content managers don’t know can impair accessibility. Here is a pretend scenario: Content manager receives a signed document on paper and is instructed to ‘post this on the website.’ They use the multifunction printer to scan the paper to a PDF and email it. They post to the file manager in the CMS without checking the file. Bork! The file turned out to be an image of the text with no machine-recognizable words in it. This means people using screen readers have no access to that content because it cannot be read aloud by a machine. This is to say it’s inaccessible content.

If the content manager knew that text scanned in as an image could pose a problem for some of their audience, they could scan the document using different settings so that it could be machine searchable, and, even better, to have tags for accessibility added to the PDF and alt text added to any images in the document.

Another scenario: Web manager wants infographics all over the website to make data-heavy information more visually interesting. Web coder uploads three text-heavy images without any alternative text (alt text). Bork! Now all that ‘info’ in the infographic is inaccessible to users of screen readers.

In the scholarly articles about accessibility I have read, an industry’s failure to provide accessible content boils down to ignorance on the part of the developers and content managers. There isn’t much incentivizing going on to help people want to learn how to comply with accessibility guidelines other than the negative incentive of a potential lawsuit for failure to comply. And that is the use-case I see reported most often: a disabled customer brings a lawsuit against a government entity for failure to provide content in an accessible format.

What You Can Do

I have been using the hashtag #OhMyGAAD on LinkedIn to publicize the Global Accessibility Awareness Day. People are also using #OhMyGAAD on Twitter. I’ve signed the GAAD accessibility pledge and I earned the Site Improve certificates last year when I started using Site Improve. Before that, I had been coding federal government content to comply with Section 508 since 2011, and I also wrote a term paper on website accessibility in 2016.

Look up the hashtag on your favorite social media. Do three accessibility fixes on your own web content. When I think of accessibility, I remember that I am human, and I may not always be fully-abled as I am now. All the steps I’ve taken so far to publish accessible content are things I’d want any developer or content manager to do for me if I needed assistive technology.

Catching Up

Since I have left this website alone to fend for itself for over a year, a lot has happened. Today I’m home from work because of a blizzard, so I have updated my PHP and WordPress versions. I added security to the protocol, which means the web address should now start with https rather than http. It’s fitting to come in and clean up the site back-end after Google published a Google Doodle on the 30th anniversary of the world wide web. Tim Berners Lee submitted a proposal for the http protocol 30 years ago! Let’s see, what was I doing then? In 1989 I was a freshman at a college in Maryland and I was frustrated with computers…I had no way of knowing I would end up managing websites and website content.

I’m now working on state website content full time and have precious little time to focus on this personal blog. I’ve also let go of Adobe Premiere and Dreamweaver so I may not be able to do video tutorials until I find time to learn another video editing tool. Adobe is so pricey that I pared it down to a Photoshop and Lightroom-only subscription.

STC

I’ve upgraded my membership in the Society for Technical Communication (STC) and I anticipate attending their annual summit this year. This year it is time to invest in my own career growth! Working on the web can be rewarding. I will focus on attending workshops about user experience and content strategy.

A Bit of Nostalgia

I’ve been working on the web for about 20 years now. In 1999 I learned Dreamweaver back when Macromedia owned it. The web was a wide-open field of possibilities. My first job earning money for website services? I freelanced for a woman who wanted to build and sell a screensaver for people who liked watching soap operas in 1999 or 2000. So I used Photoshop and Director to make a little self-playing slide show of all the soap opera stars she told me to put in. I didn’t recognize a one of them because I never watched soaps! I haven’t thought of that in a decade. I wonder where that project is… I don’t think I could even find a screenshot of it. I remember I had made it look like it was a reel of film moving left to right, with the little holes at top and bottom. Each frame was a different character from a show. And I suppose she offered the zipped file for sale on her website so users could buy it and install it to be their screensaver.