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

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.

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

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

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!

Artists are out on Spring Break.

I did find some info on Ukrainian Castles. Hope that can inspire us.

I made some headway on sound design, deciding to focus on folk music.

Found an adorable lullaby about a sassy grey cat – and a YouTube video where I could hear it sung.  The link also had a midi version of the song, which I grabbed.

I found some other nice audio options at archive.org

Dream Passes By The Window CC – more info  Folk songs from over the Dniester captured Eugenia Yaroshinsky

Tutorial:

Learned a bit about SKLabelNode

Initially, when I added a lives counter to the child node, I could not seem to make the custom font appear.

This link helped me realize i needed to make sure the custom font was included in the build phase for the bindle.

How to add a true type font to an iOS project

I’m still having some hero control issues. I kept going over my code, finding little things that seem to help, but not fix my problem. ah, debugging… I ended up using git to help me compare code to the example code.  Seems that I had some variables set as optional vs required, and vice versa.

A friend told me that many of my errors were symptoms of CopyPasta. I’ll have to keep an eye on that type of thing in the future.

Exploring:

So, after all this 7 hours of tutorial, several other hours of debugging and research, I realized that this project would be a good candidate to use the GamePlayKit features for the things I want to do.

2015 WWDC Intro to GameplayKit

GameplayKit DemoBots

At this point, I’m not sure if I’ll be using them or not. Either way, programming the basics by hand will understand a bit of what GameplayKit is offering. I’m trying not to get sidetracked and stuck in a loop of constantly reworking the foundations. I could push that further out on the timeline.

Completion is always of more value than perfection. 

My next goal is to start getting things ready/resized to work for iPad sized devices and the level art, as well as making some new maps, add a timer, and change out the sounds.

Here is a bonus  A movie called “The Guide”  recently was released at international film contests regarding Kobczars and Stalin.

Design

The artists are buzzing about with some on the general look and feel and our heroine design is also in the works.

We’re trying to use inVision for collaboration, but it’s new to all of us, so we’re learning all together. I copied lots of my mood board images over to an Invision Mood Board… it doesn’t work like Pinterest, but does some things that pinterest does not. My favorite invision feature for mood boards?  It grabs a color palette from each image!

Here is a character sketch of our Hero by E.M. Isn’t she cute!

and some colors from N.P.

I made a couple sketches to explain the concept, ie that the hero is basically rock climbing up a tower.

I dashed off a brief wireframe for a common starting point. 

Research – Banduras, Kobzari

Since a lot of our inspiration is coming from traditional Ukrainian costumes, I searched for traditional Ukrainian instruments and came across a beautiful stringed instrument called the Bandura.

<a data-pin-do=”embedPin” data-pin-terse=”true” href=”https://www.pinterest.com/pin/407786941234575814/”></a>

<a data-pin-do=”embedPin” href=”https://www.pinterest.com/pin/214132157252118086/”></a>

This of course led me to wikipedia

Wikipedia: Bandura

Which led me to an amazing new fact:

Musicians who play the bandura are referred to as bandurists. Some traditional bandura players, often blind, were referred to as kobzars.

What?! This meant I hopped straight to the entry on the Kobzars

Wikipedia: Kobzars

In Ukraine, kobzars organized themselves into regional guilds or brotherhoods, known as tsekhs. They developed a system of rigorous apprenticeships (usually three years in length) before undergoing the first set of open examinations in order to become a kobzar.

Wikipedia: Preservation of Kobzar music

and this interesting list of recordings off off wax cylinders of actual Kobzar music! The recordings are rough, and the most popular ones are the roughest. Wax cylinder recordings degrade with each listen.

Tutorial

I’m 3/4 of the way through the maze games tutorial from CartoonSmart. I can load the maze and enemies from a json file, created by using Tiled. It’s a bit of a slog here in the middle, but I’ll push forward.

Climb the tower, pass the tollways using your ears and your wits, but don’t believe your eyes!

Design

My project now has TWO artists! /kermitarms.  That means our project is fully staffed and we can forge on!

The theme and design of the game is taking shape, at least in my mind.  I’ve shifted from thinking this will be a top down game, it will be a face on perspective.  Our protagonist will traverse a tower that looks safe, but is only an illusion, needing to use the audio clues to know which ways are safe/possible to climb.

To help inspire and communicate my vision I’ve created a mood board with visual themes/ideas.

Follow Stacie’s board Tollways Tower on Pinterest.

