Google wants all websites to be fully accessible so that everyone can use them. Whilst we are often viewing websites from the comfort of our homes, it’s important to ensure that your website is useable in a variety of different environments.
Have you tested the usability of your website using a phone in bright sunlight?
Broadly speaking, when we say a site is accessible, we mean that the site’s content is available, and its functionality can be operated, by literally anyone.
Google Web Fundamentals Accessibility Guide
Whilst accessibility covers many areas of a website, the most frequent issue I see with photography websites is with contrast, so this article is going to address showing you how to check your contrast
You’re familiar with your website, so will find it easier to navigate, so getting someone unfamiliar with it to load it and try to navigate it can be a good way of testing the usability.
Whilst your friends and family can test out your site, that’s still a fairly small sample group.
What is an Acceptable Contrast Ratio?
The good news is, a lot of research and testing has gone into creating a set of web guidelines that set out what the ideal contrast ratios should be.
High colour contrast makes text and images easier to read and comprehend. Web Content Accessibility Guidelines (WCAG) 2.0 recommend a minimum ratio of 4.5:1 for large text and 7:1 for other text and images. For example, avoid light grey text on a white background.
https://support.google.com/sites/answer/7529116?hl=en#:~:text=Use%20high%2Dcolor%20contrast,text%20on%20a%20white%20background.
‘What on earth does a contrast ratio of 4.5:1 look like?’ I hear you ask!
The good news is, some awesome geeks have made a variety of tools to check contrast ratio.
In the video below, I demonstrate how to use a contrast checking tool to help you improve the test visibility (and accessibility score) of your website.
Website Accessibility Resources
Google’s Web Fundamentals guide on accessibility: https://developers.google.com/web/fundamentals/accessibility
Contrast Checking Tool: https://colourcontrast.cc/