We’ve all been affected by the COVID pandemic. This is especially true for small business owners. For many, there have been few opportunities to adapt to the closed buildings, reduced tourism, and shift to virtual universities and government work.
At Intuit, our success metrics are based on powering prosperity of small businesses. Our goal is to increase the number of businesses that succeed past the five-year mark. So, we’ve taken significant steps to help small businesses survive the COVID shutdowns and transformations. I’d like to share some of these tools with you. Continue reading “Intuit’s support for small businesses during and after COVID”
Paris Web is one of the greatest developer conferences in the world. Accessibility has been a core part of the conference and speakers from around the globe have delivered impactful presentations. The following is a set accessibility-related videos published by Paris Web. Most of these are presented in French. View all of their videos on Paris Web’s Vimeo channel. Paris Web Videos on Vimeo
Creating a working style guide is common for people with disabilities to describe their working style and promote greater efficiency. The style guides can explain communication preferences, assistive technology usage, flexible work hours, requirements for mental and physical health, and how they approach new projects. The working style guide may highlight areas of strength, weaknesses, and distractions.
Working style guides promote transparency within the workplace. The goal is to eliminate friction when a manager or co-worker makes a request or takes an action that is inappropriate.
Just as personal pronoun usage has extended beyond the trans-community, the remote workplace during COVID-19 has also increased the need for everyone to create a style guide. This should also include relevant information about your home/family. For instance, you may have unexpected sounds in the background: you have a dog that barks at the doorbell, you have a child that vocalizes, the neighbor is a musician. You may be sharing Zoom-friendly space with family members and need to coordinate with their calendar.
Working Style for Ted Drake
I am a morning person. I prefer to start working early to prepare for the day. My creativity, energy, and mental acuity is best before 11:00. I prefer to have meetings in the afternoon to avoid distractions during this key period.
Afternoons are my weakest moments from a cognitive perspective. I tend to do “busy work” from 3-6. This includes bug reviews, clearing email/slack, invoices, etc. I am not productive during this period for writing creative pieces.
I also tend to work long hours, it’s not uncommon to be online and working until 9:00 pm. It is ok to message me if you see I am online. I am happy to meet with teams in India during the evenings.
I prefer written communication via email, Slack, and Twitter over phone calls. I have a desk phone number, but haven’t checked it since we left the office in March. I don’t visit LinkedIn very often, so responses can be slow.
I had a manager at Yahoo, Jeff Boulter, who enforced efficient messaging. Please don’t send a message that says “Hi Ted”, send a message that says “Hi Ted, I have a question about using aria-expanded in accordions”. This type of introduction saves both of us a lot of time.
Zoom and Teleconferencing
I prefer Zoom for teleconferencing, but am also available on BlueJeans and Skype. I will typically turn off my microphone when not speaking to avoid unnecessary noise. I typically have my video turned on with a custom background.
I will enable live captioning when available and archive recorded meetings with closed captions. I have basic knowledge of American Sign Language, but I am not fluent.
I try to be available and often tell people to feel free sending me a message. There are times of the year that I get extremely busy and may not respond immediately. My philosophy is put something on a calendar and we’ll make it happen. That’s worked really well for conferences, meetings, and such.
I’ve been in the accessibility community for a long time and wouldn’t be here without my mentors. So I also like to share my experience with others. Don’t be offended if you sent a request and I didn’t reply, it probably came at a time that I was swamped.
I recently gave a presentation for Maxability about color contrast. This is a complex topic and could never be fully covered in one hour. I hoped to bring some understanding of why we still have problems with color contrast, understanding why designers may use a color that doesn’t meet color contrast requirements, and strategies to build better products.
The Saga of Accessible Colors
Muwekma Ohlone People
“I want to respectfully acknowledge the Muwekma Ohlone People, who have stewarded this land (San Francisco) throughout the generations.”
Accessible Color Contrast
What is your reaction?
Color Contrast for Designers
Designers can have a negative reaction to color contrast conversations. Especially when the designer is limited by a company approved set of colors and they don’t have the power to make arbitrary changes. It’s important for accessibility teams to empower designers by emphasizing what they do have power to control, such as naming, accessible text descriptions, focus management, keyboard interaction design, typography, and more. Identify where colors can be improved within the approved color palette. Many times the low-contrast color is a non-standard, perhaps outdated choice. It’s also important to focus color contrast changes within the greater color conversations and include color-blindness, dyslexia, and dark mode/high contrast considerations.
Color Contrast for Developers
Developers don’t have much control over color contrast. It’s important to educate developers about color contrast and give them the power to question designs that promote low-contrast colors. They should have the confidence to go back to the design team for a specification that uses good color contrast.
Color Contrast for PMs
Color contrast is just one of many competing requirements for project managers. While they may be supportive, they are also juggling resources and need to know what their team can control. They may not be able to change the company’s color branding, but they can prioritize issues that are relevant for their screens, such as an incorrect use of light grey where it should be dark grey.
Color Contrast for Users
Your customers need adequate color contrast. They are complaining when designs include low-contrast colors. You may not hear the complements when a site uses adequate colors, becuase it just works. And isn’t that our goal?
4.5:1 Battle Cry
Color contrast requirements are based on a specific ration of foreground text and background color. Standard text needs to have 4.5:1 color contrast. Large text can have 3:1 color contrast. This is not a perfect measurement, but it does provide a solid standard and ensures people with low-vision, cracked phone screens, dirty monitors, and someone checking their emails outside a coffee shop can read their screens without undue stress.
This was the analysis done by the WebAim 1 million. It’s a horrible number, but is it as bad it sounds? I did an evaluation of Intuit’s home page and several sites listed in the Alexa top 10 to see what was being highlighted as low contrast.
Intuit Home Page.
There are two areas identified as having low contrast. One section has good contrast, but there was an animation as the page loaded. This was identifed as having four issues. Another section was below the fold and had a white heading on a light grey background. As the user scrolls, the light grey background was replaced with a dark image, which provides adequate contrast. The solution, for both of these is to not depend on background images and include an adequate contrast when the image is not present.
Google Home Page
The Google home page has a single "." that is white on a white background. It’s probably used for performance tracking and is not meant to be discovered by the customer. It also includes aria-hidden="true" to remove it from the Accessibility API.
YouTube Home Page
The YouTube home page has a lot of content. But the trademark string at the bottom of the page uses 3.19:1. This is an error, it should be 4.5:1. But it’s a small percentage of the content.
This popular site in China has a lot of color contrast issues. Wave found 81 issues and Axe found 67. There’s a lot of room for improvement, especially with medium blue content on light blue background. But there majority of the issues are above 4.4:1. This is still an error, but not as bad as a page full of 3:1 and below.
Automated Testing Doesn’t Tell The Whole Story
* This is not an excuse to design with inaccessible colors
Goals For Today
Understand Overlapping requirements
Explore Conflicting User Experiences
Learn strategies for moving forward
Call to Action buttons
Readable vs. Actionable
Intuit uses Orange for primary call to action buttons. The current orange does not provide 4.5:1 color contrat.. Orange gets muddy at 4.5:1
But orange provides visual contrast against blue/black typography. The orange button creates a clear call to action, which is important for some customers:
The TurboTax team is investigating options to replace the orange button. They’ve added a color theme that switches the orange button for an accessible blue button. But this has some tradeoffs. The blue button matches the page’s colors and doesn’t stand out as the clear call to action. They ran tests, via UserTesting.com to test the actionable nature of the buttons. While the blue buttons are more readable, people with low vision and color-blindness had a slight preferance for the orange buttons.
Warm colors, such as orange, advance on the screen. Whereas cool colors, such as blue recede on the screen. This is one reason why orange call to action buttons have great strength
White vs Black Text on colored backgrounds
The Myths of Color Contrast Accessibility suggested low contrast text, i.e. white on medium blue, is more readable than high contrast text, black on medium blue. This was countered in There is no “Myths of Color Contrast Accessibility” by Geoffrey Crofte. Crofte points out the examples were limited, the blue could have been an accessible color, and the color of the background page impacts the readability of the button text. In short, the original post gave a popular argument for using low-contrast, but this was not sufficient to defend design decisions.
Defending low contrast decisions
Call to action buttons are an example of a low-contrast design decision that could be solved with a different color choice. In fact, the team is investigating several color options that provide accessible contrast and visual separation. There are times when a lower contrast choice can be defended.
Intuit’s goal is to reduce the customer’s need to enter data. To this end, we use artificial intelligence to prepopulate form data. This can significantly increase the efficiency of creating a tax return or sending an invoice to a customer. But this brings up the conflict between inputs that have pre-filled data and placeholders. Customers found it confusing when forms had a combination of inputs with data and placeholders, they tended to skip the inputs with placeholders, as they looked like values. So Intuit uses a lower contrast placeholder color. It’s marginal on readability, but reduces the confusion between what is a value and what is a placeholder. Ultimately, Intuit’s Design System prioritizes moving the placeholder text out of the input and using a secondary string below the input. This removes the potential of confusion and makes the descriptive text available to everyone. We also use aria-describedby to surface that additional information to screen readers when the input has focus.
Low contrast placeholder text also makes it critical to not use placeholders as form input labels. They are meant to be suggestions, not labels.
Designers use visual hierarchy to define what sections of a screen are the most important, secondary, and least important. This is accomplished with:
Size and Scale
Color and Contrast
Spacing, Proximity, and Negative Space
It’s common to place a light background color on tertiary information, such as a footer. But be careful, that body link color may not have enough contrast when placed on a background color. This should be accounted for in the color branding decisions.
Overlapping Link Requirements
Links have multiple contrast requirements. The text always needs to be 4.5:1 against the background color. It’s become a design standard to remove the underline on a link. This means the color is the only signifier between a link and body text. When color is the only difference, we need a 3:1 contrast ratio between the link (blue) and the body text (black). Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.”
We also need to make sure a user can scan a page and know which links have been visited, focused, active, or have a mouse hover. This complicates the color choices when color is the only differentiator. Jared Smith explained this complexity in his article: WCAG 2.0 and Link Colors. His color selections are:
Don’t alienate your design teams by only focusing on color. That is just one aspect of inclusive design and you risk alienating them. Especially when limited to an official color palette. Focus on empowering designers to consider the full spectrum of inclusive design and make yourself a resource, not a thorn in their side.
Listen to your customers
How to find valuable accessibility feedback in Slack
Designers Love Grey
Recognize the allure of grey text. You need to understand why designers reach for the low-contrast designs to have the correct vocabulary and work towards a color theme that works for everyone. Here are some articles about grey text for your research.
All color contrast issues need to be addressed. But some issues can be prioritized with project managers. Obvious changes, for instance older pages that still have grey on grey links in the footer, can be updated without much challenge. This is especially true if the older pages do not meet updated color palettes.
Simply Unreadable Text
Anything less than 2:1 is unacceptable and needs to be prioritized. Even if it represents a disabled element. This content is not readable.
Content that falls between 2:1 and 3:1 requires design justification. For instance, it is a disabled button or placeholder text. If the design needs to be updated if there’s insufficient justification.
Start a conversation
Determine why content uses something between 3:1 and 4:1.
Is it a heading?
Is it disabled?
Is it an icon or logo?
Because that’s what others are doing?
There are valid reasons for this contrast, but check to see what needs updating.
Why is contrast between 4:1 and 4.5:1? In many ways, these are the elements that take the longest to fix. Focus on what causes this and how they can be updated:
A branding color that didn’t consider accessibility
An adequate link color that fails when on a background color
A background gradient
A color that doesn’t meet the color palette
This presentation explored the potential of automated testing, working with different team members, and how to prioritize your color contrast improvements. Here are your action items moving forward:
Automated testing is great, but doesn’t provide scale
Inclusive Design includes more than recognizing challenges for our customers with a disability. It also recognizes the intersections between ability, race, gender, socioeconomic, and family dynamics. Including diverse voices in your product design and customer interviews will lead to greater products that support all of our customers.