The web is a big place, and ideally, everyone should be able to enjoy it. In the United States, web-accessibility is not clearly defined under legislation. As a designer or developer, you can take matters into your own hands to craft beautiful websites and unique experiences, while meeting accessibility standards. Intentionally selecting colors through the lens of accessibility will change the way you think of web design.
Designing for Accessibility
When it comes to designing a website, understanding color and the way others perceive color is crucial. Individuals with visual disabilities/impairments, and even those with 20/20 vision, should be able to clearly identify the content throughout a website. Adhering to best practices can guide the design direction of your website.
Some common visual disabilities to consider when designing include:
- Low vision: Cataracts most commonly affects individuals over 40 and is a form of low vision that affects how contrast is perceived.
- Dyslexia: Dyslexia is a learning disability that affects how an individual reads or spells words, and can also influence how people perceive color.
- Color blindness: Red-green color blindness is the most common form of color vision deficiency in individuals who are color blind.
Best Practices for Web Design
To accommodate for the common visual disabilities/impairments previously mentioned, as well as creating websites that are easier to read for everyone, it is important to consider some best practices when it comes to designing for the web.
Measuring the degree of contrast between colors on a website is the first step to designing for accessibility. Color contrast is measured with a grading system referred to as “levels of conformance”, with the highest grade being AAA, 7:1 ratio. The highest level should be met throughout important areas across your site such as headlines and body text.
According to the Web Content Accessibility Guideline (WCAG) 2.0, which compares the luminance between two colors, text and elements on a website should have a contrast ratio of at least 4.5:1, which is the minimum for regular sized text. However, there are three exceptions to the requirement: large text, incidental text, and logotypes.
Here are some guidelines for different sizes of text:
- Normal Text: A contrast ratio of 4.5:1 is appropriate between the text and the background to meet AA standards.
- Large Text: For large text, the contrast ratio should be at least 3:1 between text and background. Text that’s 18pt (about 24px) or greater is considered to be “large.” For bold text, it only needs to be 14pt (about 18.5px) or greater to be If the text is bold, it only needs to be 14pt (approximately 18.5px) or greater to be considered large text.
When choosing colors, keep in mind that colors on the opposite ends of the color wheel have the max level of contrast, allowing for easy recognition and readability. Using colors that provide enough contrast between the content and the background, so that text and non-decorative images are legible. To consider color-blindness, avoid red on green or vice versa. Photoshop is capable of simulating how colors could be perceived by someone who is color blind, called soft-proofing. Referencing the Color Universal Design (CUD)- system can be used as a guideline to display the best colors to as many users as possible.
Using other indicators besides color is also a good practice when designing a website. Instead of using color to emphasize important or required fields, utilize hover features or mark said required fields with an asterisk or other indicator instead of only relying on color.
Does Everyone Need to Follow Standards for Accessibility?
Overall, following accessibility guidelines Influences better design decisions and encourages more usable design. They aid in filtering what design elements are necessary to the user’s experience and force organizations to think about how they use color palettes and unique brand colors. The designers at these organizations, or third parties, have to work creatively while considering these limitations.
Depending on where you live or what industry your organization falls under, meeting color contrast guidelines may or may not be mandatory. For example, federal agencies and contractors in the United States are required to adhere to WCAG level 2.0 web accessibility standards under section 508 of the Rehabilitation Act. For private companies, it’s not a legal requirement. Under the ADAs “places of public accommodation”, websites are not mentioned in the act.
For designers and developers that DO need to follow accessibility protocol, there are a number of different tools available. Some of them include:
- Color Contrast Checker by ColorKit
- Contrast Ratio by Lea Verou
- Colour Contrast Analyzer by TPGi
- Color Contrast Checker by WebAIM
Regardless of whether or not you are required as a designer or developer to follow accessibility standards, it’s never a bad idea to use them as a guideline when creating your website.