What is color contrast?
For digital accessibility, the concept of color contrast is as critical as it is simple. Color contrast refers to the difference in light between font (or anything in the foreground) and its background. By using sufficiently-contrasting colors, a website’s font visibility is stark enough to distinguish — meaning the great content you’ve developed for your website can be read by everyone.
Who benefits from color contrast compliance?
Website users who have low vision, low contrast vision, or color vision deficiency will require color choices that adhere to the Web Content Accessibility Guidelines (WCAG) standards in order to read content. As the population ages, consider how many people may fall into one of those visual categories. Additionally, even people without a visual disability will appreciate a color palette that isn’t distracting and won’t cause unnecessary eye strain.
How do I meet color contrast compliance?
Color contrast ratios
When we talk about color contrast ratios, we are talking about a numerical value assigned to the difference in light between the foreground and background.
WCAG success criterion 1.4.3 is the main one to know here, as it dictates the minimum contrast that’s generally considered accessible. The guidelines say that normal text (including images of text) must meet a contrast ratio of at least 4.5:1; large text (18 point or larger, or 14 point or larger and bold) should have a contrast ratio of at least 3:1.
The minimum contrast ratio of 4.5:1 adheres to WCAG Level AA, but there is also an “enhanced” ratio (success criterion 1.4.6) that requires a deeper level of contrast and adheres to Level AAA. The enhanced ratio calls for a contrast of 7:1. It’s important to keep in mind that these designated numbers, just like all WCAG checkpoints, are not arbitrary — they’re specifically designed to help more people access the information on your website. The 4.5:1 ratio should be enough to make up for the loss in contrast sensitivity for those with 20/40 vision, while the 7:1 ratio accounts for roughly 20/80 vision. Remember, complying with Levels A and AA is usually the standard.
Envision all users from the beginning
When thinking of designing a website, make sure the product is built from the beginning with all users, including people with disabilities, in mind. It is easier to build the website correctly, envisioning all audiences, the first time than to retrospectively fix every issue.
Here are some tips to help make sure color contrast isn’t an afterthought:
- Don’t forget about navigational elements, footnote regions, menus, or any area people will see or interact with. All of these features need to be visible in order to be usable.
- Consider color contrast when creating brand colors and color palettes. If designers don’t have accessible color combinations to work with, it will be difficult for them to deliver compliant designs.
- Review and test colors in the design phase before a product goes to development. This helps prevent unnecessary re-work and allows more time to make any needed revisions.
Easy Color Contrast References and Tools
We want this information to be empowering, not overwhelming. Here are some great tools and references to help you along the way to color contrast compliance.
WCAG Color Contrast Ratios Table
| Font size | Non-compliant | Minimum (AA) | Enhanced (AAA) |
|---|---|---|---|
| Normal | < 4.5:1 | 4.5:1– 7:1 | > 7:1 |
| Large (18 pt font or 14 pt bold) | < 3:1 | 3:1 – 4.5:1 | > 4.5:1 |
a11y® Color Contrast Accessibility Validator
The a11y® Color Contrast Accessibility Validator is a free instant color contrast analysis provided by the Bureau of Internet Accessibility.
Meeting color contrast requirements is truly one of the most important accessibility considerations, and it’s often an area that can be easily remediated. For help with color contrast or to learn about all we can do to help you on your road to accessibility compliance, talk to us. Or, get started with a free and confidential website scan on our powerful a11y® platform.
