I created our “Designers’ Accessibility Checklist,” and I will cover one of the most impactful guidelines on the checklist in this article: making sure that there is sufficient color contrast for all content. I assess how our product designs measure up to the Web Content Accessibility Guidelines (WCAG) 2.0, and I review our company’s design patterns and best practices. I am a design consultant on PayPal’s accessibility team.

Web page viewed with NoCoffee low-vision simulation. In this article, I’ll share one aspect of design accessibility: making sure that the look and feel (the visual design of the content) are sufficiently inclusive of differently sighted users. Can you imagine how someone who sees differently would read and use it?.Are you able to read the labels, fields, buttons, navigation and small footer text?.Close your eyes slightly so that your vision is a bit clouded by your eyelashes. When you browse your favorite website or check the latest version of your product on your device of choice, take a moment to look at it differently. In this article, Cathy O’ Connor shares one aspect of design accessibility: making sure that the look and feel (the visual design of the content) are sufficiently inclusive of differently sighted users. Can you still see and use the website? Are you able to read the labels, fields, buttons, navigation and small footer text? Can you imagine how someone who sees differently would read and use it? This open-source visual tool is not optimized for use by screen readers.If you browse your favorite website and close your eyes slightly so that your vision is a bit clouded by your eyelashes. This tool is for general assessment purposes only and not a guarantee of compliance. Contribute or submit issues to the GitHub repo.ĭisclaimer: The algorithm used in this tool and subsequent results are based on the luminosity algorithm recommended in the WCAG 2.1 guidelines to test for contrast. Most users may not even notice that the color has been adjusted for accessibility. By changing the saturation or brightness of a color but not the hue, the color intention is preserved. And brand colors are difficult to change. Starting early means that we can educate a client and make adjustments to avoid non-accessible color combinations.Ĭorporate brand color palettes often do not take accessibility into account. Our designers wanted a tool to assess how an existing brand color palette performs. Why? At Oomph, we believe the web should be inclusive for all. From a list of colors we produce contrast information along with tools to adjust colors until they pass the recommended accessible ratios. What is this?ĪccessibleColor is a tool aimed at designers and developers. Use the tool to compare your link color against your body text color to see how they perform. If links are not underlined, there must be 3:1 contrast between link text and body text and also an additional change (e.g., underlining) on mouse hover and keyboard focus. It may still present a legibility issue even though it gets a passing grade. Other Notes “Edge” valuesīe careful with “edge” values - a color passes validation within 0.5 of the recommended target. Of course, modify the Hue as you wish as well, but our intention is to show how small movements to the saturation and lightness can increase accessibility while retaining the intention of the brand color. To modify the Hue would be to start to modify the color from a blue to a blue-green, or from a red to an orange.

Why HSL? By modifying primarily the saturation and/or lightness, the original intention of the color is intact. Most legible pairįrom the given list of colors, which color combination is the most accessible? This does not mean that the color pair will pass minimum requirements, but it has the best chance of passing.Ĭustom: Use the text input to change the color pairing. Greater than 18 points (24px) or greater than 14 points (19px) and bold.įor more details about success criteria, see the WCAG 2.1 minimum contrast ratios page. For “large-scale” text, a ratio equal or greater than 3.0. WCAG Level AA:Ī contrast ratio equal or greater than 4.5. For “large-scale” text, a ratio equal or greater than 4.5. The criteria are as follows: WCAG Level AAA:Ī contrast ratio equal or greater than 7.0. This tool shows three different ratio targets and how each color performs with white (light), black (dark), or another color in the provided palette. Light and dark default values can be changed in the “Settings” tab.

Press “Get Ratios” to review results against light, dark, and the most accessible pair from the list provided. Submit the default list to see what happens. Watch our video (under 5 minutes) to understand how this tool was designed to help craft accessible color palettes!Įnter individual colors on their own line.

Contrast checker ui