Try out end-to-end accessibility testing of your webiste for free with our partner
The contrast between
foreground and background is

What you need to know about colors & accessibility.

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. To help make sure that your work can be used and read by as many people as possible, always keep an eye on 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, 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.

Change background

Interface elements that are not currently active, such as buttons & sliders, requires a contrast of at least 3.

Direct link

Would you like to be the first to try out the app with great features such as swatches & eyedropper?