Color is an integral part of the design. even with the bestdigital design toolsDesigners have been known to agonize over picking a tone or hex code in hopes of conveying a specific mood or message in a design. Maybe you can relate to that. But when you start looking at color through the lens of accessibility, a potential palette becomes a little more sophisticated and conscious, making color choices that much easier.
Internet accessibility in the United States is a legal gray area, but color contrast doesn't have to be.
web accessibilityit was never a sexy subject, but it shouldn't be either. At its most basic levelmake barrier freeIt's about creating experiences that can be enjoyed by as many people as possible, and that involves choosing colors that are visible to as many users as possible.
How do you know if your color options are affordable? It all comes down to color contrast and the ratio between background and foreground colors.
WCAG Color Contrast Guidelines: The Perfect Aspect Ratio
Making web designs fully accessible can seem like a chore, but maintaining color contrast is an easy win. It's also something you can do right away.
The first step is to run your color choices through one of the many color contrast accessibility assessment tools, such as:WebAIM Contrast Check Tool. If you haven't paid much attention to color contrast, there's a good chance your product is flagged for color contrast issues. Many common modern UX and UI design practices, such as using light gray to denote inactive fields, do not meet the Web Content Accessibility Guidelines (WCAG) when it comes to color contrast standards.
The WCAG 2.0 Level AA guidelines are considered the gold standard for web accessibility compliance in the United States and beyond. In some parts of the world, organizations of a certain size are required by law to comply with these guidelines. As far as color contrast is concerned, the guidelines state that text and text images should have a contrast ratio of at least4,5:1.
There are some exceptions to this rule, including:
- Large text (defined as 14 points and bold or larger, or 18 points and larger) must have a contrast ratio of at least 3:1.
- Casual text or text images that are purely decorative and serve no user purpose do not need to meet color contrast requirements.
- Brand logos do not need to meet color contrast requirements.
When color contrasts make for a better design
Many organizations already see the WCAG guidelines not only as good design practices, but also as catalysts for better design decisions and more user-friendly and robust designs.
Slack, one of the most widely used messaging platforms in the United States for teams in the workplace, questioned its entire approach to color a few years ago. In an article entitledAccessibility, a powerful design toolHubert Florin, UX Designer at Slack, examined the company's decision to refine the color palette to only include colors that meet accessibility standards. Slack reduced a palette of 130 colors (including 32 different shades of blue) to a total of just 18 colors.
“The way we approach color contrast in Slack is if it doesn't meet the color contrast guidelines, then why is it there?” Florin explained.
“Say you have gray text somewhere that doesn't meet the requirement. That means some people won't see it," he added. This could include people with visual impairments such as color blindness, but also people who "use their laptops outside in the sun and don't see their text. It comes back, so why are we doing this?
Florin's philosophy is:
If some people are okay with not seeing a part of your site or design, then why is that design element there?
This framework helped him completely rethink his approach to design and figure out which aspects of design are truly essential to an experience or just nice to have for those who can see them.
Thinking about color contrasts in this way allows Florin and his team to make logical decisions about which colors to use, when, and why. When Slack releases updates, it's not uncommon for a user to point out a specific new feature or change a feature. However, the team is able to easily explain and justify the design decision through the web accessibility framework.
Initially, following color contrast guidelines can seem like a stumbling block for companies and designers. These guidelines are forcing companies to question and adjust their use of popular palettes and uniquely branded colors. At the same time, designers at these companies are forced to work creatively within these new constraints. Ultimately, however, this leads to better designs for everyone and clear guidance on which colors to use.
color contrast tools
There are several free and paid tools that can help UX designers analyze the color palettes they currently use to determine if they meet WCAG color contrast guidelines.
The following free tools are a good place to start:
- WebAIM Contrast Checker- A simple tool from WebAIM, a non-profit organization based in the Center for Persons With Disabilities at Utah State University
- Farbzilla- A Firefox extension that pulls colors directly from a website
- WAVE (Web Accessibility Assessment Tool)) - A standalone tool as well as a Chrome extension that examines color contrast and all other WCAG accessibility guidelines
- Farol do Google DevTools- Ideal for those whose responsibilities include working directly with code
- color contrast analyzer– This tool by Grupo Paciello, specialists in accessibility, is a downloadable software for Windows and Mac
- contrast ratio– A simple tool by Lea Verou, specialist in human-computer interaction
- Success Criterion 1.4.3 - Contrast (minimum)- Learn about the WCAG Contrast Ratio Guidelines andhow to meet standards
Is compliance with color contrast mandatory?
People often wonder if it is a legal requirement to comply with WCAG guidelines. The answer depends on where you live and who you work for.
US federal agencies and their contractors are required to adhere to WCAG Level 2.0 standards for web accessibility under Section 508 of the Rehabilitation Act. However, for most private companies, it is not technically a legal requirement to adhere to these specific accessibility standards. However, the answer here gets a little complicated.
Because the Americans with Disabilities Act (ADA) requires by law that “places of public accommodation” must be accessible. However, websites are not specifically mentioned in the law, as the legislation was created 30 years ago, before websites became commonplace.
However, many regions in the United States now consider the sites to be extensions of commercial entities under the ADA, and therefore the sites are considered "places of public housing". Public accommodations must meet accessibility standards, which from a web perspective means that these sites must technically conform to WCAG standards. Since it is not specifically regulated by law, it remains a gray area.
However, web accessibility compliance is increasingly becoming a legal issue. In 2019, over 10,000 lawsuits were filed against companies for discriminating against people with disabilities by failing to remove barriers. From these processes20% refer specifically to barriers preventing access to websites and mobile apps. These lawsuits are being filed under the ADA, specifically under what is known as ADA Title III. Complaints about web accessibility relate to screen reader incompatibilities, keyboard navigation, color contrast, and a host of other issues.
Almost all of these lawsuits could be avoided if the companies involved followed the Web Content Accessibility Guidelines (WCAG) 2.0.
Dominos Pizza Ltd has learned how important this is. first hand in October. A blind man named Guillermo Robles successfully sued the company after screen reader technology prevented him from ordering pizza on the Domino's website and app. Since then, more and more companies across the United States are taking Web accessibility compliance seriously, including minor benefits like color contrast.
In other parts of the world, compliance with WCAG guidelines is a government mandate. North of the border, in the province of Ontario, Canada, headquartered in Toronto, all companies with more than 50 employees must meet WCAG 2.0 Level AA compliance by 2021, including color contrast. You'll find that most Canadian government websites and corporate websites for more regulated industries like banking and finance already comply with these rules.
While web accessibility legislation remains a gray area in the US, UX designers can start to eliminate their own gray areas by increasing contrast in their designs and meeting the color contrast guidelines set by the WCAG. If we continue to see such high numbers of legal cases, it's reasonable to assume that eventually all websites, not just federal websites, will have to meet these standards. Why not adopt these practices now and create a better experience for your users?
Photoshop can electronic test for color blindness
If you're new to color contrast support, there are tools you can use to get a better idea of how your designs would look to a colorblind user. This can help you clearly see why it's so important.
If you're familiar with Adobe products, you can quickly verify this in Photoshop with something called a soft proof. Soft proofing gives you a better idea of how colors might look in different environments.
Color Universal Design (CUD) is a theme system used by some designers as a guide to show the best colors to as many users as possible. Complies with WCAG guidelines. Some colorblind users have reduced sensitivity to reds (called protanopia), while others have reduced sensitivity to greens (called deuteranopia). There are other types of color blindness as well, not to mention different sensitivities to each color.
To determine if a project is CUD compliant,adobe recommendsto follow:
- Convert the document to the RGB color mode, which provides the most accurate electronic proof of color blindness.
- (Optional) To view the original document and a soft proof at the same time, choose Window > New Window (Illustrator) or Window > Arrange > New Window (Photoshop).
- Choose View > Proof Setup > Color Blindness and choose Protanopia Type or Deuteranopia Type. (For CUD compliance, review your document in both views.)
This is just one way to study how different users see colors. OColorblind website filtercreated by a company called Toptal allows you to enter your URL and get an idea of how your web property looks to users with different types of color blindness.
Conclusions about color contrast
While we've gotten pretty technical here, the important guideline to remember is that most colors should meet a 4.5:1 color contrast ratio.
If you get in the habit of choosing background and foreground colors that meet this minimum ratio, you'll automatically create designs that are more visible to a wider range of users. Looks like a win for us.
They design the Web
FAQs
What are examples of good color contrast for accessibility? ›
Sufficient color contrast should be provided (at least 4.5:1 ratio) for regular text. Black text on a white background has the highest readability. Warm and cold colors make for the best color contrast.
What color schemes are best for accessibility? ›As a rule of thumb, you'll want to pair dark colored text with a light background or light colored text with a dark background. The WCAG 2.1 requires, “The visual presentation of text and images of text [to have] a contrast ratio of at least 4.5:1.”
What is a good contrast ratio for accessibility? ›Whenever using color in images, ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness.
How do you check contrast color in XD? ›- When checking contrast for colors or text virtually anywhere, you'll find the labels AA and AAA pop up frequently. ...
- Download: Stark for Figma, Stark for Sketch, Stark for Adobe XD.
- To use Contrast Checker + Color Suggestions, go to Plugins and choose Stark > Contrast .
Black and white create the highest contrast possible.
What colors to avoid for accessibility? ›Avoid red and black combinations. People who cannot detect red will confuse red and black, so the item will not be legible. Avoid red and green combinations. Approximately 5% of people cannot distinguish between red and green.
What is the color contrast ratio for accessibility? ›Live Example. “WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1.
What is the standard contrast for accessibility? ›Provide good contrast. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text. Test your color palette for accessible combinations with Accessible Color Palette Builder or Contrast Grid.
What color background for accessibility? ›To make your content accessible, you should have high contrast between all text and its background color. If your text is dark, your background should be light, and vice versa. Black text on a white background is recommended for paragraphs of text.
What is the WCAG guidelines for color contrast? ›WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Why is color contrast important for accessibility? ›
Color contrast is important because text and background colors can determine how people interact with the content that is written in those colors. Low contrast colors are difficult to read when text contrasts poorly with background colors, while high-contrast colors are easier to read when paired together.
What is the minimum Colour contrast for WCAG? ›A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision.
How do you check accessibility colors? ›One of the simplest ways to ensure colour choices are accessible is to review the contrast between two colours, for example the colour of text and the background colour on which the text is placed. The higher the level of contrast the more accessible the text will be.
What is the rule of contrast in design? ›The design principle contrast refers to the use of visually different elements. In addition to capturing attention, contrast can guide the viewer's eye to a focal point, highlight important information and add variety, or even drama, to a design.
How do you determine contrast color? ›Calculating a Contrast Ratio
Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1). (L1 + 0.05) / (L2 + 0.05), whereby: L1 is the relative luminance of the lighter of the colors, and. L2 is the relative luminance of the darker of the colors.
Itten identified seven fundamental categories of contrast: hue, light-dark, cold-warm, complementary, analogous, saturation, and extension. The color star modeled several of these.
What are the 5 contrasting Colour schemes? ›...
Complementary combinations
- Red and green.
- Blue and orange.
- Yellow and purple.
- Yellow-green and red-purple.
- Red-orange and blue-green.
For example, colors that are directly opposite one another on the color wheel have the highest contrast possible, while colors next to one another have a low contrast. For example, red-orange and orange are colors that have low contrast; red and green are colors that have high contrast.
How do you fix the contrast color on accessibility? ›What to do (in short) To fix an Insufficient Color Contrast error, you will need to ensure that flagged elements meet the minimum required ratio of 4.5:1. To do so, you will need to find the hexadecimal codes of your foreground and background color, and test them in a color contrast checker.
What is the most user friendly color? ›Without a doubt, blue is one of the best colors in UI design, and one of the most frequent. Just look at your smartphone app icons, and you'll see that a lot of them are blue: Facebook, Twitter, Shazam, Safari, etc.
What colors are forbidden? ›
Red-green and yellow-blue are the so-called "forbidden colors." Composed of pairs of hues whose light frequencies automatically cancel each other out in the human eye, they're supposed to be impossible to see simultaneously. The limitation results from the way we perceive color in the first place.
What is high contrast for accessibility? ›High Contrast mode is an accessibility feature that changes the look of our website and Windows applications by replacing the color of the different elements (like background, buttons, or text) with some user's set up colors.
What is a 4 5 1 contrast ratio? ›3: Contrast states the following: For "normal" sized text or images of text, the minimum contrast ratio is 4:5:1. For "large" text (or images of large text), the minimum contrast ratio is 3:1. Large or larger scale text is defined as 18pt at normal font weight or 14pt for bold font weight.
What does contrast ratio 4.5 1 mean? ›The AA standard for color contrast is a 4.5:1 ratio between foreground (i.e. text, images) and background.
What are the 4 types of contrast? ›Are you more drawn to one form of contrast over the other? Why? Figure out what works for you: tonal, high, low, or color contrast in photography.
What are visually accessible Colours? ›What are accessible colors? Accessible colors are color combinations that have enough contrast to make layered elements (such as text or icons on a background) clearly distinguishable to those visually impaired or deficient in color vision.
Which color background attracts the most attention? ›The color red attracts attention in an emotional context.
What colors are high contrast text? ›Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text. Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text.
What is a key consideration for using color responsibly with accessibility in mind? ›Identify the two key considerations for using color. Apply appropriate colors, contrast, and ratios to text and icons. Explain the potential impact animations can have on user health.
What is AAA color contrast? ›AAA means that your text has a contrast ratio of at least 7.0. For example, ffffff text on a 595959 background and vice versa. This score is derived for people with 20/80 vision. This visual acuity score is often not able to be corrected with glasses, etc.
What color contrast is best to use for those with visual impairments? ›
White or bright yellow objects or print against a black background usually provide the strongest color contrast. Use solid colors as backgrounds to make objects “stand out.” Avoid the use of patterns, prints, or stripes. Place light-colored objects against darker backgrounds.
What is color contrast basics? ›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.
What effect does Colour contrast have? ›The interaction of hues results in the following color-contrast effects, which affect our perception of hue, depth, and transparency: simultaneous contrast—When complementary colors are immediately adjacent to one another, they visually influence each other and their chroma levels appear dramatically intensified.
Why use color contrast in design? ›Why? Contrast helps organize your design and establish a hierarchy—which simply shows which parts of your design are most important (and signals viewers to focus on those). But more than emphasizing the focal point of your design, good use of contrast adds visual interest.
What makes a color accessible? ›Making colors accessible means color combinations with enough contrast so the content is clearly distinguishable from the surrounding page.
What are the 7 principles of design contrast? ›The fundamental principles of design are: Emphasis, Balance and Alignment, Contrast, Repetition, Proportion, Movement and White Space. Design differs from art in that it has to have a purpose.
What are the three types of contrast? ›What kinds of contrast are available? There are three broad kinds of contrast available: IV, PO, and PR (rectal). IV contrast is either gadolinium for MRI or iodinated contrast for CT. PO contrast for all ER and inpatient CT scans is dilute iodinated contrast (same agent used for IV contrast in CT).
What are 3 ways to create contrast? ›- Use big and small elements in your designs to establish visual hierarchy and let the reader know what's important.
- Use textures and patterns in backgrounds and typography to make them stand out.
- Add color to make page elements pop.
What is the 60-30-10 Rule? It's a classic decor rule that helps create a color palette for a space. It states that 60% of the room should be a dominant color, 30% should be the secondary color or texture and the last 10% should be an accent.
What is the most used color contrast? ›- Black/White: The most common type of contrast as well as the most recognizable. ...
- Red/Blue: Used to contrast hot and cold or fire and ice; see Red Oni, Blue Oni. ...
- Red/Green: Usually this contrast plays with the symbolism of the two colors.
What are examples of Colour contrast? ›
For example, colors that are directly opposite one another on the color wheel have the highest contrast possible, while colors next to one another have a low contrast. For example, red-orange and orange are colors that have low contrast; red and green are colors that have high contrast.
What is an example of color contrast? ›Contrast is typically expressed as a ratio, where a higher number means a greater degree of contrast between the two colors. For example, white and black have a contrast ratio of 21:1 (the highest possible), while white and yellow have a contrast ratio of just 1.07:1.
What is the accessibility standard color contrast? ›Provide good contrast. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text. Test your color palette for accessible combinations with Accessible Color Palette Builder or Contrast Grid.
What is a good example of contrast? ›Obvious examples of contrast are black and white, big and small, fast and slow, thick and thin. Opposites are the easiest way to grasp what contrast is, but when applying contrast to design work it's never quite as black and white.
What are the 7 types of color contrast? ›Itten identified seven fundamental categories of contrast: hue, light-dark, cold-warm, complementary, analogous, saturation, and extension. The color star modeled several of these.
What are the 3 contrasting colors? ›In the traditional RYB color model, the complementary color pairs are red–green, yellow–purple, and blue–orange.
What are examples of contrast in design? ›As a principle of art, contrast refers to the arrangement of opposite elements and effects. For example, light and dark colors, smooth and rough textures, large and small shapes.
What is the minimum contrast ratio accessibility? ›A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision.
How do I fix color contrast accessibility issues? ›What to do (in short) To fix an Insufficient Color Contrast error, you will need to ensure that flagged elements meet the minimum required ratio of 4.5:1. To do so, you will need to find the hexadecimal codes of your foreground and background color, and test them in a color contrast checker.
What are 4 types of contrast in graphic design? ›- Contrast of size.
- Contrast of color.
- Contrast of shape.
- Contrast of type.