According to Web Content Accessibility Guidelines 2.0 (WCAG), the color contrast on your site needs to be:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Does your site conform?
The easiest tool to use to see if your site conforms to the color contrast requirement is WAVE. Go to http://wave.webaim.org/ type in the url of the page on your site that you want to check. The WAVE tool will check the page and give you results regarding many accessibility issues. The results of the accessibility scan will appear at the left of the page. At this time you will look for the results for contrast errors which have a black box next to the results ( see image to the right – I added a red box around those results).
Should you have any contrast errors, you can check the details of those errors by clicking the contrast button at the top of the results (identified on the image to the right within a black box). If you click on the icon near each error, it will take you to that place on the page. Now that the errors are pointed out, you will be able to identify them immediately. Note, however, that WAVE is a computer generated program and will be reading the code of your page, if there is an area on the page that lists a font color and background color that do not have sufficient contrast, even though you don’t have any text in that area, an error will appear. That is why you need a person to review the test results. Automated testing is not enough.
What to do if your site does not conform?
Today’s browsers offer users the ability to change the color contrast on websites. In theory this should satisfy the legal requirement for contrast on the site. However, at the time of writing this post, I have not yet received a response to my December third letter from the Commission for Equal Rights of People with Disabilities Department of Justice with confirmation that this is true. When I receive a response, I will update this post.
How can the browser change your website’s color contrast?
Using your own site as an example, Follow the instructions below:
To change contrast in Firefox
- From the main browser menu choose options
- From the options menu choose content
- Choose the color option on the right hand side
- The color menu will open up, choose your preferred foreground, background and link colors.
To change contrast in Chrome
- Go to the Chrome store and download the free extension, High Contrast
- The extension dialogue box will open where you can adjust the settings
- The icon for the extension will be placed on the bar near the menu icon. You can also manage the extension from the extension manager.
- Clicking on the icon will open the dialog box enabling you to change the settings
To change contrast in Explorer
- Use the keyboard shortcut ALT + left SHIFT + PRINT SCREEN to open the Windows high contrast dialog box. Choose yes to change the computer settings to high contrast. If you want to change your high contrast settings click on the Start button, choose control panel and then ease of access center.
To change contrast in Safari
- The contrast change is not done within Safari rather it is done through the computer’s settings. So go to settings and choose System Preferences
- Click on “Accessibility” and select the the ‘Display’ panel
- Check the box for “Increase Contrast”
- Exit settings and open Safari and note the changes.
Go to settings and choose accessibility. There you will find options for large text and high contrast as well as text to speech output.
How did it go?
What do you think of your site in high contrast? Now you have had a glimpse of how users with visual challenges view your site.