Expert Tips For Color Accessibility On The Web

Published July 19, 2022

To promote inclusive excellence for a brand, digital technology professionals, web developers, and graphic designers should focus on building inclusive and accessible digital platforms. Color accessibility is one of the vital elements in digital accessibility that deserves more attention. 

Here are some valuable tips to improve color accessibility on the web.

Importance of digital accessibility 

Persons with visual impairment sometimes struggle when interacting with digital experiences, especially online. There is both an ethical and legal component to accessibility. Companies and website owners that fail to address concerns related to digital accessibility may find themselves on the wrong side of the law. 

There have been many federal lawsuits around inaccessible websites and class actions involved. Some regulations and accessibility standards include Section 508 of the Rehabilitation Act from 1973 and the World Wide Web Consortium (W3C).

Beyond legal ramifications, it is morally right to share information in a way that allows all people to access and engage with it equitably.

What are Web Content Accessibility Guidelines?

Web Content Accessibility Guidelines, also known as WCAG, represent a set of recommendations for making web content more accessible for persons with disabilities and impairments. The W3C publishes web accessibility standards, which change as technology evolves. They are the internationally accepted standard for web accessibility across applications and websites. 

The WCAG guidelines have three levels of conformance that you can meet; A, AA, and AAA, and each is progressively more difficult to ensure across browsers and applications. There are 25 criteria that you have to meet to reach Level A. To achieve Level AA, you must complete 13 more criteria in addition to the 25 for Level A.

What is the contrast ratio?

The maximum color contrast ratio is 21:1, which happens when one color is black and the other white. The lowest number is 1:1; this would occur with two similar colors placed together. The ratio stays the same when text and background colors are swapped.

Colors must have enough contrast between the background and text color to ensure readability. The technical term for this is luminance contrast ratio. This includes the text on icons, images, buttons, and other graphical elements that display information. 

According to the WCAG, accessibility standard levels AA and AAA require a best practice ratio. The latter is better in accessibility rating but limits options when it comes to color choices. 

Sufficient contrast

One of the ways to ensure greater color accessibility over the web is to aim for sufficient color contrast. The contrast ratio of the background to the text should be a minimum ratio of 4.5:1. This minimum can still be difficult for low-vision users. 

Colorsafe and Colorable are two great tools that help with testing color contrast. Colorable has sliders that help adjust saturation, hue, and brightness in real-time to see the accessibility rating in particular color combinations.

Checking the contrast

Adobe Color has introduced a new Contrast Checker tool, which helps to create color-compliant themes per web color accessibility guidelines. These color palettes have already been contrast checked and can be shared using Adobe’s Creative Cloud libraries. 

Contrast Checker can quickly identify and fix color legibility in your designs and meet the criteria for color accessibility on the web. 

Consider textures

It’s also fundamental to ensure that you are not solely dependent on color when conveying important information. For example, when relaying system information such as success rates, errors, or a system warning, incorporate appropriate iconography and messaging to call out and identify the issue. When displaying charts or graphs, always give the user the option to add patterns or textures. 

Persons with visual or color impairment might not be able to see differences in colors, or perhaps purple looks gray to them, as an example. It is important to provide a means to distinguish things like errors and graphs without worrying about color affecting their data perception. 

Trello, a web-based organization tool, has an excellent feature called Color Impairment Friendly Mode, which adds a layer of texture over the color. This simple addition allows persons who are color blind to see the differences in labels.

Focus states

When an HTML element handles keyboard input, it is said to have focus. These focus states can help navigate a website using just a keyboard. Persons with visual impairments might use their keyboard to navigate content. The focus states will highlight each component of that content. 

Finally, style guides

The best way to improve color accessibility on the web is to give your team a proper reference to access the standards whenever needed. Provide the color accessibility standards to new employees during orientation, so the policy is known from the start and becomes part of their everyday thought process. This reduces confusion and ensures that accessibility is one of the top priorities for your team. 

One way to offer color accessibility documentation is to include it in a brand style guide or user interface (UI) kit. Tools such as Invision DSM and InVision Craft offer highly effective techniques to sync processes. This can significantly impact consistency and efficiency, allowing brands to take overall digital accessibility to the next level.

Event: How Do You Know You're [Still] Accessible?

Join us Tuesday, November 15th at 1 PM ET for our next event on how to maintain accessibility as your company matures through strategies, processes, and maturity models.  Register by clicking here.

Vendor Directory

Accessibility.com now offers an impartial listing of digital accessibility vendors.  Search for products and services by category, subcategory, or by company name.  Check out our new Vendor Directory here.

Comments