Skip to content

Category: WebDev

The bright stuff

Understanding Web Accessibility Color Contrast Guidelines.

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.0

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.

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.

Drupal tips (2)

 #3 Why are blocks being deactivated on my site? Why is my copy site acting strangely?

If you copy an entire site in order to split apart some of its content, make sure you investigate the cache folder and remove any remnant of the previous site cache. There may be a folder for the previous site.

Otherwise, for a little period of time, you’ll be getting some strange behavior that makes it seem like the old site is still hanging around on the new install.

Even if that description didn’t make sense, if you are having strange theme behaviors that flushing the cache, rebuilding permissions and/or a restart don’t seemed to have fixed… check out the cache folder on your server. 

Additionally, if you a splitting a site into two, and intend to use both sites on the same machine, and in the same database instance(ie, two databases on the same machine), make sure you check that the copy site isn’t pointing to any shared folder on the server, ie your cache folder. If somehow, both sites are using the same cache folder, changes on one site may affect the other site.

You are better off changing your site into a multi-site instance, for Drupal 7, because that should mitigate most of these problems. Multi-sites use different cache/files directories unless explicitly sharing modules/themes/frameworks out of the sites/all folder.

#4 git loses track/won’t overwrite settings.php file. (combo drupal + git tip)

error: unable to unlink old 'sites/default/settings.php' (Permission denied)
fatal: Could not reset index file to revision 'origin'.

Repairing/resetting my mac home directory permissions seemed to fix things. ( Resolve issues caused by changing the permissions of items in your home folder )

The Grid – v2 – impressions

Version 2 of the Web Interface to use the Grid is live. as are my struggles to co-exist with Molly, the AI that runs theGrid.

Examples

First, check out 2 grid sites I’ve created:

TLDR:  I’m not happy with v2. 

I’ve been working on this post for almost a year, I don’t want to bother with more screenshots or examples. v3 should be on its way shortly. I’m posting this now so I can compare my v2 thoughts vs v3. I did purchase a lifetime membership, so I haven’t given up on thegrid, fwiw.

To make my art-portfolio grid site present mostly the way I want, I’ve pretty much resorted to just importing Instagram posts.

Checkout my wishlist items for V3 on my second grid site.

~~~~~~

User Interface

The Backend User Interface is… clunky.It does look more polished than the beta version, and has some pretty animated menus, but it’s also less clear on how you and the AI work together to make a page.

!) The new site dashboard wastes a whole screen of real estate.

Large screenshot showing almost nothing above the fold.

 

 

 

 

 

2) Post ordering does not place the latest post at the top, and while you can drag and drop items to move them around, I can see this easily becoming onerous with 3 dozen or so images or posts.  You can actually zoom out the thumbnail views for easier drag and dropping, but there is no only text version to help you.

A little investigation has shown that the AI does not read the content or title of your posts, and no way to force thegrid to sort items on either the backend, or exposed as a feature for the front end.  No way except to drag and drop the articles back in order.

Posts with images in them do tend to stay in the same order as listed.

Search

There is no search option for either the front or backend.

Navigation

There are more navigation varieties this time around, so that’s nice, but rarely surprising.

Some of the options are ones I would never use, so I have to keep hitting redesign until I get one that’s ok.

 

 

Grid Font strangeness

Typography

Typography is strange, sometimes fonts are larger when placed next to similar designed smaller fonts. This example is using 2 links to two separate pages (same thing, shown differently, beside itself)

Additionally, every page load/reload seems to suffer from a CSS Flash of Unstyled content, which means the text/page jumps around a bit until it figures out what font style/sizes should be.

 

Redesign Process

This whole process irks me. We’re asked a series of questions everytime we ask for a redesign.

The Layout: Do you like it?

(where 1-3 means redesign, and 4 and 5 mean…)

The color: Do you like it? 

Choosing 1-2 here will prompt you to choose another color palette

Typography:

Molly.AI is supposed to be able to identify what parts of an image are important. Faces, skylines, or text text should not have text overtop of them, similar rules apply to cropping. This seems to be hit or miss. We used to have a quick key to check to see what part of the image the AI thought was the focus.

I’d be ok if you could at least click on the text overlay and see the original, or uncropped version.

Yes, you do have options to turn off the cropping, overlays and color manipulation. I want to see theGrid do things with the design that I wouldn’t have thought of, colors, layouts, navigation.

I’ve made a wishlist of things I want Molly.AI to be able to do, and put it on my Ghost In The Well grid site, but I’m going to copy it here as well (the flexible updating wishlist will stay on that site.

But, as of now here it is:

Regarding Function

  • Have a media manager, so I don’t need to upload the same image more than once. (confirmed for V3)
  • Iterate designs much faster, allow me to give input.(coming in v3?)
  • Auto pull in feeds of my other sites or social networks. (Instagram/twitter – perhaps into my drafts mode so I can curate later?)
  • Give Molly some initial direction in the purpose of my site. (maybe in v3)
    • Or, enter content and have Molly intuit, summarize and categorize what I may want the direction to be. (this feature may become the clustering idea and may be in v3)
  • Really surprise me
    • Design some crazy bad things
    • Design some crazy good things
  • Allow for tagging of posts
  • Have option to attach the user profile/sig to appropriate article.
  • Date and Time stamps available to be included on the posts.
  • Add Accessibility warnings for color/font choices.
  • Ability to pin certain articles or objects to the top of the homepage
  • Choice of different sizes for headers images/videos (both in app and on site) Currently wasting space ‘above the fold’
  • Ability to merge posts together

Usability:

  • Add settings/preferences for the admin experience. IE color theme/font sizes, animations on or off.
  • Add Revision history. Date/time/last edited by which user information.