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.

Accessible colors