What do you do when your colour pallette fails WCAG?

It might be frustrating, but you really owe it to your community and site visitors to find shades that pass. Sorry. 

Designer: Ahhh only two of these colours pass wcag accessibility for text on white! It means I can't add any subtlety or depth. Agghhhh. Boo hoo. 

Me: Tough. People need to be able to read the site. Do your job and make something beautiful with what you have, you are the master of great design. 

See what I did there? I was forceful in being clear about the non-negotiable requirement of meeting WCAG, yet I was encouraging about the designers ability to meet the customer brief, and deliver something beautiful and equitable. I have literally had that conversation ten hundred billion times, yes literally not figuratively.  

I get that it is frustrating when design elements you want don't meet accessibility, but organisations can't comprimise on it. Not having enough colour contrast also makes your site hard to read on mobiles, and you do want people on mobile devices to read your site right? 

My two go to tools for testing contrast are: 

1. This colour comparisson contrast ratio checker - http://leaverou.github.io/contrast-ratio
    
2. And then to find a more accessible shade of the colour I want I use http://www.0to255.com/ which helps you find variations of any colour. I go through the colours I like until I find the accessbile variants. Sometimes a colour looks manky by the time I find the accessible alternative, then it's about being strategic - don't use that colour for text or test it with black rather than white. 

Does your style guide have a section on accessibility in it? Does it even have a section on web? Most designers provide style guides with RGB or CMYK colours without including the HEX alternative - which is a pain because you have to convert them all. 

If you'd like your style guide update to include a section on web and accessibility get in touch and I can do this for you.