Skip to content

Stacie Arellano Posts

The bright stuff

Understanding Web Accessibility Color Contrast Guidelines.

Feb. 19, 2020

This article has been expanded, edited
and posted to one of my favorite sites.

It was a pleasure to work with the team from CSS-Tricks. --Stacie

TLDR? Check out my example on codepen.

Scenario: You get a complaint about the contrast on your website, but it seems perfectly readable to you. How can you know what’s wrong and how to fix it?

There are some life hacks you can try out, like checking out your site on your phone out in bright sunlight, or adding a CSS filter to turn your whole site grayscale, but… you don’t have to trust your eyes. Your eyes may be bionically enhanced, but there is no way to be certain that everyone visiting your website has had the same cyber implants as you. 😉

You can mathematically know if something has enough contrast.

The guidelines for AA contrast is 4.5:1 for most text and 3:1 for large text. But… what do those numbers even mean? The ratio explains the difference between the Lightest color brightness vs the Darkest Color brightness. (relative luminance of each, actually, which makes it clearer, right?)

Let’s start with an egregious example, putting two colors together on the text and the background.

Title of Your Awesome Site

Screenshot of contrast warning text that WordPress + Gutenberg gave me when I set teal text on gray background for the example above. It reads: This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
Hey! WordPress thinks my example of bad color contrast is bad too!

Ok, you say. That teal on gray color combination is not exactly great, but I can mostly make it out. (I’m glad one of us can, it’s pretty much a muddy gray mess to me.)

The contrast ratio for that fine piece of hypertext is 1.47:1

To arrive at that number we require the use of… mathematics, with a side of understanding the differences between human and computer vision.

I wanted a better understanding of what the contrast scores were actually checking. This journey taught me about the history of computer vision and a bit about biology, and gave me a small review of some mathematics I haven’t touched since college.

I think I’ll just let the computer do the math for me from now on. Trying to work out the details step by step on paper/with a calculator gave me a couple weeks of frustration. It was a lot of me figuring things out wrong, and comparing to the end result of existing contrast checkers.

Remember how the teachers’ in school always wanted you to show your work, ie, how you got to the answer? I made something to help us out.

If you view this on codepen with the console open, I output results step by step there, where I initially worked out the math before displaying things in the fun retro video game style. Go ahead, try our two example colors: 1ABC9C and 888888.

(You can also give it a try, inside this article, but you have more browser breathing room in a new window. Your choice! )

See the Pen Understanding the Contrast Ratio by Stacie (@Metahari) on CodePen.

The digital devices around us make gamma encoding and decoding calculations all the time, to show us things on the screens that match up to our perception of how things appear to our eyes.

I just want my page to have proper contrast, what do I do?!

There are a variety of accessibility resources that you can can audit your site.

First, identify areas that are not serving your accessibility needs.

Small snapshot of the top of the WAVE tool results, showing the 3rd button, contrast, selected.
The third button at the top of the WAVE sidebar results shows contrast related results.

Use free tools Google’s Lighthouse Audit or the WEBAIM WAVE tool have places to identify contrast errors (along with other helpful accessibility tips).

Then, follow the suggestions of the audit and use best practices to improve your scores, and remove the errors.

Once you identify contrast errors you can try out some different options right there in the WAVE tool, click on the color box to pop open a color picker. Then play around until the errors go away, and you’ll know what you can replace in your code.

To finish, run the tests again to make sure your changes improved things. Congratulations! You just made your product better for all users, not just ones affected by the accessibility errors!.

After all that, what comes next is up to you!

You can make it easier on yourself and start all new products with the goal of making them accessible. Make accessibility guidelines part of your requirements for both technology AND design. You’ll save yourself potentially hundreds of hours of remediation, and related legal complaints.

US government/education websites are required to comply, but other industries are often taken to task for not making their sites equally available for all people.

If you have the option, consider using established and tested frameworks and web libraries (like Twitter’s Bootstrap or Google’s Material Design) that have already figured out optimum contrast theme colors. In many cases you can take just what you need (the CSS) or at least review their color palettes to inform choices.

Derek Kay has reviewed a list of web frameworks with a focus on accessibility, which I suggest you read if you are looking for more options.

The US Web Design system shows one way to solve color/contrast puzzles (ie, use their css token system that labels colors to make contrast differences super clear) but they also link to several very good resources for improving and understanding contrast.

We took a deeper dive here than you ever really need to know when you just want to do is fix your contrast issues, but understanding what the ratio actually means should help you remember to keep contrast in mind when designing future sites, web apps, and other software.

I’m not the ultimate subject expert, just a very very curious girl, who sometimes has issues reading things with low contrast. If you have any additional thoughts, corrections or further research to share, please leave a comment and I’ll amend this article, or the example. Thanks!

Drush – Segfault fix

TLDR: Delete the node_modules folder!

We’ve been working on standardizing our local environments here at work, and have recently started using Grunt and SASS and some image processing as part of our local Drupal development.

Recently I added a Drush command for us to use to easily get Grunt running from any folder in the docroot. It works great! just a little drush grr and off we go!

