Color Contrast Rules to Live by for HR Tech

ニュースレターを購読する
Employee on computer

Do your HR tech tools and apps conform to web content accessibility guidelines? What about your own website or content? Learn how to check and make sure everyone can use your products successfully.

4.5:1 Contrast Ratio How-To

When put into practice, this high contrast ratio may seem surprising because most of the web does not support it. However, to reach Level AA according to WCAG 2.0, all websites are required to have a minimum contrast between text and the background by 4.5:1. For instance, the button below does not have enough contrast.

Approve button does not reach level aa

The bright green background you see above on this “success” style button is often seen across the internet. The code system used to describe colors is oftentimes in hexadecimal notation. This specific bright, cheerful green is #0FB034.

However, as mentioned above this button does not meet Level AA. It doesn’t even meet the more lenient [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards of 3:1 ratio.

If the background is changed just slightly, then it does pass 3:1 with a background of #0ca22d.

3:1 ratio success button

To reach the 4.5:1 ratio, the background is changed again to #0B982C. Hurray!

4.5:1 ratio for color of button

It goes to show even the most subtle change can make a difference.

Tools to Test Color Contrast of Your HR Technology Tools

At Recognize, we use algorithms in our color code to tell us if certain buttons need to switch from white to black to create the correct contrast. This allows the app to be adapted to different user experiences. One of the ways we do that is with Bootstrap. The popular visual web development framework helps standardize buttons and more. Plus, makes it easy to customize at the same time while staying compliant.

Color picker

Tools like WebAIM Contrast Checker are easy for anyone that has the color code. Lots of Color Picker Chrome Extensions out there too that help people get the code in the first place.

ニュースレターを認識

人事関連の最新ニュース、リソース、ヒント、テクノロジーを常に把握しましょう。専門家による人事関連のヒントや特別オファーを無料で受け取りましょう。