To help make sure that your work can be used and read by as many people as possible, always keep an eye on our blog… and the relative contrast between your colors. This makes sure that everyone has a chance to view your content, including those with color blindness. For digital work, there is a special tool we would like to present to you. Color Review is a tool to test color contrast.
We experience contrast differently in different colors. Because of how our eyes work, blue text on a white background will be much more easily read than a yellow. When you are designing for humans, in whatever medium, this is something to always keep in mind. Even more importantly, an estimated 217 million people live with a visual impairment.
- 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 & sliders, requires a contrast of at least 3.
Try it here.
And check the great tool to work with backgrounds – Cool Backgrounds.
However, if you feel a lack of knowledge about design, we can overwhelm you with our comprehensive UI/UX design guide. No questions will be left after you read it!