Accessible Color design

Test a new palette

Watch our video (under 5 minutes) to understand how this tool was designed to help craft accessible color palettes!

Enter individual colors on their own line. Hex and rgb() values are accepted. Submit the default list to see what happens. Press “Get Ratios” to review results against light, dark, and the most accessible pair from the list provided. Light and dark default values can be changed in the “Settings” tab.

WCAG 2.1 criteria

This tool shows three different ratio targets and how each color performs with white (light), black (dark), or another color in the provided palette. The criteria are as follows:

WCAG Level AAA:

A contrast ratio equal or greater than 7.0. For “large-scale” text, a ratio equal or greater than 4.5.

WCAG Level AA:

A contrast ratio equal or greater than 4.5. For “large-scale” text, a ratio equal or greater than 3.0.

“Large-scale” text:

Greater than 18 points (24px) or greater than 14 points (19px) and bold.

For more details about success criteria, see the WCAG 2.1 minimum contrast ratios page.

Most legible pair

From 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.

Custom: Use the text input to change the color pairing.

Modify with HSL

Why HSL? By modifying primarily the saturation and/or lightness, the original intention of the color is intact. 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. 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. More about how HSL works.

Other Notes

“Edge” values

Be careful with “edge” values — a color passes validation within 0.5 of the recommended target. It may still present a legibility issue even though it gets a passing grade.

Hover color vs. default text

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. Use the tool to compare your link color against your body text color to see how they perform.

What is this?

AccessibleColor is a tool aimed at designers and developers. From a list of colors we produce contrast information along with tools to adjust colors until they pass the recommended accessible ratios.

Why? At Oomph, we believe the web should be inclusive for all. Our designers wanted a tool to assess how an existing brand color palette performs. Starting early means that we can educate a client and make adjustments to avoid non-accessible color combinations.

Corporate brand color palettes often do not take accessibility into account. And brand colors are difficult to change. By changing the saturation or brightness of a color but not the hue, the color intention is preserved. Most users may not even notice that the color has been adjusted for accessibility.

Credits

Made with ❤ at Oomph, Inc. Last update May, 2022. Open source project with MIT license. Contribute or submit issues to the GitHub repo.

Disclaimer: 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. This tool is for general assessment purposes only and not a guarantee of compliance. This open-source visual tool is not optimized for use by screen readers.