The World Wide Web Consortium Accessibility Initiative developed WCAG guidelines with organizations and people around the world intending to provide a standard for website content accessibility.  The documents explain how web content is made more accessible to those with neurological, learning, language, cognitive, speech, physical, auditory, and visual disabilities. ‘Content’ typically refers to information on a web application or web page.

It includes natural information such as sounds, images, and texts, and markup or code that defines presentation, structure, etc. Color theory is based on guidelines and rules surrounding color and its use to create authentically pleasing visuals. It allows for the logical color structure needed to develop and strategically use color palettes. The results evoke a particular aesthetic, vibe, or emotion.

Images on a website must be in ADA Compliance regarding color and contrast for accessibility. Users who are colorblind or have visual handicaps need to view images as an average person does. The WCAG (Web Content Accessibility Guidelines) 2.1 are requirements for accessibility.

WCAG 2.1 Image Contrast

Ensuring a high contrast ratio for a website design makes it easier for colorblind and visually impaired users to interact with and read the content. The minimum contrast requirement for visual presentation (text and text images) needs a contrast of 4.5 to one. Exceptions include large text, incidental images, and logotypes. Large-scale text and large-scale text images have a minimum contrast ratio of three to one.

Images that are not visible to anyone, part of a picture with significant other content, images, or text of an inactive user interface and decoration, have no contrast requirement. There is also no requirement for the text that is part of a brand name or logo.

WCAG 2.1 Enhanced Contrast

The contrast ratio for enhanced contrast of visual presentations is seven to one. There are exceptions to the requirement also. Large-scale text and large-scale text images have a contrast ratio of 4.5 to one. Incidentals and logotypes have no contrast requirements.

What Is a Contrast Ratio?

Contrast is measured in terms of brightness/lightness between colors. The ratio of a black background is one to one. Black text on a background of white has a contrast ratio of 21 to one. There are several ways to define color in terms of web pages and HTML.

RGB (1,51, 153) refers to the amounts of red, green, and blue that form a specific color. Colors range from zero to 255. The hexadecimal format for web pages and HTML has red, green, and blue values made from combinations of six letters and or numbers. HSL or HSB refers to hue, saturation, and brightness/lightness as a way people see colors. It helps improve the contrast ratio by changing the color lightness.

RGB is based on an additive color model of light waves. The more color added, the closer to white it becomes. Using the RGB scale R=0 G=0 B=0 (0, 0, 0) produces black; (255, 255, 255) produces white. Avoid combinations of red on green or green on red, because red/green colorblindness is the type of color blindness that is most common.

When creating color on a computer, the color module usually lists RGB and CMYK (Cyan, Magenta, Yellow, Black) numbers. Either can be used to find colors, the other color model automatically adjusts. Many web programs give RGB values a code assigned to color for HTML or CSS (Cascading Style Sheets) known as a HEX.

The Solution

ADA Site Compliance has a color contrast checker. Access the page to get a better understanding of defining the contrast. The tool helps developers and designers test color contrast compliance with the WCAG set forth by the World Wide Web Consortium (W3C).

ADA Site Compliance uses both RGB and HEX. Calculations are based on W3C-specified formulas. To run the test, chose a foreground and background color. Results are automatically generated and shown on the right side of the screen.

The design can be converted to CMYK adjustments if there is a need for printed material. Checking for color contrast does not require a lot of time. Do it thoroughly and early in the design process to avoid making changes in the build stages. If you struggle to get website pages and images to be ADA Compliant, let the ADA Site Compliance experienced team help.