It’s a pretty simple, and builds off a lot of work I did making a drush command for us to engage visual regression with BackstopJS. (checks for dependencies, grabs git branch name, passes variable flags into JS) I’ll make a different post about that sometime.

Anyway, since all the grunt files live in the theme folder, the most important part was telling drush where that was, so it we could run npm install, and get everything running locally, including live reload, which is awesome.

We’re still using Drupal 7 and by using :

$path_to_grunt = drupal_get_path('theme', 'mc_main');

Now, we can tell drush where to run grunt for us! Of course, we did need to make sure to change the working directory, so the command would actually run there,

chdir($path_to_grunt);

So then we just run`npm install , with a few checks, and we’re good to follow that up with :

grunt --color

Hooray! right?!


Ok, but then I found running drush on things started crashing my PHP with SEGFAULTS all over the place. ugh!

What was going on? How do I fix it, I just wanted to test our latest release and I’m looking at error logs and …

Ok, after some research, and digging through my bash/zshrc files, and getting some strange errors from the command line after trying to drush updb like :

sh: line 1: 36818 Segmentation fault: 11  /Applications/DevDesktop/php5_5_x64/bin/php /Applications/DevDesktop/tools/vendor/drush/drush/drush.php --php=/Applications/DevDesktop/php5_5_x64/bin/php --backend=2 --root=/Users/me/sites/devdesktop/mcmain-dev/docroot --uri=http://default pm-updatestatus 2>&1
     pm-updatestatus failed.

I mean, what? Why is drush trying to even use php 5_5 at all? where is that setting? (I still don’t know.)

I finally ran across this article: Drupal’s Drush Segmentation fault:11

Arvind explains that when npm install runs on your package.json file and creates the node_modules folder in your theme folder…

Drupal freaks out because many node modules include their own .info files. Drupal is looking for only one .info file per theme to exist.

He provides a solution to add a postinstall line to your package.json to remove all the additional .info files inside the node_modules folder.

but! short term, super simple solution for anyone who is experiencing drush weirdness after running an install on a package.json

Delete the node_modules folder!

At least while you’re trying to run other drush commands, feel free to get your grunt on when you’re done.

—update Dec 2, 2019

So, I ran into another strange segfault, this time:

/Applications/DevDesktop/tools/drush: line 11: 77368 Segmentation fault: 11  "/Applications/DevDesktop/tools/vendor/drush/drush/drush" "$@"

Which again, seemed very strange. But, happily, the same solution (removing the node_modules folder from the theme I was testing) still works!

It doesn’t seem to be an issue with my teammates, but I’m leaving this little update to remind me, and maybe you that sometimes the solution is not what the error is complaining about.

Twine Resources

What is Twine?

Twine is an open-source tool for telling interactive, nonlinear stories.

Operate Twine in a browser, or download the software to your computer and use a visual interface to create linked stories which can then be output as a single html file that you can put online to share.

What has Twine been used for?

  • Interactive Fiction Games, Game Research, Writing, Mind Mapping.

Twine Links

(I’m a)Character Reference

I want to share something really amazing with you.

Early this year I backed a Jane Austen style Role Playing Game game called Good Society.

I jumped at the chance to become a NPC (non player character) or in this case an NPG (non player gentry). I sent off some pictures and some descriptions, and was so surprised to get an email this weekend showing off the final card (front and back)

Basically, I’m now a Jane Austen character that people can use as a friend, romantic rival, object of affection. People will choose my card to sit in front of them while they play.

I am super pleased with how well these came out!

Good Society Card, Side 1Good Society Card, Side 1Good Society Card, Side 1  Good Society Card Side 2

The artist is Aviv and the publisher of the RPG is Storybrewers.

The book and cards should be in people’s hands before Christmas, and I look forward to seeing how people like ‘Anastasia’ the ink splattered artist in their games.

 

The Grid V3 coming soon?

The latest V3 webinar was a bit unfocused. I still have lots of questions, about the software, about the company, but once I had a moment to piece together all the content, I still find myself intrigued. Here’s hoping I get to kick the tires on V3 soon.

The webinar software let us all down with multiple instances of frozen screen sharing, and the presenter could not seem to keep the narrative going in one direction for more than a minute, we did learn quite a bit.

  1. Design improvements
    1. Minimal User interface hides out of your way until you need it.
    2. Improved media management, let the AI change things around, or edit directly.
  2. Secure
    1. Encrypted content creation (not even the Grid company can read what you are creating unless you invite them to a project)
    2. Encrypted swarm – real time collaboration
  3. Speed
    1. WebGL based code is faster to display on all devices and much faster for the AI to juggle variations.
    2. Convenient new integration services like Unsplash help you gather creative commons, copyright free images directly.
  4. Social
    1. Screen recording directly in app lets you share what you see, and trim the video before saving it to your page or the media library.
    2. Real Time collaboration lets you work with friends and coworkers from all around the world at the same time.
  5. Nerd/Developer friendly
    1. An in app editor lets you create new hgml pages or alter parts of an AI created page you’d like to fine tune.
    2. Hopefully, an updated API will be released to allow developers to create and evolve new experiences for the Grid and the Multiverse.