Design
Color Contrast
Take time to review your brand colors and check for their color contrast ratio. What are the pairings of colors? The color of the font against backgrounds? Grab the HEX value of those colors and run through a Color Contrast tool to get its calculation.
Normal Text Color Requirements
The 4.5:1 contrast minimum applies to body text that is 16px and smaller
Large Text Color Requirements
For any text that is larger than 16px, the color contrast requirements are more relaxed, at 3:1.
Additionally, text that is 16px and smaller, and bold use the 3:1 ratio requirement.
User Interface Color Requirements
In WCAG 2.1 there is an expanded requirement to incorporate UI element colors against the background, to ensure it has a contrast ratio minimum of 4.5;1.
Validating your Color Palette for Accessibility
It’s important to understand which combinations of colors in your brand palette are compliant. Plug in the HEX values into the Toolness Color Matrix app and you can see a grid of the compliant combinations.
Creating an Accessible Color Palette
Do you have brand colors that aren’t quite passing accessibility requirements for color contrast? Visit tanaguru contrast finder (https://contrast-finder.tanaguru.com/) to have the app find the next closest option for a compliant color. Sometimes the difference may not be perceptible to sighted users, yet it may make all the difference for low vision users who need contrast support.
You may use these settings:
Checking a color (foreground or background) against a contrast standard (4.3:1, 3:1)
Requesting a suggestion for the nearest possible color that meets the selected contrast ratio
Typography
Last updated
