Originally I and my colleague Tonya Smyrnova posted this review to Syndicode blog.
Always keep an eye on your digital product design (fonts, negative space etc) and the relative contrast between your colors. Make sure that everyone has a chance to view your content, including people with color blindness. For digital work such as websites and mobile applications, there is a special tool I would like to tell you about. Color Review is a tool to test color contrast.
We experience contrast differently in different colors. Contrast is utmost important when you want people to read or recognize your content presented with text or different shapes. When you are designing for humans, in whatever medium, this is something to keep in mind. Even more importantly, an estimated 217 million people live with a visual impairment.
Here are the next tips you should follow to make the color contrast clear:
- For digital work, the WCAG standard has been put together for this purpose and is what this site uses (the latest 2.1 version). It has two levels, AA and the more strict AAA.
- For AA the required contrast for text is 4.5. Headlines and large text needs at least 3.
- Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. You can read the full WCAG 2.1 standard here. The current contrast is 12.
- AAA requires 7 for text. For headlines and large text, the minimum is 4.5.
- Interface elements that are not currently active, such as buttons and sliders, requires a contrast of at least 3.
Try Color Review here. It will help you to define the number for the color contrast and understand how to reach the needed one.
And check my comprehensive UI/UX design guide.