Accessible Color Contrast FAQ's
Color Contrast is one of the most common accessibility guidelines we provide recommendations for our clients. It is also one of the most common things design teams around the world should be considering from day one of a new site build or re-design.
With color contrast being one of the most ‘visible’ common accessibility issues across the internet, we are often asked a number of common questions about this topic. This blog post will dive into some of the specifics your team may be wondering about WCAG 1.4.3 (color contrast) from a baseline level.
What does the guideline say?
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Do the contrast requirements apply to logos?
No. However, if the logo has any critical text information or a tagline, it is best if the text meets the 4.5:1 contrast guideline. For example, a business named “Dave’s Burritos” will want to have the word “Burritos” be as readable as possible.
Are graphs or other visual representations of information required to meet the contrast requirement?
WCAG 2.0 does not require this, but WCAG 2.1 added a “Non-Text Contrast” guideline that covers any important visual elements like focus indicators, icons, and graphs. The guideline requires a 3:1 minimum contrast against adjacent colors, but as with any colors, the higher the contrast can be, the better. Always select colors that stand out and make the information as easy to understand as possible.
When is text large enough to qualify for the lower contrast requirement of 3:1?
The minimum font sizes allowing for a 3:1 contrast are either 14pt bold or 18pt normal text. These translate roughly into 18.67px and 24px, or 120% and 150% of base font. It’s important to check the style on the body element and see if the site has adjusted the base font size either smaller or larger and adjust expectations for each style accordingly.
Do focus indicators have a contrast requirement?
In WCAG 2.0, the guideline for focus indicators, WCAG 2.4.7, requires focus indicators to be visible, but it does not provide clear direction as to what “visible” means.
WCAG 2.1 has added a “Non-Text Contrast” guideline (linked above) that covers focus indicators as well. If the web designer/developer modified the focus indicator away from the browser default, the new focus indicator must meet a 3:1 contrast against either adjacent color (inner or outer).
Most often, the browser default focus indicators will suffice, but we always encourage the client to intentionally set the focus indicator for all focusable elements such as links, buttons, and form fields. Be sure to choose a color that has sufficient contrast and looks good. Also, it is best to change the “shape” around the focusable elements by adding a border, box, underline, or similar, because just changing color alone will not always be visible for colorblind users.
What tools can I use to test color contrast?
There are many tools that provide a quick baseline check of color contrast. It is important to note that some work better than others and it can be extremely helpful to have a 3rd Party Team (like A360) validate your actual website design as part of a larger audit to ensure you are compliant across the board.
A few quick tools that can answer some baseline questions and help get your team started would be:
Design Next Steps
Hopefully, this helped answer some of your team’s questions on color contrast for your website and other digital properties. If you have any other questions, are going through a website redesign, or are just looking at being WCAG Compliant across the board, be sure to reach out to our team! We have much more design-specific content in our A360 HUB Knowledge Base and would be happy to discuss how we can help drive WCAG 2.0 or 2.1 Compliance for your organization moving forward.