Research – Accessibility

Bought a book on accessible games, published in multiple formats by National Braille Press.  It lists many accessible games that I’ve run across in my research, as well as a few I have not.

I was a bit disappointed the content focused more on quick suggestions of which games to play than what makes each one ideal. There is still plenty of hints and tips to glean regarding control schemas. Most of the games are also listed on http://www.applevis.com with reviews, but it’s nice to have an organized selection in one place.

I will need to explore the VoiceOver options as I stitch things together. Is it as easy as adding alt text for web? or does it require a few more settings. There’s a standard, I just need to follow it.

Tutorial

Am halfway through the mazes tutorial on CartoonSmart. Spent some time learning how to make nodes and add attributes that allow them affect other nodes or physics.

Learned how to create a maze using the SKS builder and how to parse JSON levels created with a cool new(to me) tool Tiled.

I had to do some debugging before jumping into the 3rd section, somehow I’d lost my hero ship, and while the map was displaying fine, and all the gestures were working as desired, I could no longer see the ship itself moving around the map!

That took some slow review of the code to fix, but I’m happy it’s working again!  It’s the foundation of my sound maze, the basics I’ll start from before adding the pieces and graphics, and other variations.

More to come, I imagine I’ll be setting up some wireframes with my team in Invision over the next few days, and they are working on some character designs for our heroine, and some general look and feel for our app.

Our group project team has grown with the addition of a local super hero, and 5 designers. Most of us will meet on Thursday to get a feel for each other and start to figure out how we’ll work on the group projects and solo projects too.

My Progress:

I looked a bit at some iOS game books I purchased from the Packt.com ebook sale at the end of last year. I started a post about those books in the post titled: Currently reading – iOS

Then I researched a little on OpenAL,which may be overkill, time will tell.

• http://stackoverflow.com/questions/12854967/openal-3d-positioning-and-panning-center
• http://kstenerud.github.io/ObjectAL-for-iPhone/documentation/index.html
• http://www.david-amador.com/2011/06/playing-sound-using-openal/

Started looking at a Mazes + Swift tutorial at Cartoon Smart. I hope to get a good base understanding of tiles, and level design, and some basic boundary and control management, and then build from there.

• http://cartoonsmart.com/maze-games-with-swift-and-sprite-kit-video-tutorial/

I did a little more brainstorming on how I might want to use sound.

Ideas:

• Perhaps play a chord, with each tone relating to an open direction?
• Add some audio mini games like Simon games, where you listen and repeat?
• Use music to control the hero?

Previously:

iOS Project Log 1

The first is a group project, which I am working on with an awesome placid dinosaur, and the second is a personal project. I may post about the group project in the future, but I primarily want to document my journey/process/random flailing for the personal project.

Both projects will  match us with students from the Design Portfolio class. That frees me to focus on making function and mechanics, leaving theme, branding and graphic asset in their capable hands.

Curious about the class offered at MadisonCollege.edu, you can check out the instructor’s twitter here: EjKnapp@twitter.

Disclaimer: This is my personal website, all opinions here are my own and not of my employer. Enjoy!

Sound Maze

I am going to create a maze or roguelike game with SpriteKit, and want to explore sound and accessibility.

Week 1

• No official title, am using Sound Maze as a placeholder.
• Have researched some audio only games. Not a lot to choose from, have only found one really well polished. Papa Sangre II is an audio driven adventure game with minimal UI, and uses 3d binaural sound. I think a full 3d sound design is out of scope for the semester, so will be looking for something simpler.
• Exploring some Audio libraries like:
  •  OpenAl https://developer.apple.com/library/ios/samplecode/oalTouch/Introduction/Intro.html
  • Papa Sangre has an 3d sound engine, but does not appear to be available.
• Trying to come up with core concepts for the game design. I know I want sound involved, should I work with echoes, reflections, redshifts?
•  I’ll need to create a solvable maze maker https://en.wikipedia.org/wiki/Maze_generation_algorithm is a good place to start.
• By the same token, I may want to create a test ‘solver‘ to test that things are indeed solvable and test the sound design as well. (Could this become an antagonist racing the player?) http://www.astrolog.org/labyrnth/algrithm.htm#perfect
• I’m thinking, topdown, grid, 2d, but this may change based on design input. I anticipate most of the mechanics will operate the same tho.
• At this point I think finding your way through a maze with audio cues might be enough of a challenge, so am not currently planning monsters but may include some traps or obstacles.