To prepare, I, along with a team of developers, product managers and other designers took an amazon course on accessibility best practices. The project was split between developers and the UX team- with myself taking the lead on all things Visual and UX design related, including making sure colors, typography and contrast were all accessible compliant.
For guidance and inspiration, I noted the color choices of other reputable accessible compliant sites. Needless to say, contrast was definitely top of mind in these designs, and subtle colors just weren’t an option.
Using a web accessibility checker, we performed a sweep of all our pages to check for issues such as color contrast, font size, and colors as relates to color blindness. I performed an audit of all the colors within our site and used this as a starting point for adjusting the TenMarks colors so that they were contrast accessible. Using the sketch plugin “Color Contrast Analyser” i was able to quickly check colors against each other and whether they pass the minimum W3C AA compliance.
Color Palette, Studies and Hand Off
Below is the final accessible compliant color palette that I created, and some quick studies of common pages and their elements that i created to ensure the colors harmonized within the existing framework of the site.
In handing off the project to developers, I created a red-lined style guide that called out the specific areas that the new colors and font sizes would effect. The developers used this as a guide to alter the CSS to reflect the new changes.